Stripe Variable Donation with Stripe Checkout on Zesty

stripe_checkout_donation.parsley.html

<form action="/-api/stripe/checkout" method="POST" id="donation-form">

    <!-- Input field for user -->
    <input type="number" name="donation_amount" value="5">
  
    <!-- Values for Zesty -->
    <input type="hidden" name="amount" value="500">
    <input type="hidden" name="success_redirect" value="/thank-you-for-your-donation/">
    <input type="hidden" name="failure_redirect" value="/an-error-occurred-with-your-donation/">
    <input type="hidden" name="charge_description" value="Donation on example.com">

    <!-- Stripe Checkout button settings -->
    <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key="{{ setting.stripe.key }}"
        data-name="{{ clippings.site_name }}"
        data-description="Donation"
        data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
        data-locale="auto"
        data-zip-code="true">
    </script>

  <script>
    // Every time the donation amount is changed, change the hidden amount field (and convert from dollars to cents)
    jQuery('#donation-form [name="donation_amount"]').on('keyup', function() {
        jQuery('#donation-form [name="amount"]').val(jQuery(this).val() * 100)
    });
  </script>
  
</form>