支払いを受け付ける
オンライン支払いを安全に受け付けます。
支払いフォームを作成するか、構築済みの決済ページを使用して、オンライン決済の受け付けを開始します。
Stripe Checkout を使用して、事前構築した決済フォームをサイトに埋め込みます。この実装と、Stripe の他の実装タイプとの比較をご覧ください。


Stripe ダッシュボードのブランディング設定を使用して、Checkout を自社サイトのデザインに合わせることができます。
First, register for a Stripe account.
Use our official libraries to access the Stripe API from your application:
Checkout セッションを作成するサーバー側
サーバーで Checkout セッションを作成し、ui_mode を embedded
に設定します。Checkout セッションを設定する際、line items に加え、currency などのオプションを指定できます。
既存の顧客の Checkout セッションを作成することもできます。これにより、Checkout フィールドに既知の連絡先情報を事前入力して、その顧客の購入履歴を統合することができます。
自社サイトでホストされているカスタムページに顧客を戻すには、そのページの URL を return_url パラメーターに指定します。URL にテンプレート変数 {CHECKOUT_
を含めて、戻り先ページでセッションのステータスを取得します。Checkout では、リダイレクト前にこの変数が Checkout セッション ID に自動的に置き換えられます。
戻り先ページの設定と、リダイレクト動作をカスタマイズするためのオプションについてご紹介します。
Checkout セッションの作成後、レスポンスで返される client_
を使用して、Checkout をマウントします。
Checkout をマウントするクライアント側
Checkout は、HTTPS 接続を介して支払い情報をStripeに安全に送信する iframe でレンダリングされます。
よくある間違い
一部の支払い方法では、別のページにリダイレクトして支払いを確定する必要があるため、Checkout は別の iframe 内に配置しないでください。
デザインをカスタマイズする
アカウントのブランディング設定で、背景色、ボタンの色、枠線の角丸半径、フォントを設定して、サイトのデザインに合わせて Checkout をカスタマイズします。
デフォルトでは、Checkout は外側に余白やマージンが追加されずに表示されます。必要なマージンを適用するには (四方すべてに 16px など)、目的の余白を適用するコンテナー要素 (div など) を使用することをお勧めします。
戻り先ページを表示する
顧客が支払いを試行すると、Stripe はサイトがホストしている戻りページに顧客をリダイレクトします。Checkout セッションを作成したときに、return_url パラメーターで戻りページの URL は指定されています。リダイレクト動作をカスタマイズするためのオプションについては、こちらの記事をご覧ください。
戻り先ページを表示する際は、URL の Checkout セッション ID を使用して Checkout セッションのステータスを取得します。以下のように、セッションのステータスに応じて結果を処理します。
complete
: 支払いが成功しました。Checkout セッションの情報を使用して成功ページを表示します。open
: 支払いが失敗またはキャンセルされました。顧客がやり直せるように Checkout を再度マウントします。
const session = await fetch(`/session_status?session_id=${session_id}`) if (session.status == 'open') { // Remount embedded Checkout } else if (session.status == 'complete') { // Show success page // Optionally use session.payment_status or session.customer_email // to customize the success page }
リダイレクトベースの支払い方法
決済の進行中、支払い方法によっては、発行会社/銀行のオーソリページなどの中間ページに顧客がリダイレクトされる場合があります。そのページでの操作を完了した顧客は、Stripe によって戻り先ページにリダイレクトされます。
リダイレクトベースの決済手段とリダイレクト動作についてご紹介します。
支払い後のイベントを処理する
顧客が Checkout セッションの支払いを完了すると、Stripe は checkout.session.completed イベントを送信します。ダッシュボードの Webhook ツールを使用するか、Webhook ガイドに従ってこれらのイベントを受信して処理します。これにより、次のアクションがトリガーされます。
- 顧客に注文確認メールを送信します。
- 取引をデータベースに記録します。
- 配送ワークフローを開始します。
顧客がリダイレクトされ、ウェブサイトに戻るのを待たずに、これらのイベントはリッスンできます。Checkout のランディングページからのみフルフィルメントをトリガーする場合、確実性に欠けます。非同期型のイベントをリッスンするようシステムを設定すると、1 回の実装で異なるタイプの決済手段を受け付けられるようになります。
詳しくは、Checkout のフルフィルメントガイドをご覧ください。
Checkout で支払いを回収する際には、以下のイベントを処理します。
イベント | 説明 | アクション |
---|---|---|
checkout.session.completed | 顧客が Checkout セッションを正常に完了すると送信されます。 | 注文確認書を顧客に送信し、注文のフルフィルメントを実行します。 |
checkout.session.async_payment_succeeded | ACH Direct Debt など、遅延型の決済手段による支払いが成功した場合に送信されます。 | 注文確認書を顧客に送信し、注文のフルフィルメントを実行します。 |
checkout.session.async_payment_failed | ACH Direct Debt など、遅延型の決済手段による支払いが失敗した場合に送信されます。 | 顧客に失敗を通知して、顧客をオンセッションに戻し、支払いを再試行できるようにします。 |
導入をテストする
埋め込みの決済フォームの導入をテストするには、以下の手順を使用します。
- 埋め込み型の Checkout セッションを作成して、Checkout を自社のページにマウントします。
- 以下の表の方法を使用して、支払い詳細を入力します。
- カードの有効期限として任意の将来の日付を入力します。
- 任意の 3 桁のセキュリティコードを入力します。
- 請求先の任意の郵便番号を入力します。
- 支払うをクリックします。指定した
return_
にリダイレクトされます。url - ダッシュボードに移動し、取引ページで決済を探します。決済が成功していると、そのリストに表示されます。
- 支払いをクリックすると詳細が表示され、請求先情報と購入されたアイテムのリストが含まれた Checkout サマリーなどを確認できます。これを使用して注文のフルフィルメントを実行できます。
詳細は、実装のテストをご覧ください。
実装内容をテストするためのその他の情報については、テストをご覧ください。