条纹自定义结帐不发布 [英] Stripe custom checkout not Posting

问题描述

在结帐弹出窗口输入完成后，有人可以协助为什么不将其过帐到预订/收费吗?

Can anyone assist as to why this is not posting to booking/charge upon completion of input to the checkout pop up window?

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

The simple checkout example posts fine, I am new to js so I don't quite understand the flow of the commands.

<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: "[e-mail]",
    description: '2 widgets',
    currency: 'gbp',
    amount: 350
  });
  e.preventDefault();
});

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

推荐答案

对我有用的代码(必须在页眉而非页脚中包含jQuery脚本)

Code that has worked for me (must include script for jQuery in header not footer)

<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: '[e-mail]',
        description: '2 widgets',
        amount: Math.round($("#amount").val() * 100)
    });
    e.preventDefault();
});
// Close Checkout on page navigation
$(window).on('popstate', function () {
    handler.close();
});
</script> 

希望这对遇到相同问题的人有所帮助.

Hope this is of help to someone, experiencing same issue.

这篇关于条纹自定义结帐不发布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！