JSFiddle - React, Tailwind, and code Playground

by sridhar reddy

HTML

<script src="https://js.stripe.com/v3/"></script>
 
 <form id="payment-form">
      <div id="link-authentication-element">
        <!--Stripe.js injects the Link Authentication Element-->
      </div>
      <div id="payment-element">
        <!--Stripe.js injects the Payment Element-->
      </div>
      <button id="submit">
        <div class="spinner hidden" id="spinner"></div>
        <span id="button-text">Pay now</span>
      </button>
      <div id="payment-message" class="hidden"></div>
    </form>

JavaScript

const stripe = Stripe("pk_test_Uqx0dqzSXjJHdaYDzF3ldefm");

console.log(stripe)

let elements, paymentElement;


document
  .querySelector("#payment-form")
  .addEventListener("submit", handleSubmit);
  
const paymentElm = document.querySelector("#payment-element")

let emailAddress = '';
// Fetches a payment intent and captures the client secret
function initialize() {

  const appearance = {
    theme: 'stripe',
  };
  elements = stripe.elements({ appearance, mode: 'setup', currency: 'usd' });

  const paymentElementOptions = {
    layout: "tabs",
  };

  paymentElement = elements.create("payment", paymentElementOptions);
  paymentElement.mount(paymentElm);
}


async function handleSubmit(e) {
  e.preventDefault();

  const response = await stripe.createPaymentMethod({
    elements: paymentElement,
    params: {
    	billing_details: {
      	name: 'sridhar',
        email: '[email protected]'
      }
    }
  });

  console.log('response: ', response);
}

setTimeout(() => {
	initialize();
  });