インテントを作成する前に支払いの詳細を収集する
Payment Element を使用すると、1 つの実装で複数の決済手段を受け付けることができます。この実装で、Payment Element を表示し、PaymentIntent を作成して、買い手のブラウザーから支払いを確定するカスタムの決済フローを構築する方法をご紹介します。買い手のブラウザーではなくサーバーから支払いを確定する場合は、サーバーで支払いを確定するをご覧ください。
決済手段を有効にする
注意
現在、この導入パスでは 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 を使用します。
PaymentIntent を作成するサーバー側
支払い確定の直前にカスタムビジネスロジックを実行する
支払いの確定ガイドのステップ 5 に移動して、支払い確定の直前にカスタムのビジネスロジックを実行します。または、以下のステップに従って既存のシステムをシンプルにします。ここでは、クライアント側で stripe.confirmPayment
を使用して、支払いの確定と次のアクションの処理の両方を行います。
顧客が決済フォームを送信したときに、PaymentIntent を使用して確認と決済のプロセスを円滑にします。サーバーで、amount
と currency
を有効にして PaymentIntent を作成します。最新バージョンの API では、機能がデフォルトで有効になっているため、automatic_payment_methods
パラメーターの指定が任意になりました。決済手段はダッシュボードで管理できます。Stripe は取引額、通貨、決済フローなどの要素に基づいて、適切な決済手段が返されるように処理します。悪意のある顧客が金額を恣意的に選択できないようにするために、支払い金額はクライアント側ではなく、常に信頼できる環境であるサーバー側で指定してください。
PaymentIntent には、client secret が含まれています。 この値をクライアントに返し、Stripe.js がこれを使用して支払いプロセスを安全に完了できるようにします。
Stripe に支払いを送信するクライアント側
stripe.confirmPayment を使用し、Payment Element からの詳細を使って支払いを完了します。
支払いの完了後に Stripe がユーザーをリダイレクトする場所を指定するには、この関数に return_url を指定します。まず、ユーザーを銀行のオーソリページなどの中間サイトにリダイレクトしてから、return_url
にリダイレクトすることができます。カード支払いでは、支払いが正常に完了するとすぐに return_url
にリダイレクトします。
カード決済で支払いの完了後にリダイレクトを行わない場合は、redirect に if_required
を設定できます。これで、リダイレクトベースの決済手段で購入する顧客のみがリダイレクトされます。