Stripe Checkout Subscribe Dynamic Amount and Interval with Zesty

stripe_subscribe_custom_amount.parsley.html

<form action="/-api/stripe/subscribe-custom" method="POST" id="subscribe">

    <!-- used only on front-end as user input; gets converted and stored as hidden input "amount" -->
    <input type="text" name="subscription_amount" value="5">

    <!-- Hidden configuration: subscription interval. Can be "day", "week", "month", "year" -->
    <input type="hidden" name="interval" value="month">

    <!-- Hidden, automatically set amount (by jQuery below): -->
    <input type="hidden" name="amount" value="500">
    
    <!-- Pages to redirect to on success/failure -->
    <input type="hidden" name="success_redirect" value="/thank-you/">
    <input type="hidden" name="failure_redirect" value="/payment-error/">

    <!-- 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-image="https://stripe.com/img/documentation/checkout/marketplace.png"
        data-locale="auto"
        data-zip-code="true">
    </script>

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

</form>