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

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

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

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

法令遵守

顧客の決済の詳細を保存する際、適用されるすべての法律、規制、ネットワークの規則に準拠する責任があります。これらの要件は通常、以降の購入時の決済フローでの顧客の決済手段を提示する、顧客がウェブサイトやアプリを使用していないときに請求するなど、将来に備えて顧客の決済手段を保存する場合に適用されます。決済手段の保存をどのように計画しているかを示す規約をウェブサイトやアプリに追加し、顧客がオプトインできるようにします。

決済手段を保存する場合、規約に記載された特定の用途にのみ使用できます。顧客がオフラインであるときに決済手段に請求して、以降の購入に備えたオプションとして保存する場合は、この特定の用途について顧客から明示的に同意を収集する必要があります。たとえば、同意を収集するために「今後の使用に備えて決済手段を保存する」チェックボックスを使用します。

顧客がオフラインのときに請求を行うには、規約に以下の内容を含める必要があります。

指定された取引で顧客の代理として単独の決済または一連の決済を開始することを許可するという、顧客の同意。
予期される決済時期と決済頻度 (たとえば、請求が予定されている分割払いなのか、サブスクリプションの決済なのか、あるいは予定されていないトップアップなのか)。
決済金額の決定方法。
決済手段をサブスクリプションサービスに使用する場合は、キャンセルに関するポリシー。

これらの規約に関する顧客の書面による同意の記録を必ず保管してください。

注

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

Stripe を設定する
サーバ側

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

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

Customer の作成
サーバ側

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

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

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

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

注意

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

顧客が将来の使用に備えて決済手段を保存できるようにするには、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);
  });
}

注