支払い中に支払い詳細を保存する

支払いを受け付け、将来の購入に備えて顧客の支払い詳細を保存する方法をご紹介します。

Stripe Checkout を使用すると、構築済みの決済フォームをウェブサイトに埋め込み、顧客が詳細の購入に備えて支払いの詳細を保存できるようにすることができます。

Stripe を設定する
サーバー側

まず、Stripe アカウントを登録します。

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

顧客を作成する
サーバー側

将来の支払いに備えてカードを設定するには、カードを Customer (顧客) に関連付ける必要があります。顧客がビジネスでアカウントを作成する際に、Customer オブジェクトを作成します。Customer オブジェクトを使用すると、支払い方法を再利用したり、複数の支払いを追跡したりできます。

作成に成功すると、Customer オブジェクトが返されます。オブジェクトで顧客の id を調べて、その値を後で取得できるようにデータベースに保存できます。

これらの顧客は、ダッシュボードの顧客ページで見つけることができます。

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

サーバーで Checkout セッションを作成し、ui_mode を embedded に設定します。Checkout セッションを設定する際、line items に加え、currency などのオプションを指定できます。

既存の顧客の Checkout セッションを作成することもできます。これにより、Checkout フィールドに既知の連絡先情報を事前入力して、その顧客の購入履歴を統合することができます。

自社サイトでホストされているカスタムページに顧客を戻すには、そのページの URL を return_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 で 1 回限りの支払いに使用した支払い方法を将来の支払いに使用することはできません。

支払い方法を保存し、オフセッションでその支払い方法に請求する

payment_intent_data.setup_future_usage 引数を渡すことで、1 回限りの支払いに使用した支払い方法を保存するように Checkout を設定できます。これは、キャンセル手数料やノーショー手数料などの将来の手数料に使用するために、登録済みの決済手段を取得しなければならない場合に便利です。

subscription モードで Checkout を使用すると、Stripe は決済手段を自動的に保存し、次回以降の支払いにはその決済手段で請求されます。setup_future_usage または subscription のいずれかのモードを使用している顧客用に保存されたカード決済手段は、Checkout の返品購入には表示されません (詳細については以下をご覧ください)。カスタムテキストを使用して、保存された決済情報の使用に関連する規約にリンクすることをお勧めします。

注意

世界の個人情報保護法は複雑かつ曖昧です。setup_future_usage の実装は既存の個人情報の規制に関わる可能性があるため、事前に法務チームや個人情報担当チームに問い合わせることをお勧めします。支払いの詳細を保存することについては、欧州データ保護委員会から発行されたガイダンスをご覧ください。

支払い方法を保存し、Checkout でその支払い方法を事前入力する

デフォルトでは、Checkout は Link を使用して、決済情報を安全に保存し、再利用するためのオプションを顧客に提供します。自分で決済手段を管理する場合は、Checkout セッションを作成する際に saved_payment_method_options.payment_method_save を使用して、Checkout での将来の購入に備えて顧客が支払い方法を保存できるようにします。

このパラメーターを payment モードまたは subscription モードで渡すと、今後の購入に備えて顧客が支払い方法を明示的に保存できるようにするためのオプションのチェックボックスが表示されます。顧客がこのチェックボックスをオンにすると、Checkout は allow_redisplay: always を指定して支払い方法を保存します。Checkout はこのパラメーターを使用して、今後の購入で支払い方法を事前入力できるかどうかを判断します。saved_payment_method_options.payment_method_save を使用する場合、支払い方法を保存するために setup_future_usage を渡す必要はありません。

saved_payment_method_options.payment_method_save を使用するには Customer が必要です。新しい顧客を保存するには、Checkout セッションの customer_creation を always に設定します。それ以外の場合、セッションで顧客や決済手段は保存されません。

payment_method_save が渡されていない場合、または顧客が支払い方法の保存に同意しない場合でも、Checkout は、subscription モードで作成された支払い方法または setup_future_usage を使用して作成された支払い方法を保存します。これらの決済手段の allow_redisplay 値は limited であるため、購入の返品に備えてこれらの決済手段が事前入力されることがなくなり、カードネットワークの規則およびデータ保護規制に準拠できます。これらのモードによって有効になるデフォルトの動作を変更する方法と、allow_redisplay の動作を変更または上書きする方法をご紹介します。

注

Checkout を使用してカードやその他の決済手段を保存してオフセッションに請求することはできますが、Checkout では保存したカードのみが事前入力されます。保存したカード情報を事前入力する方法をご紹介します。初回の支払いなしで決済手段を保存するには、Checkout の設定モードを使用します。

注

支払い中に支払い詳細を保存する

支払いを受け付け、将来の購入に備えて顧客の支払い詳細を保存する方法をご紹介します。

Stripe を設定するサーバー側

顧客を作成するサーバー側

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

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