如何设置Stripe PaymentElement来保存卡

Question

我正在努力设置 Stripe 支付元素。我正在通过传递 setupIntent 创建一个 Payment 元素。当用户单击“提交”按钮时，我将调用 informSetup() 将卡信息从元素保存到 Stripe。

我有3个问题-

a) 支付元素 UI 正在显示附加字段。我在下面附上了屏幕截图，突出显示了这些额外的字段。如何避免或纠正这个问题？

b) 对于接受客户详细信息的 PaymentElement，如何在卡字段上添加姓名。

c) 如何避免为客户重复添加卡？在确认setupIntenet之前，如何检查在支付元素中输入的卡是否已经存在？

我尝试了下面的代码-

<script setup lang="ts">
let setupIntent = getSetupIntent(stripeCustomerId);
const appearance = {
    theme: 'stripe',
};

const options = {
    clientSecret: setupIntent.clientsecret,
    appearance,
};

elements = stripe.elements(options);
const paymentElement = elements.create("payment");
paymentElement.mount("#payment-element"); 

const confirmSetup = async() => {
    const result = await stripe.confirmSetup({
        elements,
        redirect: "if_required"
    });
}
</script>

<html>
<div>
    <form id="payment-form">
        <div id="payment-element"></div>
        <div id="payment-message"></div>
    </form>
    <button onclick="confirmSetup()">Submit</button>
</div>
</html>

Answer 1

a) 您在屏幕截图中突出显示的内容称为 LINK，这是 Stripe 提供的付款方式，可为您的客户提供更快的结帐速度。如果您想禁用它，您可以查看说明这里

b) 您这里有 2 个选择：

您可以使用您自己在 PaymentElement 之外添加的自定义输入来收集卡名称，然后在确认您的 SetupIntent 时将其传递到
```
billing_details.name
```
字段
或者您可以选择在计费模式下添加AddressElement来收集客户的姓名和地址信息。一旦您调用confirmSetup，这些将被自动收集并添加到 PaymentMethod 中。

c) 老实说，这不是一件直接的事情，但我会给你一些代码的流程，但这意味着你要迁移生成 SetupIntents/PaymentMethods 的方式：

首先您需要准备 PaymentElement 以创建确认令牌

const options = {
    mode: 'setup',
    currency: 'eur',
    paymentMethodCreation: 'manual',
    setupFutureUsage: 'off_session',
    appearance,
};

elements = stripe.elements(options);

您无需在单击按钮时调用
```
confirmSetup
```
，而是调用以下方法

const handleSubmit = async (event)=> {
    event.preventDefault();
    const {error: submitError} = await elements.submit();
    if (submitError) {
      handleError(submitError);
      return;
    }
    const {error, confirmationToken} = await stripe.createConfirmationToken({elements});

    if (error) {
      handleError(error);
      return;
    }
    
};

调用您的后端来创建SetupIntent

const handleSubmit = async (event)=> {
    //everything from step 2
    ...
    const {error:setupError, client_secret} = await getSetupIntent(stripeCustomerId, confirmationToken.id);
    if (setupError) {
      handleError(setupError);
      return;
    }
};

当您在后端创建SetupIntent时，您将执行以下操作：

检索确认令牌
看指纹
列出所有客户的卡付款方式
检查其他支付方式是否有相同的指纹
如果有重复，则向前端返回错误
否则创建一个SetupIntent并将
```
client_secret
```
返回到前端进行确认

确认设置意图

const handleSubmit = async (event)=> {
    //everything from step 3
    ...
    const {error:confirmError} = await stripe.confirmSetup({
      clientSecret,
      confirmParams: {
        confirmation_token: confirmationToken.id,
        return_url: 'https://example.com/order/123/complete',
      },
    });

    if (confirmError) {
      handleError(confirmError);
    }
};

我知道这很复杂，但您可以参考此doc了解更多详细信息。

如何设置Stripe PaymentElement来保存卡

问题描述投票：0回答：1

1个回答

最新问题

如何设置Stripe PaymentElement来保存卡

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1