Dynamic or lazy load stripe

[amirhemm]

Is there a way that we can lazy load the Stripe library. I have my CartContext at the top level of my app and it really hammers my performance.

[andria-dev]

Current asynchronous and lazy load options

With the 2.x versions, you can pass any kind of promise that resolves to Stripe. You can use the import()/loadStripe() or perhaps create a promise that uses requestAnimationFrame or setTimeout to wait for the browser to catch up before returning an import()/loadStripe() promise.

const stripe = new Promise((resolve, reject) => {
  requestAnimationFrame(async () => {
    try {
      resolve(await loadStripe(process.env.REACT_APP_STRIPE_API_PUBLIC))
    } catch (error) {
      reject(error)
    }
  })
})

Plans for 3.x

In the beta, we are currently having developers provide their Stripe public key, instead of Stripe itself, to use-shopping-cart. It then handles the loading of Stripe at checkout time! This way there's no worrying about getting Stripe loaded at all.

[amirhemm]

Thanks @ChrisBrownie55 that helped a lot. Any ideas on when the version 3 will come out of beta?

[dayhaysoos]

@amirhemm I'd really love to get it out within the next week or two, I think a big task we need to get out the way is type defs and documentation. I'm going to give it some work this weekend and see how far I get. Thank you for opening an issue!

[dayhaysoos]

Closing - This isn't relevant anymore since we just ask for the Stripe key to be passed now as a string