Stripe Elements Web Components

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

👨‍🎨 Live Demo 👀

🚚 Installation

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

<script src="https://js.stripe.com/v3/"></script>

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

<stripe-elements> is a community project.

📚 API Docs

Learn how to use Stripe Elements web components in the docs

3.3.0 (2022-08-22)

Features

• strict mode (#94) (3b989dd)

3.2.1 (2022-08-17)

Bug Fixes

• add missing declaration files in build (#92) (5cbc63b)

3.2.0 (2022-06-21)

Bug Fixes

• update lit version (#90) (536ad46)
• update release workflow (fbc0fd6)

Features

• add locale props for stripe initialization (#87) (44317a4)

3.1.0 (2022-06-02)

Features

• stripe-account attr (929edb0)

3.0.0 (2022-02-15)

Bug Fixes

• update deps (8e582e0)
• update docs (028b3fb)

• feat!: load stripe automatically (a71b183)

BREAKING CHANGES

• migrate to stripe npm, with window.Stripe fallback

remove ShadyDOM support

remove ReadOnlyMixin and LitNotifyMixin in favour of decorators

• private setReadonlyProperties removed

move breadcrumb code to a controller.

remove deprecated properties

• isComplete => `complete
• isEmpty => empty
• card => element
• stripeReady => ready
• hasError => error

remove deprecated events

• stripe-ready => ready
• stripe-error => error
• stripe-payment-method => payment-method
• stripe-source => source
• stripe-token => token

3.0.0-next.3 (2022-02-15)

Bug Fixes

• update docs (e34687d)

3.0.0-next.2 (2022-02-15)

Bug Fixes

• update deps (2c34c91)

3.0.0-next.1 (2022-02-11)

• feat!: load stripe automatically (eee9c53)

BREAKING CHANGES

• migrate to stripe npm, with window.Stripe fallback

remove ShadyDOM support

remove ReadOnlyMixin and LitNotifyMixin in favour of decorators

• private setReadonlyProperties removed

move breadcrumb code to a controller.

remove deprecated properties

• isComplete => `complete
• isEmpty => empty
• card => element
• stripeReady => ready
• hasError => error

remove deprecated events

• stripe-ready => ready
• stripe-error => error
• stripe-payment-method => payment-method
• stripe-source => source
• stripe-token => token

2.3.12 (2021-10-03)

Bug Fixes

• package lib for npm (a22db41)

2.3.11 (2021-10-03)

Bug Fixes

• package types when building (f3c8d2c)

2.3.10 (2021-10-03)

Bug Fixes

• typescript types (475a2ac)

2.3.9 (2021-08-31)

Bug Fixes

• don't import types from wc polyfill (8a8f192)
• provide request shipping option (6f99772)

2.3.8 (2020-12-30)

Bug Fixes

• update payment request amount (0c55cf7)

2.3.7 (2020-04-22)

Bug Fixes

• publish typescript declarations (4ad010a)

2.3.6 (2020-04-22)

Bug Fixes

• migrate to typescript (1b63924)

2.3.5 (2020-02-25)

Bug Fixes

• update and unpatch notify mixin (f346dd6)

2.3.4 (2020-02-24)

Bug Fixes

• some notifying props now fire changed events properly (1046da6)

2.3.3 (2020-02-13)

Bug Fixes

• unmount element when disconnected from the DOM (1330f45)

2.3.2 (2020-02-09)

Bug Fixes

• shadow breadcrumbs use tag name (6e21421), closes #33

2.3.1 (2020-02-08)

Bug Fixes

• patch types to extend LitElement properly (6b2e8cf)

2.3.0 (2020-01-29)

Bug Fixes

• prevent typeerror if payment is unsupported (d9f1146)

Features

• payment-request: add unsupported event (de6555b)

2.2.4 (2020-01-29)

Bug Fixes

• more semantic HTML for error output (21443f5)
• unmount element before removing mountpoints when initializing (8f2dd6f)

2.2.3 (2020-01-27)

Bug Fixes

• fix patch-package script (e347aaa)

2.2.2 (2020-01-27)

Bug Fixes

• fix typescript typings (f3cb81e)

2.2.1 (2020-01-25)

Bug Fixes

• export ts typings (487c04c)

2.2.0 (2020-01-25)

Bug Fixes

• clear the element when calling reset (3b8bc61)
• improve error message for empty card (fa17b60)

Features

• add stripe and error css shadow parts. (46013a2)
• add stripe-payment-request element (32cdd0d)
• adds ready and focused propertie; blur and focus methods (26f6e2a)
• reflect error message to attr (bf3df77)
• stripe-elements: add ready readOnly notifying prop (279d603)
• stripe-elements: adds complete, empty, & invalid properties (b7c3f12)

2.1.1 (2020-01-21)

Bug Fixes

• events bubble (e68f25c)
• when action property is set auto-POSTs payment info to URL (35f0502)

2.1.0 (2020-01-20)

Features

• add createPaymentMethod method (9639e10)
• add submit method and generate attribute (b866405)

2.0.2 (2020-01-19)

Bug Fixes

• fix DOM rebuilding for broken light slot template (56b6a69)

2.0.1 (2020-01-06)

Bug Fixes

• instantiating with a key no longer breaks tree walking (0ab1a56)

2.0.0 (2019-12-22)

⚠ BREAKING CHANGES

• removes submit method

Before:

submitButton.addEventListener('click', () => stripeElements.submit())

After:

getTokenButton.addEventListener('click', () => stripeElements.createToken())
getSourceButton.addEventListener('click', () =>
stripeElements.createSource())

• removes error display unless show-error is set.

Previously, stripe elements would display the error message within it's shadow DOM. To continue to use that feature, set

<stripe-elements show-error></stripe-elements>

Also adds a error CSS Shadow Part

stripe-elements::part(error) {
  font-color: red;
}

Features

• add createSource method (5cc03ab)
• add data param to createToken & createSouce (5a1b043)
• add show-error boolean attribute (6fedf77)

Bug Fixes

• set validation state initially (b4b2b0b)