How to use the @stripe/stripe-js.loadStripe function in @stripe/stripe-js

document.addEventListener('DOMContentLoaded', async () => {
  const dataset = document.querySelector('.stripe-form').dataset
  const stripePublishableKey = dataset.publishableKey
  const clientSecret = dataset.clientSecret
  const form = document.querySelector('#payment-form')
  const callbackForm = document.querySelector('#payment-callback-form')
  const payButton = document.querySelector('#submit-payment')
  const cardError = document.querySelector('#card-error')
  const errorMsg = document.querySelector('#card-error')
  const spinner = document.querySelector('#spinner')
  const buttonText = document.querySelector('#button-text')

  const stripe = await loadStripe(stripePublishableKey)
  const elements = stripe.elements()
  const card = elements.create('card', { style })

  const payWithCard = (stripe, card, clientSecret) => {
    setLoading(true)
    stripe.confirmCardPayment(clientSecret, {
      payment_method: {
        card: card
      }
    }).then(function (result) {
      if (result.error) {
        showError(result.error.message)
      } else {
        orderComplete(result.paymentIntent)
      }
    })

.then( async data => {
				const { stripe_publishable_key: stripePublishableKey, session_id: sessionId } = data;
				const stripe = await loadStripe( stripePublishableKey );
				stripe.redirectToCheckout( { sessionId } );
			} )
			.catch( error => {

const StripeElementsForm = ({ stripePublishableKey, setupIntentSecret, billingAddressDetails, successUrl, isCreditCardStored }: Props): React.Node => {
  const stripePromise = loadStripe(stripePublishableKey)

  return (
    
      
    
  )
}