既存の顧客の支払い

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

決済セッションでは、買い手が各自の決済の詳細を入力できます。買い手が既存の顧客の場合、決済セッションを設定して、顧客の保存済みカードのいずれかを使って詳細に事前入力できます。決済セッションには、顧客が決済に使用できる最大 50 枚の保存済みカードが表示されます。

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

Checkout supports reusing existing Customer objects with the customer parameter. When reusing existing customers, all objects created by Checkout, such as PaymentIntents and Subscriptions, are associated with that Customer object.

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

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

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

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

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

法令遵守

顧客の支払い情報を保存する際には、適用されるすべての法律、規制、ネットワークルールを遵守する責任を貴社が負うものとします。将来の購入時に過去の決済手段を顧客に表示する場合は、将来の購入に再利用するために決済手段の詳細を保存することの同意をあらかじめ得るようにしてください。

デフォルトでは、常に再表示を許可に設定された決済手段のみが表示されます。以前に保存された他の決済手段を表示するには、Checkout セッションで他の再表示値を指定するか、決済手段の allow_redisplay 設定を always に更新します。

allow_redisplay_filters パラメーターを使用して、Checkout に表示する保存済みの決済手段を指定します。パラメーターには、いずれかの有効な値 (limited、unspecified、always) を設定できます。

Checkout セッションで再表示フィルタリングを指定するとデフォルトの動作が上書きされるため、保存済みの決済手段を表示する場合は always 値を含める必要があります。

決済手段を更新して、各決済手段に allow_redisplay 値を設定します。
Command Line
言語を選択
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_methods/{{PAYMENT_METHOD_ID}} \ -u "sk_test_BQokikJOvBiI2HlWgH4olfQ2 :" \ -d allow_redisplay=always

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 が 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 フィールドに値が必要です。

顧客に複数のカードが保存されている場合、決済では、以下の優先順位に一致するクレジットカードの詳細が事前入力されます。

決済モードでは、Stripe は顧客の最新の保存されたクレジットカードを使用してフィールドに事前入力します。
subscription モードでは、顧客のデフォルトの支払い方法(クレジットカードの場合) が Stripe によって事前入力されます。それ以外の場合、Stripe は最後に保存されたクレジットカードを事前入力します。

チェックアウトが配送先住所を収集するしている場合、顧客の shipping.address がチェックアウトセッションのサポート対象国を満たしていれば、チェックアウトは配送先住所フィールドを事前入力します。

決済セッション中に顧客が保存したカードを削除できるようにするには、save_payment_method_options[payment_method_remove] を enabled に設定します。

事前入力のタイムアウト

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

注