<stripe-payment-element>

💳 A web component to accept payments using Stripe's Payment Element.

<stripe-payment-element
  publishable-key="your_publishable_key"
  mode="payment"
  amount="100"
  currency="usd"
></stripe-payment-element>

[!IMPORTANT] Stripe.js is automatically loaded via esm.sh if the global Stripe function is undefined, see Options.

View demo →

Installation

Via package manager

npm install stripe-payment-element

import 'stripe-payment-element/register'

Via <script> tag

Download the latest release from npm:

npm pack stripe-payment-element

Then unpack it into your project and:

<!-- host yourself -->
<script type="module" src="register.js"></script>

Or embed from a third-party CDN (not recommended for production use):

<!-- esm.sh CDN -->
<script type="module" src="https://esm.sh/stripe-payment-element/register"></script>

<!-- UNPKG CDN -->
<script type="module" src="https://www.unpkg.com/stripe-payment-element/register"></script>

[!TIP] Specify a fully resolved package version number to avoid redirects and breaking changes.

Options

| Property | Attribute | Type | Required | Description | | ----------------------------- | -------------------------------- | :------: | :------: | ------------------------------------------------------------ | | stripeJsVersion | stripe-js-version | string | | Stripe.js version to load if not present. Defaults to 9. | | advancedFraudSignals | advanced-fraud-signals | boolean | | See Advanced fraud detection | | publishableKey | publishable-key | string | ✓ | See Stripe.js reference | | stripeAccount | stripe-account | string | | See Stripe.js reference | | apiVersion | api-version | string | | See Stripe.js reference | | locale | locale | string | | See Stripe.js reference | | betas | betas | string[] | | See Stripe.js documentation | | developerTools | developer-tools | object | | See Stripe.js reference | | fonts | fonts | object[] | | See Stripe.js reference | | loader | loader | string | | See Stripe.js reference | | customerOptions | customer-options | object | | See Stripe.js documentation | | customerSessionClientSecret | customer-session-client-secret | string | | See Stripe.js reference | | customPaymentMethods | custom-payment-methods | object[] | | See Stripe.js reference | | syncAddressCheckbox | sync-address-checkbox | string | | See Stripe.js reference | | paymentMethodCreation | payment-method-creation | string | | See Stripe.js reference | | disableAnimations | disable-animations | boolean | | See Elements Appearance API | | theme | theme | string | | See Elements Appearance API | | variables | variables | object | | See Elements Appearance API | | rules | rules | object | | See Elements Appearance API | | labels | labels | string | | See Elements Appearance API | | inputs | inputs | string | | See Elements Appearance API | | mode | mode | string | ✓* | See Stripe.js reference | | amount | amount | number | ✓* | See Stripe.js reference | | currency | currency | string | ✓* | See Stripe.js reference | | setupFutureUsage | setup-future-usage | string | | See Stripe.js reference | | captureMethod | capture-method | string | | See Stripe.js reference | | onBehalfOf | on-behalf-of | string | | See Stripe.js reference | | paymentMethodTypes | payment-method-types | string[] | | See Stripe.js reference | | excludedPaymentMethodTypes | excluded-payment-method-types | string[] | | See Stripe.js reference | | allowedPaymentMethodTypes | allowed-payment-method-types | string[] | | See Stripe.js reference | | paymentMethodConfiguration | payment-method-configuration | string | | See Stripe.js reference | | paymentMethodOptions | payment-method-options | object | | See Stripe.js reference | | clientSecret | client-secret | string | ✓* | See Stripe.js reference | | externalPaymentMethodTypes | external-payment-method-types | string[] | | See Stripe.js reference | | defaultValues | default-values | object | | See Stripe.js reference | | business | business | object | | See Stripe.js reference | | paymentMethodOrder | payment-method-order | string[] | | See Stripe.js reference | | fields | fields | object | | See Stripe.js reference | | readOnly | read-only | boolean | | See Stripe.js reference | | terms | terms | object | | See Stripe.js reference | | wallets | wallets | object | | See Stripe.js reference | | layout | layout | string | | See Stripe.js reference | | applePay | apple-pay | object | | See Stripe.js reference |

* conditionally required

Events

| Event | Description | | -------------------------- | ------------------------------------------------------------------------- | | change | Fired when the element's value changes. | | ready | Fired when the element is fully rendered. | | focus | Fired when the element gains focus. | | blur | Fired when the element loses focus. | | escape | Fired when the Esc key is pressed within the element. | | loaderror | Fired when the element fails to load. | | loaderstart | Fired when the loader UI is mounted to the DOM and ready to be displayed. | | carddetailschange | Fired when the details of a selected card payment method changes. | | savedpaymentmethodupdate | Fired when a saved payment method is updated. | | savedpaymentmethodremove | Fired when a saved payment method is removed. |