顧客が支払いに使用した、その決済手段を保存する

顧客の決済時に、将来の購入に備えて顧客の決済詳細を保存する方法をご紹介します。

Checkout Sessions API を使用して、購入時の決済詳細を保存します。これは、次のような場合に便利です。

顧客にコマース注文の請求を行い、以降の購入に備えて決済情報を保存します。
継続課金の初回の支払いを開始します。
後で全額を決済するために、デポジットを請求し、決済詳細を保存する。

法令遵守

顧客の決済情報を将来の利用に備えて保存する際（将来の購入に向けた決済フローでの決済手段の表示、または顧客がウェブサイトやアプリを積極的に使用していないときの請求など）は、適用されるすべての法令、規制、ネットワーク規則を遵守する責任があります。顧客の決済手段を保存または請求する前に、以下を確認してください。

決済手段の詳細を保存する方法を示す、次のような規約をウェブサイトまたはアプリに追加します。
- 指定された取引において顧客に代わって決済または一連の決済を開始することに対する顧客の同意。
- 予期される決済時期と決済頻度 (たとえば、請求が予定されている分割払いなのか、サブスクリプションの決済なのか、あるいは予定されていないトップアップなのか)。
- 決済金額の決定方法。
- 決済手段をサブスクリプションサービスに使用する場合は、キャンセルに関するポリシー。
規約に記載されている目的にのみ、保存された決済手段を使用してください。
この特定の使用について顧客から明示的な同意を取得します。たとえば、「将来の使用に備えて決済手段を保存する」チェックボックスを含めます。
顧客の規約への書面による同意を記録します。

メモ

Checkout Sessions API で Elements を使用する場合、保存された決済手段はカードのみがサポートされます。銀行口座など、他の決済手段は保存できません。

前提条件

決済ガイドに従って決済を受け付けます。
このガイドに従って、決済中に使用された決済手段を保存し、同じ顧客による今後の決済で使用できるようにします。

保存済みの決済手段を有効にする

注意

世界のプライバシー法は複雑で、分かりにくいものです。顧客の決済手段の詳細を保存する機能を実装する前に、法務チームと協力して、プライバシーと法令遵守のフレームワークに準拠していることを確認しましょう。

顧客が将来の使用に備えて決済手段を保存できるようにするには、Checkout Session の作成時に saved_payment_method_options.payment_method_save パラメーターを指定します。

決済手段を保存するには Customer が必要です。既存の顧客を渡すか、customer_creation を Checkout Session で always に設定して新しい顧客を作成します。

Checkout Session の作成後、レスポンスで返される client secret を使用して、決済ページを構築します。

メモ

最新バージョンの Stripe.js では、Checkout Session で保存済みの決済手段が有効になっている場合、enableSave を auto に指定することはオプションです。これはデフォルト値であるためです。

Checkout Session で決済手段の保存が有効になっている場合、Payment Element は自動的に同意収集チェックボックスを表示します。この動作は、initCheckout で elementsOptions を使用して明示的に設定できます。

checkout.js
const checkout = stripe.initCheckout({
  clientSecret,
  elementsOptions: {
    savedPaymentMethod: {
      // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
      enableSave: 'auto',
    }
  }
});

以前に保存した決済手段を再利用する

保存済みの各決済手段は、Customer オブジェクトにリンクされます。決済セッションを作成する前に、顧客を認証し、対応する Customer ID を決済セッションに渡します。

メモ

最新バージョンの Stripe.js では、Checkout Session で保存済みの決済手段が有効になっている場合、enableRedisplay のデフォルトは auto です。

Checkout Session で決済手段の保存が有効になっている場合、Payment Element は顧客が決済時に使用できるよう、以前に保存された決済手段を自動的に再表示します。

initCheckout で elementsOptions を使用して、再表示の動作を明示的に設定できます。

checkout.js
const checkout = stripe.initCheckout({
  clientSecret,
  elementsOptions: {
    savedPaymentMethod: {
      // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
      enableSave: 'auto',
      // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
      enableRedisplay: 'auto',
    }
  }
});

オプション保存済みの決済手段 UI を構築する

Payment Element の組み込み UI を使用する代わりに、独自の保存決済手段 UI を構築できます。

Payment Element が同意収集を処理し、以前に保存した決済手段が表示されないようにするには、initCheckout で追加の elementsOptions を渡します。

checkout.js
const checkout = stripe.initCheckout({
  clientSecret,
  elementsOptions: {
    savedPaymentMethod: {
      enableSave: 'never',
      enableRedisplay: 'never',
    }
  }
});

注意

ほとんどの場合、決済手段の詳細を保存する前に顧客の同意を収集する必要があります。以下は、チェックボックスを使用して同意を取得する方法の例です。

index.html
<label>
  <input type="checkbox" id="save-payment-method-checkbox" />
  Save my payment information for future purchases
</label>
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>

confirm を呼び出す際に、savePaymentMethod パラメーターを渡して、顧客が同意したかどうかを Stripe に示します。顧客の決済の詳細を保存する場合、適用されるすべての法律、規制、ネットワークの規則に準拠する責任があります。

checkout.js
const checkout = stripe.initCheckout({clientSecret});
const button = document.getElementById('pay-button');
const errors = document.getElementById('confirm-errors');
const checkbox = document.getElementById('save-payment-method-checkbox');
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    const savePaymentMethod = checkbox.checked;
    actions.confirm({savePaymentMethod}).then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}

保存された決済手段を表示する

フロントエンドで savedPaymentMethods 配列を使用して、顧客の利用可能な決済手段を表示します。

メモ

savedPaymentMethods 配列には、allow_redisplay が always に設定された決済手段のみが含まれます。顧客から同意を収集する手順に従い、allow_redisplay パラメーターを正しく設定してください。

index.html
<div id="saved-payment-methods"></div>

checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const container = document.getElementById('saved-payment-methods');
  const {actions} = loadActionsResult;
  actions.getSession().savedPaymentMethods.forEach((pm) => {
    const label = document.createElement('label');
    const radio = document.createElement('input');

    radio.type = 'radio';
    radio.value = pm.id;

    label.appendChild(radio);
    label.appendChild(document.createTextNode(`Card ending in ${pm.card.last4}`));
    container.appendChild(label);
  });
}

保存された決済手段で確定する

顧客が保存済みの決済手段を選択し、決済を実行する準備ができたら、confirm を呼び出して paymentMethod ID を渡します。

index.html
<button id="pay-button">Pay</button>

checkout.js
const checkout = stripe.initCheckout({clientSecret});

const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const container = document.getElementById('saved-payment-methods');
  const {actions} = loadActionsResult;
  actions.getSession().savedPaymentMethods.forEach((pm) => {
    const label = document.createElement('label');
    const radio = document.createElement('input');

    radio.type = 'radio';
    radio.value = pm.id;

    label.appendChild(radio);
    label.appendChild(document.createTextNode(`Card ending in ${pm.card.last4}`));
    container.appendChild(label);
  });
}