JSFiddle - React, Tailwind, and code Playground

by Atty Eleti

HTML

<script src="https://js.stripe.com/v3"></script>


<button id="checkout-button">Pay</button>

<script>
  var stripe = Stripe('pk_test_9zXRlrybSG5or3wnuCppnOlb');
  var checkoutButton = document.getElementById('checkout-button');
  checkoutButton.addEventListener('click', function () {
    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
      items: [{type: 'plan', id: 'plan_DixdmUSwtHe12o', quantity: 1}],
      successUrl: 'https://payment-pages.com/success',
      cancelUrl: 'https://payment-pages.com/canceled',
    })
    .then(function (result) {
      if (result.error) {
        // If `redirectToCheckout` fails due to a browser or network
        // error, display the localized error message to your customer.
        var displayError = document.getElementById('error-message');
        displayError.textContent = error.message;
      }
    });
  });
</script>