如何将自定义字段添加到 Stripe Checkout 的弹出表单

Question

如何将自定义字段添加到 Stripe Checkout 表单，例如名字、姓氏，甚至可能是带有自定义按钮的复选框？到目前为止，我已经想到了这个；

<script src="https://checkout.stripe.com/checkout.js"></script>

<form action="/charge" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_i2txBI2jUjSQIMoqFz3Fo326"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-name="Matt's Widgets and Gizmos"
    data-description="2 widgets (.00)"
    data-amount="2000"
    data-billingAddress="true"
    data-shippingAddress="true">
  </script>
</form>

而且我发现 Stripe Checkout 只能包含以下自定义值，如下所示；

stripeBillingName: 
stripeBillingAddressLine1: 
stripeBillingAddressApt:
stripeBillingAddressZip: 
stripeBillingAddressCity: 
stripeBillingAddressState: 
stripeBillingAddressCountry: 
stripeBillingAddressCountryCode:

有什么办法解决这个问题吗？请告诉我谢谢

Answer 1

不幸的是，无法调整 Stripe Checkout 以添加自定义字段或复选框。这里的解决方案是使用 Custom Checkout 并将这些额外字段添加到您自己的表单中。例如，您可以收集客户的姓名并要求他接受您自己的服务条款，并且只允许他们在接受后点击支付按钮。

然后，一旦客户使用他们的银行卡详细信息填写 Checkout 并且 Stripe 将令牌发回给您，您将把它连同您在您这端收集的额外详细信息一起发送到您的服务器。

Answer 2

Stripe 现在推荐使用 stripe.js method versus the deprecated checkout modal method (not to be confused with the new Stripe Checkout).

为此，为了添加自定义字段（例如名称、包类型、自定义标签等），我发现可以通过添加以下内容来调整 stripe.js 函数 stripeTokenHandler()：

var customInput = document.createElement('input');
customInput.setAttribute('type', 'hidden');
customInput.setAttribute('name', 'customInput');
customInput.setAttribute('value', $("input[name=customInput]:checked").val());
form.appendChild(customInput);

因此，如果我有一个名为 "customInput" 的单选按钮组，它会将选中的任何单选按钮的值附加到 "customInput" $_POST 字段。这样目标脚本就可以检索并使用它。

希望这对某人有所帮助。

Answer 3

您可以尝试添加自己的文件作为 clientReferenceId 即。 => extrauserid::option2::option2 但不幸的是，你没有在 payment_intent.succeeded 中得到它，就像缺少 SKU 一样。

clientReferenceId string

引用结帐会话的唯一字符串。这可以是客户 ID、购物车 ID 或类似内容。它包含在 checkout.session.completed 网络挂钩中，可用于完成购买。

var data = {
    customerEmail: eml,
    successUrl: 'https://...',
    cancelUrl: 'https://...',
    clientReferenceId: user + '::' + option1,
    items: [{  
       sku: sku, 
       quantity: 1
    }],
}
stripe.redirectToCheckout(data);

checkout.session.completed

"cancel_url": "https://....",
"client_reference_id": "user123::somevalue",
"customer": "cus_H1vFYbxY2XMAz6",

如何将自定义字段添加到 Stripe Checkout 的弹出表单

How to add custom fields to popup form of Stripe Checkout

html

javascript

stripe-payments