サーバーで支払いを確定する
PaymentIntent や SetupIntent を作成する前に Payment Element をレンダリングする実装を構築し、サーバーから Intent を確定します。
Payment Element を使用すると、一度の導入で複数の支払い方法を受け付けることができます。この実装では、Payment Element を表示し、PaymentIntent を作成して、サーバーから決済を確定する、カスタムの決済フローを構築します。
支払い方法を有効にする
注意
この導入パスは、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 を使用します。
ConfirmationToken を作成するクライアント側
レガシーの実装で createPaymentMethod を使用する
レガシーの実装を使用している場合は、サーバーで支払いを確定するために stripe.
の情報を使用することがあります。このガイドに従って Confirmation Tokens に移行することをお勧めしますが、以前のドキュメントを確認してサーバーで支払いを確定することもできます。
顧客が決済フォームを送信すると、stripe.createConfirmationToken が呼び出され ConfirmationToken を作成し、決済の確定前に追加の検証ロジックまたはビジネスロジックをサーバーに送信します。
PaymentIntent を確定すると PaymentMethod が生成されます。PaymentIntent 確認レスポンスから payment_method ID を表示できます。
注意
作成された ConfirmationToken をすぐに使用して、PaymentIntent を確定する必要があります。使用しなかった場合は、12 時間後に期限切れになります。
決済を作成して Stripe に送信するサーバー側
顧客が決済フォームを送信したときに、PaymentIntent を使用して確認と決済のプロセスを円滑にします。サーバーで、amount
と currency
を指定して PaymentIntent を作成します。最新バージョンの API では、機能がデフォルトで有効になっているため、automatic_
パラメーターの指定が任意になりました。支払い方法はダッシュボードで管理できます。Stripe は取引額、通貨、決済フローなどの要素に基づいて、適切な支払い方法が返されるように処理します。悪意のある顧客が金額を恣意的に選択できないようにするために、支払い金額はクライアント側ではなく、常に信頼できる環境であるサーバー側で指定してください。
クライアントから送信された ConfirmationToken を使用すると、1 件のリクエストで PaymentIntent を作成して確定できます。
const stripe = require("stripe")(
); const express = require('express'); const app = express(); app.set('trust proxy', true); app.use(express.json()); app.use(express.static(".")); app.post('/create-confirm-intent', async (req, res) => { try { const intent = await stripe.paymentIntents.create({ confirm: true, amount: 1099, currency: 'usd', // In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, confirmation_token: req.body.confirmationTokenId, // the ConfirmationToken ID sent by your client }); res.json({ client_secret: intent.client_secret, status: intent.status }); } catch (err) { res.json({ error: err }) } }); app.listen(3000, () => { console.log('Running on port 3000'); });"sk_test_BQokikJOvBiI2HlWgH4olfQ2"
次のアクションを処理するクライアント側
3D セキュアによる認証や別のサイトへのリダイレクトなど、PaymentIntent で顧客による追加アクションが必要になる場合は、そのアクションを起動する必要があります。stripe.
を使用して、顧客のアクションを処理して支払いを完了するための UI をトリガーします。