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设置事件处理程序，则需要使用Custom Checkout集成，而不是如上所述的简单代码块。

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

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

如何处理Stripe Simple Checkout的响应？

1 个答案: