javascript - Stripe 自定义结帐未发布

Question

任何人都可以帮忙解释为什么在完成结帐弹出窗口的输入后没有发布到预订/收费吗？

简单的结帐示例发布得很好，我是 js 新手，所以我不太了解命令流程。

<form action="/booking/charge" method="post">
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton">Purchase</button>
 <script>
var handler = StripeCheckout.configure({
  key: 'pk_test_xxxxxxxxxxx',
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  locale: 'auto',
  token: function(token) {
    // You can access the token ID with `token.id`.
    // Get the token ID to your server-side code for use.
  }
});

document.getElementById('customButton').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'xxxx',
    email: "test@test.com",
    description: '2 widgets',
    currency: 'gbp',
    amount: 350
  });
  e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
  handler.close();
});
</script>    
</form>

Answer 1

如果您使用自定义 Checkout 集成，则需要做更多工作。您编写自己的代码来处理 Stripe 返回的 token 。这一切都是在 token 回调中完成的。

这是一个传统的表单提交示例，它使用 JQuery，将 token 和用户的电子邮件作为值附加到隐藏的表单元素，然后提交表单。

function (token) {
  // Use the token to create the charge with a server-side script.
  $("#stripeToken").val(token.id);
  $("#stripeEmail").val(token.email);
  $("#myForm").submit();
}

完整示例:https://jsfiddle.net/osrLsc8m/

或者，您可以通过 AJAX 请求将数据提交到后端。

function (token) {        
  var myData = {
   token: token.id,
   email: token.email
   };

   /* 
    Make an AJAX post request using JQuery,
    change the first parameter to your charge script
   */
   $.post("/echo/html/",myData,function(data){ ... });
}

完整示例:http://jsfiddle.net/742tety5/