stripe-pwa-elements

stripe-pwa-elements is an open-source library that provides Stripe payment forms as Web Components. Built with Stencil.js, it works with any web framework or environment — React, Vue, Angular, or plain HTML.

Simply add HTML tags to embed Stripe payment forms in your application, significantly reducing frontend implementation effort. It also supports Progressive Web Apps (PWAs) and native apps built with Capacitor.

Key Features

• Framework-agnostic — Follows Web Components standards. Works in React, Vue, Angular, Svelte, plain HTML/JS, and more
• Multiple payment methods — Supports card payments, Apple Pay, Google Pay, Stripe Link, PayPal, Amazon Pay, and other payment methods
• Three integration modes — Payment Intent (pay now), Setup Intent (save card), and Checkout Session (session-based) flows
• Internationalization (i18n) — Automatic UI translation via i18next. Labels and messages switch automatically based on browser language
• Mobile-optimized — iOS / Android platform detection. Works in native apps via Capacitor
• TypeScript support — Ships with complete type definitions for type-safe development
• MIT License — Free to use for any purpose, including commercial projects

Available Components

Payment Forms

• <stripe-payment-element> — Stripe's unified Payment Element. Handles credit cards, bank transfers, and regional payment methods in a single form. Supports both Payment Intent and Checkout Session
• <stripe-card-element> — Card payment form with separate fields for card number, expiry, and CVC. Also supports ZIP code input and Payment Request Button
• <stripe-express-checkout-element> — One-click payment buttons for Apple Pay, Google Pay, Stripe Link, PayPal, and Amazon Pay

Address & Authentication

• <stripe-address-element> — Billing / shipping address form with autocomplete and country-specific formatting
• <stripe-link-authentication-element> — Email authentication for Stripe Link one-click checkout

Utilities

• <stripe-currency-selector> — Currency selector for Adaptive Pricing, integrated with Checkout Session
• <stripe-modal> — Lightweight modal wrapper for payment components with open/close controls
• <stripe-card-element-modal> — All-in-one component combining card payment form with modal

Installation

npm install stripe-pwa-elements

Usage

Payment Element (Recommended)

The simplest integration method. Accept all payment methods with a single form.

<stripe-payment-element
  publishable-key="pk_test_xxxxx"
  intent-client-secret="pi_xxxxx_secret_xxxxx"
></stripe-payment-element>

Card Payment Form

A form with separate fields for card number, expiry, and CVC.

<stripe-card-element
  publishable-key="pk_test_xxxxx"
  intent-client-secret="pi_xxxxx_secret_xxxxx"
></stripe-card-element>

Express Checkout (Apple Pay / Google Pay)

Display one-click payment buttons. Buttons are rendered automatically based on available payment methods.

<stripe-express-checkout-element
  publishable-key="pk_test_xxxxx"
  client-secret="pi_xxxxx_secret_xxxxx"
  amount="1099"
  currency="usd"
></stripe-express-checkout-element>

Custom Event Handling

Disable the default form submission action and run your own logic.

<stripe-card-element
  publishable-key="pk_test_xxxxx"
  intent-client-secret="pi_xxxxx_secret_xxxxx"
  should-use-default-form-submit-action="false"
></stripe-card-element>
<script>
customElements.whenDefined('stripe-card-element').then(() => {
const element = document.querySelector('stripe-card-element');
element.addEventListener('formSubmit', async (e) => {
const { stripe, cardNumberElement } = e.detail;
const result = await stripe.createPaymentMethod({
type: 'card',
card: cardNumberElement,
});
element.updateProgress('success');
});
});
</script>

Modal Display

Display a payment form inside a modal dialog.

<stripe-modal open="true">
  <stripe-card-element
    publishable-key="pk_test_xxxxx"
    intent-client-secret="pi_xxxxx_secret_xxxxx"
  ></stripe-card-element>
</stripe-modal>

Supported Platforms

• Modern browsers (Chrome, Firefox, Safari, Edge)
• Progressive Web Apps (PWA)
• Capacitor (iOS / Android native apps)
• React / Vue / Angular / Svelte / other frameworks
• Plain HTML / JavaScript

Technical Specifications

• Build tool: Stencil.js 4.x
• Stripe SDK: @stripe/stripe-js 8.x
• Internationalization: i18next
• Version: 3.1.0
• License: MIT
• Distribution: ESM / CommonJS / UMD (CDN ready)

Links

• GitHub Repository
• npm Package