[Stripe] Checkout w/ user-specified amount

Example of Checkout custom integration where the amount is input by the user.

by Matthew Schenker

HTML

<script src="https://checkout.stripe.com/checkout.js"></script>
<form id="myForm" action="XXXXXX" method="POST">
    <input type="text" id="amount" name="amount" placeholder="Choose Amount"/>
    <input type="hidden" id="stripeToken" name="stripeToken" />
    <input type="hidden" id="stripeEmail" name="stripeEmail" />
</form>

<input type="button" id="customButton" value="Pay">

JavaScript

var handler = StripeCheckout.configure({
    key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
    image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
    token: function (token) {
        $("#stripeToken").val(token.id);
        $("#stripeEmail").val(token.email);
        $("#myForm").submit();
    }
});

$('#customButton').on('click', function (e) {
    var amount = $("#amount").val() * 100;
    var displayAmount = parseFloat(Math.floor($("#amount").val() * 100) / 100).toFixed(2);
    // Open Checkout with further options
    handler.open({
        name: 'Demo Site',
        description: 'Custom amount ($' + displayAmount + ')',
        amount: amount
    });
    e.preventDefault();
});

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