JSFiddle - React, Tailwind, and code Playground

by Atty Eleti

HTML

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>🍿 PaymentPages</title>
  <script src="https://edge-js.stripe.com/v3"></script>
</head>

<body>
  <form>
    <div>
      <label for="sku">
        SKU (please ensure the merchant account you are using has SKUs with the corresponding IDs)
      </label>
      <br/>
      <select name="sku" id="sku">
        <option value="sku-1">sku-1</option>
        <option value="sku-2">sku-2</option>
        <option value="invalid">invalid sku</option>
      </select>
    </div>
    <div>
      <label for="succeeded">
        succeeded_url
      </label>
      <br/>
      <input name="succeeded" id="succeeded" value="http://localhost:3000/pages#succeeded">
    </div>
    <div>
      <label for="canceled">
        canceled_url
      </label>
      <br/>
      <input name="expired" id="canceled" value="http://localhost:3000/pages#canceled">
    </div>
    <div>
      <label for="expired_url">
        expired_url
      </label>
      <br/>
      <input name="expired" id="expired" value="http://localhost:3000/pages#expired">
    </div>
    <button type="submit">Pay</button>
  </form>
</body>

</html>

JavaScript

// @flow
/* global Stripe */
const stripe = window.Stripe(
  process.env.STRIPE_JS_PUBLIC || 'pk_test_9zXRlrybSG5or3wnuCppnOlb',
  {
    betas: ['payment_pages_beta_1'],
  }
);
window.stripe = stripe;

const hrefParts = window.location.href.split('#');
if (hrefParts.length > 0) {
  const status = hrefParts[1];
  if (['succeeded', 'canceled', 'expired'].indexOf(status) >= 0) {
    alert(status);
  }
}

const form = document.querySelector('form');
const sku = document.querySelector('#sku');
const succeeded = document.querySelector('#succeeded');
const canceled = document.querySelector('#canceled');
const expired = document.querySelector('#expired');

if (
  !form ||
  /* eslint-disable rulesdir/no-instanceof */
  !(sku instanceof HTMLSelectElement) ||
  !(succeeded instanceof HTMLInputElement) ||
  !(canceled instanceof HTMLInputElement) ||
  !(expired instanceof HTMLInputElement)
  /* eslint-enable rulesdir/no-instanceof */
) {
  throw new Error('HTML expectations not met');
}

if (form) {
  form.addEventListener('submit', (e) => {
    e.preventDefault();

    stripe
      .redirectToPaymentPage({
        sku: sku.value,
        succeeded_url: succeeded.value,
        canceled_url: canceled.value,
        expired_url: expired.value,
      })
      .then((result) => {
        console.log(result);
      });
  });
}