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

【问题标题】：How to add custom fields to popup form of Stripe Checkout如何将自定义字段添加到 Stripe Checkout 的弹出表单
【发布时间】：2015-08-16 00:39:16
【问题描述】：

如何将自定义字段添加到 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 ($20.00)"
    data-amount="2000"
    data-billingAddress="true"
    data-shippingAddress="true">
  </script>
</form>

我发现 Stripe Checkout 只能包含以下自定义值；

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

有没有办法解决这个问题？请告诉我谢谢

【问题讨论】：

标签： javascript html stripe-payments

【解决方案1】：

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

然后，一旦客户在 Checkout 中填写了他们的卡详细信息，并且 Stripe 会将令牌发回给您，您会将其连同您最终收集的额外详细信息一起发送到您的服务器。

【讨论】：

您似乎无法将任何您想要的自定义字段添加到您的自定义表单中，虽然正确吗？如果我想添加“头发颜色” - 带有文本框怎么办？或者，如果我想用单选按钮“男性”或“女性”添加“性别” - 自定义结帐也无法正确？

【解决方案2】：

Stripe 现在建议使用stripe.js 方法而不是已弃用的结帐模式方法（不要与新的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 字段。这样目标脚本可以检索并使用它。

希望这对某人有所帮助。

【讨论】：

【解决方案3】：

您可以尝试通过传递添加自己的文件作为 clientReferenceId 即。 => extrauserid::option2::option2 但不幸的是，您在 payment_intent.succeeded 中没有得到这个，与缺少 SKU 相同。

clientReferenceId string

引用 Checkout 会话的唯一字符串。这可以是客户 ID、购物车 ID 或类似名称。它包含在 checkout.session.completed webhook 中，可用于完成购买。

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",

【讨论】：