条纹自定义结帐不发布答案

【问题标题】：Stripe custom checkout not Posting条纹自定义结帐不发布
【发布时间】：2017-07-03 03:17:06
【问题描述】：

在完成对结帐弹出窗口的输入后，任何人都可以协助说明为什么这没有发布到预订/收费？

简单的结帐示例帖子很好，我是 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>

【问题讨论】：

拜托，每个帖子都问一个问题，很难在一个线程中回答多个问题。这段代码到底有什么问题？
@Eduard Malakhov 完成对结帐弹出窗口的输入后，弹出窗口关闭并返回到同一页面，而不是像我认为应该那样完成到预订/收费页面的帖子.当我在表单标签中有简单结账的脚本时，在完成对结账弹出窗口的输入后，它完成了预订/收费的发布。我不明白为什么它不与自定义结帐？

标签： javascript php post stripe-payments

【解决方案1】：

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

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

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/

【讨论】：

感谢@duck 我无法让示例 1 中的代码正常工作，但我将 $('#customButton').on('click', function (e) 更改为 document.getElementById( 'customButton').addEventListener('click', function (e) 和关闭结帐功能相同。你知道为什么 '.on' 功能似乎不起作用吗？而且我对 Ajax 替代方案也没有运气。 ..可能与执行与示例 1 中不同的功能有关...再次感谢您的帮助
我的第一个示例是通过将 jQuery 包含从我的代码中的页脚移动到页眉来工作的，所以感谢您的提示，这听起来对吗？ Ajax 版本仍然只是刷新页面，在 url 后面附加一个 '?'
...更新...仍然需要表单标签上方的

【解决方案2】：

对我有用的代码（必须在页眉而不是页脚中包含 jQuery 脚本）

<script src="https://checkout.stripe.com/checkout.js"></script>
<form id="myForm">
    <input type="hidden" id="message" value="Hello, world"/></p>
    <input type="hidden" id="amount" value="10.00" /></p>
   <p><button type="submit" id="customButton">Pay</button></p>
</form>
<script> 
// checkout handler
var handler = StripeCheckout.configure({
    key: '<YOUR PUBLIC KEY>',
    image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
    token: function(token) {
        /* Use the token to create the charge with a server-side script.
         You can access the token ID with `token.id`
         Pass along various parameters you get from the token response
         and your form.*/                    
        var myData = {
                token: token.id,
                email: token.email,
                amount: Math.round($("#amount").val() * 100),
                message: $("#message").val()
        };
        /* Make an AJAX post request using JQuery,
           change the first parameter to your charge script*/
        $.post("<YOUR ROUTE TO charge.php", myData,function (data) {
            // if you get some results back update results
            $("#myForm").hide();
            $(".results").html("Your charge was successful");
        }).fail(function () {
            // if things fail, tell us
            $(".results").html("I'm sorry something went wrong");
        })
    }
});
$('#myForm').on('submit', function (e) {
    // Open Checkout with further options
    handler.open({
        name: 'Stripe.com',
        email: 'test@test.com',
        description: '2 widgets',
        amount: Math.round($("#amount").val() * 100)
    });
    e.preventDefault();
});
// Close Checkout on page navigation
$(window).on('popstate', function () {
    handler.close();
});
</script>

希望这对遇到同样问题的人有所帮助。

【讨论】：