将来の支払いを設定する

Checkout セッションで支払い情報を保存し、後で顧客に請求する方法をご紹介します。

顧客の支払い情報を収集して、今後の決済時に再利用できるようにするには、Checkout の設定モードを使用します。設定モードは、Setup Intents API を使用して PaymentMethod (支払い方法) を作成します。

Stripe を設定する
サーバー側

まず、Stripe アカウントが必要です。今すぐご登録ください。

アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。

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

サーバーで Checkout セッションを作成し、ui_mode を embedded に設定します。設定モードの Checkout セッションを作成するには、mode を setup に設定します。

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

戻り先ページの設定と、リダイレクト動作をカスタマイズするためのオプションについてご紹介します。

必要に応じて、customer パラメーターを指定して、作成した決済手段を既存の顧客に自動的に関連付けることが可能です。

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

決済手段

デフォルトでは、カードとその他の一般的な決済手段が有効になっています。Stripe ダッシュボードで個々の決済手段をオンまたはオフにできます。Checkout では、Stripe は通貨と制限事項を評価して、対応している決済手段を顧客に動的に提示します。

決済手段が顧客にどのように表示されるか確認するには、ダッシュボードで取引 ID を入力するか、または注文金額と通貨を設定します。

決済手段の設定では Apple Pay と Google Pay を有効にすることができます。デフォルトでは、Apple Pay は有効で、Google Pay は無効になっています。ただし、有効になっていても Stripe が除外する場合があります。配送先住所を収集せずに税金の自動計算を有効にした場合、Google Pay は除外されます。

Checkout の Stripe 上のオンラインページでは、Apple Pay や Google Pay を有効にするために実装内容を変更する必要はありません。Stripe は、これらの決済を他のカード決済と同じように処理します。

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 セッションを正常に完了した後に、お客様は Session オブジェクトを取得する必要があります。これは、以下の 2 つの方法で実行できます。

非同期: Session オブジェクトを含む checkout.session.completed Webhook を処理します。Webhook の設定の詳細をご覧ください。
同期: ユーザーがサイトにリダイレクトされるときに return_url からセッション ID を取得します。セッション ID を使用して、Session オブジェクトを取得します。

顧客が支払いの成功後に必ず return_url に到達するとは限らないため、ドロップオフの許容度に応じて適切な判断をする必要があります。リダイレクトが発生する前に顧客がブラウザータブを閉じることもあります。Webhook を処理することで、システムがこのようなドロップオフの影響を受けずに済みます。

Session オブジェクトの取得後、Checkout セッションの際に作成された SetupIntent の ID である setup_intent キーの値を入手します。SetupIntent は、今後の支払いに備えて顧客の銀行口座情報を設定するために使用されるオブジェクトです。

以下に checkout.session.completed ペイロードの例を示します。

{
  "id": "evt_1Ep24XHssDVaQm2PpwS19Yt0",
  "object": "event",
  "api_version": "2019-03-14",
  "created": 1561420781,
  "data": {
    "object": {
      "id": "cs_test_MlZAaTXUMHjWZ7DcXjusJnDU4MxPalbtL5eYrmS2GKxqscDtpJq8QM0k",
      "object": "checkout.session",
      "billing_address_collection": null,
      "client_reference_id": null,
      "customer": "",
      "customer_email": null,
      "display_items": [],
      "mode": "setup",
      "setup_intent": "seti_1EzVO3HssDVaQm2PJjXHmLlM",
      "submit_type": null,
      "subscription": null,
      "success_url": "https://example.com/success"
    }
  },
  "livemode": false,
  "pending_webhooks": 1,
  "request": {
    "id": null,
    "idempotency_key": null
  },
  "type": "checkout.session.completed"
}

次のステップに備えて setup_intent ID を書き留めておきます。

SetupIntent を取得する
サーバー側

SetupIntent ID を使用し、SetupIntent オブジェクトを取得します。返されるオブジェクトには、次のステップで顧客に関連付けることができる payment_method ID が含まれています。

注

この情報を (Webhook の処理とは異なり) Stripe API から同期的にリクエストする場合は、/v1/checkout/session エンドポイントに対するリクエスト内の SetupIntent オブジェクトを拡張することで、前のステップとこのステップを結合できます。このようにすることで、新しく作成された PaymentMethod ID にアクセスするためのネットワークリクエストを二重に作成する必要がなくなります。

後で決済手段に請求する
サーバー側

既存の顧客を指定して Checkout セッションを作成しなかった場合は、PaymentMethod の ID を使用して、PaymentMethod を Customer に関連付けます。PaymentMethod を顧客に関連付けた後、PaymentIntent を使用して、オフセッションの支払いを行うことができます。

customer を顧客の ID に、payment_method を PaymentMethod の ID に設定します。
off_session が true の場合、支払いの試行時に顧客が決済フローを実行中でなく、カード発行会社、銀行、その他の決済機関といった提携機関からの認証リクエストに対応できないことを示します。決済フロー中に提携機関から認証をリクエストされた場合、Stripe は以前のオンセッション取引の顧客情報を使用して免除をリクエストします。免除の条件が満たされていない場合、PaymentIntent はエラーを返す可能性があります。
PaymentIntent の confirm プロパティの値を true に設定します。これにより、PaymentIntent が作成されると直ちに確定が行われます。

支払いが失敗すると、リクエストも 402 HTTP ステータスコードで失敗し、PaymentIntent のステータスが requires_payment_method になります。アプリケーションに戻って支払いを完了するよう (メールやアプリ内通知を送信するなどして) 顧客に通知し、顧客を新しい Checkout セッションに誘導して別の決済手段を選択するよう促します。

注

将来の支払いを設定する

Checkout セッションで支払い情報を保存し、後で顧客に請求する方法をご紹介します。

Stripe を設定するサーバー側

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

決済手段

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