JSFiddle - React, Tailwind, and code Playground

by MichelleGlauser

HTML

<script src="https://checkout.stripe.com/checkout.js"></script>
<input id="coupon" name="coupon"></input>
<button id="customButton">Purchase</button>

JavaScript

var handler = StripeCheckout.configure({
    key: 'pk_test_jtNkjvGGHXu8WMGRRULXb9yp',
    image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
    token: function (token, args) {
        // Use the token to create the charge with a server-side script.
        // You can access the token ID with `token.id`
    }
});

document.getElementById('customButton').addEventListener('click', function (e) {
    // Open Checkout with further options
    var amount = 1000
    $.ajax({
        url: 'https://api.stripe.com/v1/coupons/' + $('#coupon').val(),
        headers: { Authorization: 'Basic ' +  btoa('sk_test_mEUHpjVUKV4lBFvzHQIMI0fb:') }
        // username: 'sk_test_mEUHpjVUKV4lBFvzHQIMI0fb',
        // password: '',
        

    }).done(function (result) {
        if (result.valid) {
            if (result.percent_off) {
                amount = amount - (amount * (result.percent_off / 100))
            }
            handler.open({

                name: 'Demo Site',
                description: '2 widgets ($20.00)',
                amount: amount
            });
        }
    });
    e.preventDefault();
});