JSFiddle - React, Tailwind, and code Playground

by kkdaily

HTML

<script src="https://js.stripe.com/v3"></script>
<!-- Load Stripe.js on your website. -->

<!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
<button
  style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
  id="checkout-button-plan_EyvXpi5JUITbhz"
  role="link"
>
  Checkout
</button>

<div id="error-message"></div>

JavaScript

var stripe = Stripe('pk_live_y1lQcaLdyVKpCU730vIwNKEm');

var checkoutButton = document.getElementById('checkout-button-plan_EyvXpi5JUITbhz');
checkoutButton.addEventListener('click', function () {
  // When the customer clicks on the button, redirect
  // them to Checkout.
  stripe.redirectToCheckout({
    items: [{plan: 'plan_EyvXpi5JUITbhz', quantity: 1}],

    // Note that it is not guaranteed your customers will be redirected to this
    // URL *100%* of the time, it's possible that they could e.g. close the
    // tab between form submission and the redirect.
    successUrl: 'https://ThriveHive.com/success',
    cancelUrl: 'https://ThriveHive.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 = result.error.message;
    }
  });
});