2 段階の確認機能を構築する
ユーザーが支払いの詳細を入力した後に、オプションの確認ページを追加するか、検証を実行します。
ほとんどのシナリオに標準の実装をお勧めしますが、この実装では、決済フローにステップを 1 つ追加できます。こうすることで、買い手は、注文の詳細を確認できます。また、事業者は注文を確定する前に追加の検証を実行できるようになります。
支払い方法を有効にする
注意
この導入パスは、Automated Clearing Settlement System (ACSS) を使用する BLIK またはプレオーソリデビットに対応していません。
支払い方法の設定を表示して、サポートする支払い方法を有効にします。PaymentIntent を作成するには、少なくとも 1 つは支払い方法を有効にする必要があります。
多くの顧客から決済を受け付けられるよう、Stripe では、カードやその他一般的な決済手段がデフォルトで有効になっていますが、ビジネスや顧客に適した追加の決済手段を有効にすることをお勧めします。プロダクトと決済手段のサポートについては決済手段のサポートを、手数料については料金体系ページをご覧ください。
支払いの詳細を収集するクライアント側
Payment Element を使用してクライアントで支払い詳細を収集する準備ができました。Payment Element は事前構築された UI コンポーネントであり、多様な支払い方法の支払い詳細の収集を容易にします。
Payment Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。一部の支払い方法では、支払いを確定するために別のページにリダイレクトする必要があるため、Payment Element を別の iframe 内に配置しないでください。
構築済みのシステムを機能させるには、決済ページのアドレスの先頭を http://
ではなく https://
にする必要があります。HTTPS を使用しなくてもシステムをテストできますが、本番環境で決済を受け付ける準備が整ったら、必ず、HTTPS を有効にしてください。
Payment Element によって動的なフォームが表示され、顧客はここで支払い方法を選択できます。このフォームでは、顧客が選択した支払い方法で必要な決済の詳細のすべてが自動的に収集されます。
Elements
プロバイダーを作成する際に Appearance (デザイン) オブジェクト を options
に渡すことで、サイトのデザインに合わせて Payment Element をカスタマイズできます。
住所を収集
デフォルトでは、Payment Element は必要な請求先住所情報のみを収集します。(たとえば、デジタル商品およびサービスの税金を計算するなどの目的で) 顧客の詳細な請求先住所または配送先住所を収集するには、Address Element を使用します。
オプションレイアウトをカスタマイズするクライアント側
決済フローインターフェイスに合わせて Payment Element のレイアウト (アコーディオンまたはタブ) をカスタマイズできます。各プロパティについて、詳細は elements.create をご覧ください。
以下の画像は、異なるレイアウト設定を適用した同一 Payment Element の表示を示しています。

Payment Element のレイアウト
オプションデザインをカスタマイズするクライアント側
これで、Payment Element がページに追加されました。次は、デザインに合わせて外観をカスタマイズできます。Payment Element のカスタマイズについての詳細は、Elements Appearance API をご覧ください。

Payment Element をカスタマイズする
オプション顧客の支払い方法を保存および取得する
将来の利用に備えて顧客の決済手段を保存するように Payment Element を設定できます。このセクションでは、決済手段の保存機能を導入する方法を説明しています。Payment Element で以下を実行できます。
- 買い手に支払い方法を保存することの同意を求める
- 買い手が同意した場合に支払い方法を保存する
- 将来の購入時に保存した支払い方法を買い手に表示する
- 買い手が紛失したカードまたは期限切れのカードを交換するときにそれらのカードを自動的に更新する

決済手段を保存します。

以前に保存した支払い方法を再利用します。
Payment Element で支払い方法の保存機能を有効にする
サーバー側で CustomerSession を作成します。その際、Customer ID を指定して、セッションの payment_element コンポーネントを有効にします。有効にする保存済みの決済手段機能を設定します。たとえば、payment_method_save を有効にすると、将来使用できるように支払いの詳細を保存するためのチェックボックスが、顧客に表示されます。
PaymentIntent または Checkout セッションで setup_
を指定して、決済手段を保存するためのデフォルトの動作を上書きできます。これにより、顧客が明示的に保存を選択しなくても、将来の使用に備えて決済手段を自動的に保存できます。
注意
payment_method_remove を有効にして、保存済みの決済手段を買い手が削除できるようにすると、その決済手段を利用しているサブスクリプションに影響します。決済手段を削除すると、PaymentMethod とその Customer の関連付けが解除されます。
Elements インスタンスはその CustomerSession の client secret を使用して、顧客が保存した支払い方法にアクセスします。CustomerSession の作成時に適切にエラーを処理します。エラーが発生した場合、CustomerSession の client secret はオプションなので、Elements インスタンスに指定する必要はありません。
CustomerSession の client secret を使用して Elements インスタンスを作成します。次に、Elements インスタンスを使用して、Payment Element を作成します。
// Create the CustomerSession and obtain its clientSecret const res = await fetch("/create-customer-session", { method: "POST" }); const { customer_session_client_secret: customerSessionClientSecret } = await res.json(); const elementsOptions = { mode: 'payment', amount: 1099, currency: 'usd', customerSessionClientSecret, // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret // and CustomerSession's client secret obtained in a previous step const elements = stripe.elements(elementsOptions); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element');
PaymentIntent の確定時に、顧客が支払いの詳細を保存するためのボックスにチェックマークを付けたかどうかに応じて、Stripe.js が PaymentIntent の setup_future_usage および allow_redisplay の設定をコントロールします。
セキュリティコードの再収集を実行する
オプションとして、PaymentIntent の作成時と Elements の作成時の両方に require_
を指定して、顧客がカードで支払う場合にセキュリティコードの再収集を実行します。
保存した支払い方法の選択内容を検出する
保存した支払い方法を選択したときにコンテンツを動的に制御するには、Payment Element の change
イベントをリッスンします。このイベントには、選択した支払い方法の情報が入力されています。
paymentElement.on('change', function(event) { if (event.value.payment_method) { // Control dynamic content if a saved payment method is selected } })
オプション追加の Elements オプションクライアント側
Elements オブジェクトは、支払いの回収に影響する追加オプションを受け入れます。指定したオプションを基に Payment Element は、有効化した決済手段の中から利用可能なものを表示します。詳しくは、決済手段のサポートをご覧ください。
プロパティー | タイプ | 説明 | 必須 |
---|---|---|---|
mode |
| Payment Element が PaymentIntent、SetupIntent、またはサブスクリプションで使用されているかどうかを示します。 | はい |
currency | string | 顧客に請求する金額の通貨。 | はい |
amount | number | Apple Pay、Google Pay、または BNPL の UI で示される、顧客に請求する金額。 | payment および subscription のモードの場合 |
setupFutureUsage |
| Payment Element によって収集された決済情報を使用して、今後の支払いを行う意図を示します。 | いいえ |
captureMethod |
| 顧客の口座から売上をキャプチャーするタイミングを管理します。 | いいえ |
onBehalfOf | string | Connect のみ。取引に関する金銭的責任を負う Stripe アカウント ID。このオプションが実装に関連するかを判断するには、ユースケースをご覧ください。 | いいえ |
paymentMethodTypes | string[] | 表示する決済手段タイプのリスト。この属性を省略して、Stripe ダッシュボードで決済手段を管理できます。 | いいえ |
paymentMethodConfiguration | string | Stripe ダッシュボードで決済手段を管理するときに使用する決済手段の設定。指定しない場合は、既定の構成が使用されます。 | いいえ |
paymentMethodCreation | manual | stripe.createPaymentMethod を使用して、Elements インスタンスから PaymentMethods が作成されるようにします。 | いいえ |
paymentMethodOptions | {us_ | us_ 決済手段の確認オプション。Payment Intents と同じ確認手段を受け入れます。 | いいえ |
paymentMethodOptions | {card: {installments: {enabled: boolean}}} | Stripe ダッシュボードで決済手段を管理していないときに、カード分割払いプランの選択 UI を手動で有効化できるようにします。mode='payment' を設定し、「さらに」paymentMethodTypes を明示的に指定する必要があります。それ以外の場合は、エラーが発生します。paymentMethodCreation='manual' とは互換性がありません。 | いいえ |
ConfirmationToken を作成するクライアント側
レガシーの実装で createPaymentMethod を使用する
レガシーの実装を使用している場合は、サーバーで支払いを確定するために stripe.
の情報を使用している場合があります。このガイドに従って Confirmation Tokens に移行することをお勧めしますが、以前のドキュメントを参照して 2 段階の確認機能を構築することもできます。
顧客が決済フォームを送信すると、stripe.createConfirmationToken が呼び出され ConfirmationToken を作成し、支払いの確定前に追加の検証ロジックまたはビジネスロジックをサーバーに送信します。payment_
フィールドを調べることで、追加のロジックを実行できます。
確認ページで支払いの詳細を表示する
この時点で、確認ページの表示に必要な情報をすべて入手しています。サーバーを呼び出して必要な情報を取得し、それに応じて確認ページを表示します。
PaymentIntent を作成するサーバー側
支払い確定の直前にカスタムビジネスロジックを実行する
支払いの確定ガイドのステップ 5 に移動して、支払い確定の直前にカスタムのビジネスロジックを実行します。または、以下のステップに従って既存のシステムをシンプルにします。ここでは、クライアント側で stripe.
を使用して、支払いの確定と次のアクションの処理の両方を行います。
顧客が決済フォームを送信したときに、PaymentIntent を使用して確認と決済のプロセスを円滑にします。サーバーで、amount
と currency
を有効にして PaymentIntent を作成します。最新バージョンの API では、機能がデフォルトで有効になっているため、automatic_
パラメーターの指定が任意になりました。支払い方法はダッシュボードで管理できます。Stripe は取引額、通貨、決済フローなどの要素に基づいて、適切な支払い方法が返されるように処理します。悪意のある顧客が金額を恣意的に選択できないようにするために、支払い金額はクライアント側ではなく、常に信頼できる環境であるサーバー側で指定してください。
PaymentIntent には、client secret が含まれています。 この値をクライアントに返し、Stripe.js がこれを使用して支払いプロセスを安全に完了できるようにします。
Stripe に支払いを送信するクライアント側
stripe.confirmPayment を使用して、Payment Element の詳細を使って支払いを完了します。
前のページで作成した ConfirmationToken の ID を含む confirmation_
を指定します。この ID には、Payment Element から収集された支払い情報が含まれます。
この関数に return_url を指定して、支払い完了後に Stripe がユーザーをリダイレクトする場所を示します。ユーザーは、最初に銀行の認証ページなどの中間サイトにリダイレクトされてから、return_
にリダイレクトされる場合があります。カード支払いでは、支払いが成功するとすぐに return_
にリダイレクトされます。
支払い完了後にカード支払いのリダイレクトを行わない場合は、redirect を if_
に設定できます。これにより、リダイレクトベースの決済手段で購入した顧客のみがリダイレクトされます。
顧客に Stripe を開示する
Stripe は顧客の Elements とのやり取りに関する情報を収集して、サービスを提供し、不正利用を防止し、サービスを向上します。これには、Cookie と IP アドレスを使用して、1 つの決済フローセッションで顧客に表示する Elements を特定することが含まれます。Stripe がこのような方法でデータを使用するために必要なすべての権利と同意について開示し、これらを取得することはお客様の責任です。詳細については、プライバシーセンターをご覧ください。