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? The simple checkout example posts fine, I am new to js so

Solution 1:

If you use the custom Checkout integration, you need to do a little more work. You write your own code to handle the token returned by Stripe. This is all done within token callback.

Here's a traditional form submission example, it uses JQuery, appends the token and user's email as values to hidden form elements, then submits the form.

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

Full Example: https://jsfiddle.net/osrLsc8m/

Alternatively, you could submit the data to your backend with an AJAX request.

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){ ... });
}

Full Example: http://jsfiddle.net/742tety5/

Solution 2:

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

<scriptsrc="https://checkout.stripe.com/checkout.js"></script><formid="myForm"><inputtype="hidden"id="message"value="Hello, world"/></p><inputtype="hidden"id="amount"value="10.00" /></p><p><buttontype="submit"id="customButton">Pay</button></p></form><script>// checkout handlervar 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>

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