支付过程中保存付款详情

了解如何接受付款并保存客户的付款详情以备将来购物时使用。

复制页面

注意

通过 Elements 和 Checkout Sessions API 支持的已保存支付方式仅限银行卡。不支持其他已保存的支付方式，例如银行账户。

启用保存的支付方式

要允许客户保存其支付方式以供将来使用，请在创建 Checkout Session 时指定 saved_payment_method_options.payment_method_save 参数。

保存支付方式时提供 Customer。传递现有的 customer，或者新建客户，将 Checkout Session 的 customer_creation 设置为 always。

创建 Checkout Session 后，使用响应中返回的客户端私钥来构建结账页面。

注意

全球隐私法复杂而微妙。在实施存储客户支付方式详情的功能之前，请与您的法律团队合作，确保其符合您的隐私和合规性框架。

在大多数情况下，您必须先征得客户的许可，然后才能保存他们的支付方式。以下示例演示如何使用复选框获取许可。

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>

通过传递 savePaymentMethod 参数来指示 Stripe 客户在调用 confirm 时是否已提供许可。当保存客户的付款详情时，您有责任遵守所有适用的法律、法规和卡组织规则。

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;
      }
    });
  });
});

复用以前保存的支付方式

您可以重新显示以前保存的支付方式，供客户在结账时使用。

识别客户

每个保存的支付方式都关联到一个 Customer 对象。在创建 Checkout Session 之前，请对您的客户进行身份验证，并将相应的 Customer ID 传递到 Checkout Session。

呈现保存的支付方式

在前端使用 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.
      }
    });
  });
});