How to handle the response of Stripe Simple Checkout?

Question

I have the following code:

<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>

This is the simple checkout layout on their docs (https://stripe.com/docs/checkout), I am trying to pass a function to handle the response of calling my server side code "/api/checkout".

Is it possible or I do have to change the entire logic to the custom integration?

Thank you so much in advance!

Answer 1

If you want set up event handlers for Checkout with your own JS, you'll need to use the Custom Checkout integration rather than the simple code block, as above.

It should be fairly straight-forward, create a click handler on the button or submit handler on the form. In the token callback, place your logic to create a hidden <input> and submit your <form> (or make a XHR request with the token and any form data to your back-end).

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