既存の顧客の支払い

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

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/v3/"></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 など) を使用することをお勧めします。

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

If all the following conditions are true, Checkout prefills the email, name, card, and billing address fields on the payment page using details from the customer’s saved card:

Checkout is in payment or subscription mode; setup mode doesn’t support prefilling fields.
The customer has a saved card. Checkout only supports prefilling card payment methods.
The saved card has allow_redisplay set to always or you adjusted the default display setting.
The payment method includes billing_details required by the Checkout Session’s billing_address_collection value:
- auto requires values for email, name, and address[country]. US, CA, and GB billing addresses also require address[postal_code].
- required requires values for email, name, and all address fields.

If your customer has multiple saved cards, Checkout prefills details from the card matching the following prioritization:

In payment mode, Stripe prefills the fields using the customer’s the newest saved card.
In subscription mode, Stripe prefills the customer’s default payment method if it’s a card. Otherwise Stripe prefills the newest saved card.

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

Prefill timeout

The prefilled payment method displays for 30 minutes following Checkout Session creation. After it expires, loading the same Checkout Session doesn’t prefill the payment method anymore for security reasons.

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

Stripe sends a checkout.session.completed event when a customer completes a Checkout Session payment. Use the Dashboard webhook tool or follow the webhook guide to receive and handle these events, which might trigger you to:

Send an order confirmation email to your customer.
Log the sale in a database.
Start a shipping workflow.

Listen for these events rather than waiting for your customer to be redirected back to your website. Triggering fulfillment only from your Checkout landing page is unreliable. Setting up your integration to listen for asynchronous events allows you to accept different types of payment methods with a single integration.

Learn more in our fulfillment guide for Checkout.

Handle the following events when collecting payments with the Checkout:

Event	説明	Action
checkout.session.completed	Sent when a customer successfully completes a Checkout Session.	Send the customer an order confirmation and fulfill their order.
checkout.session.async_payment_succeeded	Sent when a payment made with a delayed payment method, such as ACH direct debt, succeeds.	Send the customer an order confirmation and fulfill their order.
checkout.session.async_payment_failed	Sent when a payment made with a delayed payment method, such as ACH direct debt, fails.	Notify the customer of the failure and bring them back on-session to attempt payment again.

注