Set Stripe checkout custom amount from GET parameter

Question

I can't figure out, just want to pass to checkout page a value as GET parameter

so that https://xxxxxx/?setAmount=200000 did go to a page with this script

<form action="custom action" method="POST">
  <script
  let params = new URLSearchParams(document.location.search.substring(1));
  let amount=params.get(setAmount);
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_UUbDY16wDCECOujIs0vQ2vTi"
    data-amount=amount;
    data-name="Company"
    data-description="Widget"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto"
    data-zip-code="true"
    data-currency="eur">
  </script>
</form>

The checkout button show out but didn't get the amount parameter, so that no amount is defined. I didn't have access to server side on the server hosting the website with the button so I need to go forth and back to another site using Podio Globiflow.

Answer 1

Stripe Checkout supports two modes -- Simple and Custom. Custom lets you control what pops up using javascript instead of data properties set on the server. To get the behavior you seek, you could do something like this:

$('#customButton').on('click', function(e) {
  const params = new URLSearchParams(document.location.search)
  const amountInCents = params.get("amount")
  const displayAmount = parseFloat(amountInCents / 100).toFixed(2);
  // Open Checkout with further options
  handler.open({
    name: 'Demo Site',
    description: 'Custom amount ($' + displayAmount + ')',
    amount: amountInCents,
  });
  e.preventDefault();
});

// Close Checkout on page navigation
$(window).on('popstate', function() {
  handler.close();
});

It is worth noting, that this amount has no impact on how much you actually Charge your Customer and is only for display purposes. Checkout tokenizes the Card details; the amount Charged is entirely controlled by server side logic as outlined in the official Stripe docs.