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

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

注

Elements と Checkout Sessions API を使用して保存された決済手段のサポート対象に含まれるのは、カードのみです。銀行口座など、保存されている他の決済手段には対応していません。

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

注意

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

顧客が将来使用するために決済手段を保存できるようにするには、Checkout セッションの作成時に saved_payment_method_options.payment_method_save パラメーターを指定します。

決済手段を保存するには、顧客が必要です。既存の顧客を渡すか、または新しい顧客を作成するために Checkout セッションの customer_creation を always に設定します。

Checkoutt Session を作成したら、レスポンスで返された client secret を使用して決済ページの構築を行います。

initCheckout に追加の elementsOptions を渡して、決済Element が同意の回収チェックボックスを表示できるようにします。

checkout.js
const checkout = await stripe.initCheckout({
  fetchClientSecret,
  elementsOptions: {
    savedPaymentMethod: {
      enableSave: 'auto',
    }
  }
});

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

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

決済Element は、顧客がチェックアウト時に使用できるように、以前に保存した支払い方法を自動的に再表示します。

initCheckout に追加の elementsOptionsを渡し、Payment Element が以前に保存した支払い方法を再表示して、顧客が決済時に使用できるようにします。

checkout.js
const checkout = await stripe.initCheckout({
  fetchClientSecret,
  elementsOptions: {
    savedPaymentMethod: {
      enableSave: 'auto',
      enableRedisplay: 'auto',
    }
  }
});

オプション独自の保存支払い方法 UI を構築

決済Element の組み込み UI を使用する代わりに、独自の保存支払い方法 UI を構築できます。

initCheckout に追加の elementsOptions を渡すことで、決済Element が同意の回収を処理したり、以前に保存した支払い方法を表示したりできないようにすることができます。

checkout.js
const checkout = await stripe.initCheckout({
  fetchClientSecret,
  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
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  const checkbox = document.getElementById('save-payment-method-checkbox');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    const savePaymentMethod = checkbox.checked;
    checkout.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
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const container = document.getElementById('saved-payment-methods');
  checkout.session().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
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  button.addEventListener('click', () => {
    checkout.confirm({paymentMethod: selectedPaymentMethod}).then((result) => {
      if (result.error) {
        // Confirmation failed. Display the error message.
      }
    });
  });
});

注