既存の顧客の支払い

顧客がオンセッションの間に既存の決済手段に請求する方法をご紹介します。

Checkout セッションでは、買い手が各自の支払いの詳細を入力できます。買い手が既存の顧客の場合、Checkout セッションを設定して、顧客の保存済みのカードのいずれかを使って詳細に事前入力可能です。

Checkout セッションを作成
サーバー側

Checkout は、customer パラメーターを指定した既存の Customer オブジェクトの再利用をサポートします。既存の顧客を再利用すると、Payment Intents や Subscriptions など、Checkout によって作成されたすべてのオブジェクトがその Customer オブジェクトに関連付けられます。

サーバーから Checkout セッションを作成し、ui_mode を embedded に設定します。

return_url パラメーターに、ウェブサイトでホストするカスタムページの URL を指定して、そのカスタムページに顧客を戻すようにします。URL に {CHECKOUT_SESSION_ID} テンプレート変数を含めて、戻り先ページでセッションのステータスを取得します。Checkout はこの変数を Checkout セッション ID に自動的に置き換えてからリダイレクトします。

戻り先ページの設定と、リダイレクト動作をカスタマイズするその他のオプションの詳細をご確認ください。

Checkout セッションの作成後、レスポンスで返される client_secret を使用して、Checkout をマウントします。

オプション追加の保存された支払い方法を表示する
サーバー側

Checkout をマウントする
クライアント側

Checkout は Stripe.js の一部として利用できます。HTML ファイルのヘッダーに Stripe.js スクリプトを追加してページに含めます。次に、マウンティングに使用する空の DOM ノード (コンテナー) を作成します。

index.html
<head>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>
<body>
  <div id="checkout">
    <!-- Checkout will insert the payment form here -->
  </div>
</body>

公開可能な API キーで Stripe.js を初期化します。

Checkout セッションの作成、および client secret の取得をサーバーにリクエストする、非同期の fetchClientSecret 関数を作成します。 Checkout インスタンスを作成する際に、この関数を options に渡します。

index.js
// Initialize Stripe.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

initialize();

// Fetch Checkout Session and retrieve the client secret
async function initialize() {
  const fetchClientSecret = async () => {
    const response = await fetch("/create-checkout-session", {
      method: "POST",
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };

  // Initialize Checkout
  const checkout = await stripe.initEmbeddedCheckout({
    fetchClientSecret,
  });

  // Mount Checkout
  checkout.mount('#checkout');
}

Checkout は、HTTPS 接続を介して支払い情報をStripeに安全に送信する iframe でレンダリングされます。

よくある間違い

一部の支払い方法では、別のページにリダイレクトして支払いを確定する必要があるため、Checkout は別の iframe 内に配置しないでください。

デザインをカスタマイズする

アカウントのブランディング設定で、背景色、ボタンの色、枠線の角丸半径、フォントを設定して、サイトのデザインに合わせて Checkout をカスタマイズします。

デフォルトでは、Checkout は外側に余白やマージンが追加されずに表示されます。必要なマージンを適用するには (四方すべてに 16px など)、目的の余白を適用するコンテナー要素 (div など) を使用することをお勧めします。

支払いページのフィールドを事前入力

以下のすべての条件を満たしている場合、顧客が保存しているカード情報を基に、Checkout の決済ページのメールアドレス、名前、カード、請求先住所フィールドが事前入力されます。

Checkout が payment モードまたは subscription モードで使用されている (setup モードではフィールドの事前入力はサポートされていません)。
顧客がカードを保存している。カードの決済手段の事前入力のみ Checkout でサポートされている。
保存されているカードの allow_redisplay が always に設定されているか、デフォルトの表示設定が調整されている。
決済手段に、Checkout セッションの billing_address_collection 値に必要な billing_details が含まれている。
- auto の場合、email、name、address[country] フィールドに値が必要です。アメリカ、カナダ、イギリスの請求先住所にも address[postal_code] が必要です。
- required の場合、email、name、address フィールドに値が必要です。

顧客が複数のカードを保存している場合、Checkout では以下の優先順位に従ってカード情報が事前入力されます。

payment モードでは、顧客が前回保存したカードがフィールドに事前入力されます。
subscription モードでは、顧客のデフォルトの決済手段がカードである場合に事前入力が行われます。それ以外の場合、Stripe は前回保存されたカードを事前入力します。

Checkout は配送先住所を収集する際に、顧客の shipping.address が Checkout セッションで対応している国と一致しているなら、配送先住所フィールドに事前入力します。

事前入力のタイムアウト

事前入力された決済手段は、Checkout セッションの作成後 30 分間表示されます。有効期限が切れると、セキュリティ上の理由から、同じ Checkout セッションを読み込んでも決済手段が事前入力されなくなります。

支払い後のイベントを処理
サーバー側

顧客が 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 など、遅延型の決済手段による支払いが失敗した場合に送信されます。	顧客に失敗を通知して、顧客をオンセッションに戻し、支払いを再試行できるようにします。

注