インテントを作成する前に支払いの詳細を収集する
PaymentIntent または SetupIntent を作成する前に Payment Element をレンダリングできるシステムを構築します。
設定フローを使用すると、顧客にすぐに請求を行わずに、今後の決済に備えて支払い方法を設定することができます。この実装では、Payment Element を表示し、SetupIntent を作成して、買い手のブラウザーから設定を確定する、カスタムの決済フローを構築します。
支払い方法を有効にする![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
注意
この導入パスは、Automated Clearing Settlement System (ACSS) を使用する BLIK またはプレオーソリデビットに対応していません。
支払い方法の設定を表示して、サポートする支払い方法を有効にします。SetupIntent を作成するには、少なくとも 1 つは支払い方法を有効にする必要があります。
Stripe のデフォルトでは、カード支払いとより多くの顧客にアプローチできるその他の一般的な決済手段が導入されていますが、ビジネスと顧客に適した追加の決済手段を有効にすることをお勧めします。製品と決済手段のサポートについては、決済手段の導入オプションを、手数料については料金体系ページをご覧ください。
支払いの詳細を収集するクライアント側![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Payment Element を使用してクライアントで支払い詳細を収集する準備ができました。Payment Element は事前構築された UI コンポーネントであり、多様な支払い方法の支払い詳細の収集を容易にします。
Payment Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。一部の支払い方法では、支払いを確定するために別のページにリダイレクトする必要があるため、Payment Element を別の iframe 内に配置しないでください。
構築済みのシステムを機能させるには、決済ページのアドレスの先頭を http://
ではなく https://
にする必要があります。HTTPS を使用しなくてもシステムをテストできますが、本番環境で決済を受け付ける準備が整ったら、必ず、HTTPS を有効にしてください。
Payment Element によって動的なフォームが表示され、顧客はここで支払い方法を選択できます。このフォームでは、顧客が選択した支払い方法で必要な決済の詳細のすべてが自動的に収集されます。
Elements
プロバイダーを作成する際に Appearance (デザイン) オブジェクト を options
に渡すことで、サイトのデザインに合わせて Payment Element をカスタマイズできます。
住所を収集![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
デフォルトでは、Payment Element は必要な請求先住所情報のみを収集します。(たとえば、デジタル商品およびサービスの税金を計算するなどの目的で) 顧客の詳細な請求先住所または配送先住所を収集するには、Address Element を使用します。
Customer を作成するサーバー側![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
将来の支払いに備えて支払い方法を設定するには、その手段を Customer (顧客) に関連付ける必要があります。顧客がビジネスでアカウントを作成する際に、Customer
オブジェクトを作成します。Customer
オブジェクトを使用すると、支払い方法を再利用したり、複数の支払いを追跡したりできます。
SetupIntent を作成するサーバー側![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
顧客が決済フォームを送信したときに、SetupIntent をサーバー側で作成します。automatic_
を有効にすると、ダッシュボードで設定した支払い方法を使用して SetupIntent が作成されます。
SetupIntent には client secret が含まれます。この値をクライアントに返し、Stripe.js がこれを使用して設定プロセスを安全に完了できるようにします。
Stripe に設定を送信するクライアント側![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
stripe.confirmSetup を使用し、Payment Element からの詳細を使って設定を完了します。
設定の完了後に Stripe がユーザーをリダイレクトする場所を指定するには、この関数に return_url を指定します。まず、ユーザーを銀行のオーソリページなどの中間サイトにリダイレクトしてから、return_
にリダイレクトすることができます。カード設定では、設定が正常に完了するとすぐに return_
にリダイレクトします。
カード設定で設定の完了後にリダイレクトを行わない場合は、redirect に if_
を設定できます。これで、リダイレクトベースの支払い方法で購入する顧客のみがリダイレクトされます。
保存された支払い方法に後で請求するサーバー側![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
警告
bancontact
と ideal
は、デフォルトでは 1 回限りの支払い方法です。以降も使用できるように設定すると、再利用可能な支払い方法タイプ sepa_
が生成されます。このため、保存された支払い方法を照会するには sepa_
を使用する必要があります。
法令遵守
顧客の支払いの詳細を保存する際、お客様は適用されるすべての法律、規制、ネットワークの規則に準拠する責任があります。将来の購入に備えて顧客に過去の決済手段を提供する際は、必ず、特定の将来の使用に備えて決済手段の詳細を保存することについての同意を顧客から収集した決済手段をリストアップします。顧客に関連付けられた決済手段のうち、将来の購入用の保存済みの決済手段として顧客に提示できるものと提示できないものを区別するには、allow_redisplay パラメーターを使用します。
購入者にオフセッションで請求する準備ができたら、Customer ID と PaymentMethod ID を使用して、PaymentIntent を作成します。請求する決済手段を見つけるには、顧客に関連付けられた決済手段を一覧表示します。この例ではカードが一覧表示されますが、サポートされているすべてのタイプを一覧表示できます。
Customer ID と PaymentMethod ID を取得したら、支払いの金額と通貨を使用して PaymentIntent を作成します。その他のいくつかのパラメーターを設定して、オフセッションの支払いを行います。
- off_session を
true
に設定して、支払いの試行時に購入者が決済フローを実行中でないことと、カード発行会社、銀行、その他の決済機関などのパートナーからの認証リクエストに対応できないことを示します。決済フローの実行時にパートナーが認証をリクエストした場合、Stripe は前回のオンセッション取引の顧客情報を使用して免除をリクエストします。免除の条件を満していない場合は PaymentIntent からエラーが返されることがあります。 - PaymentIntent の confirm プロパティの値を
true
に設定します。これにより、PaymentIntent が作成されると直ちに確定されます。 - payment_method を PaymentMethod の ID に設定し、customer を Customer の ID に設定します。
支払いが失敗すると、リクエストも 402 HTTP ステータスコードで失敗し、PaymentIntent のステータスが requires_payment_method になります。アプリケーションに戻って支払いを完了するよう (メールやアプリ内通知を送信するなどして) 顧客に通知する必要があります。
Stripe API ライブラリから発生したエラーのコードを確認します。支払いが authentication_required 拒否コードで失敗した場合には、拒否された PaymentIntent の client secret を confirmPayment とともに使用し、顧客が支払いを認証できるようにします。
const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ // The client secret of the PaymentIntent clientSecret, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } });
注
stripe.
の完了には数秒かかる場合があります。この間、フォームが再送信されないように無効化し、スピナーのような待機中のインジケーターを表示します。エラーが発生した場合は、それを顧客に表示し、フォームを再度有効化し、待機中のインジケーターを非表示にします。支払いの完了のために顧客による認証などの追加の手順が必要な場合は、Stripe.js がそのプロセスをステップごとに顧客に提示します。
利用可能額不足など、他の理由で支払いが失敗した場合、新しい支払い方法を入力する支払いページを顧客に送信します。既存の PaymentIntent を再利用し、新しい支払いの詳細を利用して支払いを再試行できます。