Custom Stripe Checkout Button

stripe-checkout.html

<form action="." method="post">
        <noscript>You must <a href="http://www.enable-javascript.com" target="_blank">enable JavaScript</a> in your web browser in order to pay via Stripe.</noscript>

        <input 
            type="submit" 
            value="Pay with Card"
            data-key="PUBLISHABLE STRIPE KEY"
            data-amount="500"
            data-currency="cad"
            data-name="Example Company Inc"
            data-description="Stripe payment for $5"
        />

        <script src="https://checkout.stripe.com/v2/checkout.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
        <script>
        $(document).ready(function() {
            $(':submit').on('click', function(event) {
                event.preventDefault();

                var $button = $(this),
                    $form = $button.parents('form');

                var opts = $.extend({}, $button.data(), {
                    token: function(result) {
                        $form.append($('<input>').attr({ type: 'hidden', name: 'stripeToken', value: result.id })).submit();
                    }
                });

                StripeCheckout.open(opts);
            });
        });
        </script>
</form>

Can you add a piece for the callback after the submit I want to parse on the result of the charge.

Sorry for the ignorant question, but could someone help walk me through what I need to do to actually send the payment through to the stripe dashboard? The code works amazingly and I was finally able to use my existing button style to pull up the stripe checkout form... everything goes well until I submit the payment, then it doesn't end up in the stripe dashboard. I can see it in the logs in stripe, but that's the end of it.

@dolson334 & @jshwvr, this may be what you are looking for: https://stripe.com/docs/recipes/subscription-signup

any thoughts how can apply the script in a Webflow site? I added the basic piece of code but need to add a style to the button to match the site.

I added stripe checkout button on my page but after entering the payment details it goes to a page that says not found. How can we set this or add thank you page after successful payment? below is my page url.
https://nathanaaron.lpages.co/the-act-of-forgiveness/

Is this solution PCI compliant?

Thanks

Thank a lot Ziadoz

Is using checkout.js deprecated?

how to redirect to thank you button after payment success?

Helpfull.