https://github.com/bennypowers/stripe-elements

Custom Element Wrapper for Stripe.js v3 Elements
https://github.com/bennypowers/stripe-elements

custom-elements customelements hacktoberfest lit-element stripe stripe-element stripe-form web-component webcomponents

Last synced: 13 days ago
JSON representation

Custom Element Wrapper for Stripe.js v3 Elements

• Host: GitHub
• URL: https://github.com/bennypowers/stripe-elements
• Owner: bennypowers
• Created: 2017-06-02T12:41:49.000Z (almost 8 years ago)
• Default Branch: main
• Last Pushed: 2023-12-06T11:40:38.000Z (over 1 year ago)
• Last Synced: 2025-04-09T21:16:01.709Z (13 days ago)
• Topics: custom-elements, customelements, hacktoberfest, lit-element, stripe, stripe-element, stripe-form, web-component, webcomponents
• Language: TypeScript
• Homepage: https://stripe-elements.netlify.app/
• Size: 26.1 MB
• Stars: 81
• Watchers: 4
• Forks: 20
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

• awesome-lit - Stripe Elements - Custom Element Wrapper for Stripe.js v3 Elements. (Component Libraries)
• awesome-web-components - Stripe Elements - Custom Element Wrapper for Stripe.js v3 Elements. (Real World / Component Libraries)
• awesome-lit-html - Stripe Elements - Custom Element Wrapper for Stripe.js v3 Elements. (Component Libraries)

README

        
![Am Yisrael Chai - עם ישראל חי](https://bennypowers.dev/assets/flag.am.yisrael.chai.png)

# Stripe Elements Web Components

🛡⚛️🔰 **Any** Framework - **One** Stripe Integration. 💰💵💸

[![Published on npm](https://img.shields.io/npm/v/@power-elements/stripe-elements.svg)](https://www.npmjs.com/package/@power-elements/stripe-elements)

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/bennypowers/stripe-elements)

[![made with open-wc](https://img.shields.io/badge/made%20with-open--wc-%23217ff9)](https://open-wc.org)

[![Maintainability](https://api.codeclimate.com/v1/badges/b2205a301b0a8bb82d51/maintainability)](https://codeclimate.com/github/bennypowers/stripe-elements/maintainability)

[![Test Coverage](https://api.codeclimate.com/v1/badges/b2205a301b0a8bb82d51/test_coverage)](https://codeclimate.com/github/bennypowers/stripe-elements/test_coverage)

[![Release](https://github.com/bennypowers/stripe-elements/workflows/Release/badge.svg)](https://github.com/bennypowers/stripe-elements/actions?query=workflow%3ARelease)

[![Contact me on Codementor](https://cdn.codementor.io/badges/contact_me_github.svg)](https://www.codementor.io/bennyp?utm_source=github&utm_medium=button&utm_term=bennyp&utm_campaign=github)

👨‍🎨 [Live Demo](https://bennypowers.dev/stripe-elements/) 👀

## 🚚 Installation

You should make sure to load stripe.js on your app's index.html, as per Stripe's recommendation, before loading ``. If `window.Stripe` is not available when you load up the component, it will fail with a reasonably-polite console warning.

```html

```

```bash

npm i -S @power-elements/stripe-elements

```

---

`` is a community project.

---

## 📚 API Docs

Learn how to use Stripe Elements web components in the [docs](https://bennypowers.dev/stripe-elements)