stripe-pwa-elements

stripe-pwa-elementsは、Stripe決済フォームをWebコンポーネントとして提供するオープンソースライブラリです。Stencil.jsで構築されており、React、Vue、Angular、あるいは素のHTMLなど、あらゆるWebフレームワーク・環境で動作します。

HTMLタグを記述するだけでStripeの決済フォームをアプリに組み込めるため、フロントエンドの実装コストを大幅に削減できます。PWA（Progressive Web App）やCapacitorを使ったネイティブアプリにも対応しています。

主な特長

• フレームワーク非依存 — Web Components標準に準拠。React、Vue、Angular、Svelte、素のHTML/JSなど、あらゆる環境で動作します
• 豊富な決済手段 — カード決済、Apple Pay、Google Pay、Stripe Link、PayPal、Amazon Payなど主要な決済方法に対応
• 3つの統合モード — Payment Intent（即時決済）、Setup Intent（カード保存）、Checkout Session（セッションベース）の各フローをサポート
• 国際化（i18n）対応 — i18nextによるUIの自動翻訳。ブラウザの言語設定に応じてラベルやメッセージを自動切替
• モバイル最適化 — iOS / Androidのプラットフォーム検出に対応。Capacitor経由のネイティブアプリでも動作
• TypeScriptサポート — 完全な型定義を同梱。型安全な開発が可能
• MITライセンス — 商用利用を含め自由に利用可能

提供コンポーネント

決済フォーム

• <stripe-payment-element> — Stripeの統合決済フォーム（Payment Element）。クレジットカード、銀行振込、その他の地域別決済手段を1つのフォームで処理。Payment IntentとCheckout Sessionの両方に対応
• <stripe-card-element> — カード番号・有効期限・CVCを個別フィールドで入力するカード決済フォーム。ZIPコード入力やPayment Request Buttonの表示にも対応
• <stripe-express-checkout-element> — Apple Pay、Google Pay、Stripe Link、PayPal、Amazon Payなどのワンクリック決済ボタン

アドレス・認証

• <stripe-address-element> — 請求先 / 配送先の住所入力フォーム。オートコンプリート機能付きで、国別のフォーマットに対応
• <stripe-link-authentication-element> — Stripe Linkのメール認証コンポーネント。ワンクリック決済の認証フローを実装

ユーティリティ

• <stripe-currency-selector> — Adaptive Pricing用の通貨セレクター。Checkout Sessionと連携して通貨切り替えを提供
• <stripe-modal> — 決済コンポーネントを包む軽量モーダル。開閉制御やクローズボタンの表示を管理
• <stripe-card-element-modal> — カード決済フォームとモーダルを組み合わせたオールインワンコンポーネント

インストール

npm install stripe-pwa-elements

使い方

Payment Element（推奨）

最もシンプルな統合方法です。あらゆる決済手段を1つのフォームで受け付けられます。

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

カード決済フォーム

カード番号・有効期限・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）

ワンクリック決済ボタンを表示します。利用可能な決済方法に応じてボタンが自動的にレンダリングされます。

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

カスタムイベントハンドリング

デフォルトのフォーム送信アクションを無効にし、独自のロジックを実行できます。

<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>

モーダル表示

決済フォームをモーダルダイアログ内に表示できます。

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

対応プラットフォーム

• モダンブラウザ（Chrome、Firefox、Safari、Edge）
• Progressive Web Apps（PWA）
• Capacitor（iOS / Android ネイティブアプリ）
• React / Vue / Angular / Svelte / その他のフレームワーク
• 素のHTML / JavaScript

技術仕様

• ビルドツール: Stencil.js 4.x
• Stripe SDK: @stripe/stripe-js 8.x
• 国際化: i18next
• バージョン: 3.1.0
• ライセンス: MIT
• 配布形式: ESM / CommonJS / UMD（CDN利用可）

リンク

• GitHub リポジトリ
• npm パッケージ