如何处理 Stripe Simple Checkout 的响应？

Question

我有以下代码：

<h2>Please click the button below to pay your order.</h2>
<center>
  <form id="checkoutStripe" action="/api/checkout" method="GET">

    <script
      src="https://checkout.stripe.com/checkout.js" class="stripe-button"
      data-key="{data_key}"
      data-amount="{data_amount}"
      data-name="{name}"
      data-description="{order}"
      data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
      data-locale="auto"
      token="stripeTokenCallback"
      data-zip-code="true">
    </script>

    <input type="hidden" name="orderId" value="{orderId}" />
    <input type="hidden" name="userId" value="{userId}" />
    <input type="hidden" name="tokenId" value="{tokenId}" />
  </form>
</center>

这是他们文档 (https://stripe.com/docs/checkout) 上的简单结帐布局，我正在尝试传递一个函数来处理调用我的服务器端代码“/api/checkout”的响应。

是否有可能或者我必须将整个逻辑更改为自定义集成？

非常感谢您！

Answer 1

如果您想使用自己的 JS 为 Checkout 设置事件处理程序，则需要使用自定义 Checkout 集成而不是上面的简单代码块。

应该相当简单，在按钮上创建点击处理程序或在表单上提交处理程序。在 token 回调中，放置您的逻辑以创建隐藏的 <input> 并提交您的 <form>（或使用令牌和任何表单数据向后端发出 XHR 请求）。

https://stripe.com/docs/checkout#integration-custom

var handler = StripeCheckout.configure({
  key: 'pk_test_xxxxx',
  locale: 'auto',
  token: function(token) {
    // grab payment form
    var paymentForm = document.getElementById("checkoutStripe");

    // You can access the token ID with `token.id`.
    // creates a token input element and add that to the payment form
    var tokenInput = document.createElement("input");
    tokenInput.name = "token";
    tokenInput.value = token.id;
    tokenInput.type = "hidden"
    paymentForm.appendChild(tokenInput);

    // submit form
    console.log("Form will submit!");    
    paymentForm.submit();
  }
});

document.getElementById('customButton').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'Stripe.com',
    description: '2 widgets',
    zipCode: true,
    amount: 2000
  });
  e.preventDefault();
});