Theo's Typesafe Cult•2y ago

Can you help me figure out why this page is loading so fast?

https://nextjs-typescript-react-stripe-js.vercel.app/donate-with-elements I implemented Stripe Elements into my webpage yesterday. To load it you need to first create a payment intent and receive a secret client key to load the Stripe component. When you go on this site, the component just loads instantly as if the page is static or something...? You can see the GitHub repo below. I'm only concerned about the /donate-with-elements part. I've been trying to scour the code and see what they did differently, but I can't figure out how their page loads so fast.

TypeScript Next.js Stripe Example

Full-stack TypeScript example using Next.js, react-stripe-js, and stripe-node.

18 Replies

Unknown User•2y ago

Message Not Public

amanuel•2y ago

There is. For the PaymentElement component to render it needs a payment_intent which is fetched here:

useEffect(() => {
    fetchPostJSON('/api/payment_intents', {
      amount: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP),
    }).then((data) => {
      setPaymentIntent(data)
    })
  }, [setPaymentIntent])

useEffect(() => {
    fetchPostJSON('/api/payment_intents', {
      amount: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP),
    }).then((data) => {
      setPaymentIntent(data)
    })
  }, [setPaymentIntent])

Unknown User•2y ago

Message Not Public

amanuel•2y ago

https://github.com/vercel/next.js/blob/2085dac9267800ca6c8895120d85331bf3f6353e/examples/with-stripe-typescript/utils/api-helpers.ts#L13

GitHub

next.js/api-helpers.ts at 2085dac9267800ca6c8895120d85331bf3f6353e ...

The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.

amanuel•2y ago

And this API helper is awaiting

Unknown User•2y ago

Message Not Public

amanuel•2y ago

It is though

amanuel•2y ago

https://github.com/vercel/next.js/blob/2085dac9267800ca6c8895120d85331bf3f6353e/examples/with-stripe-typescript/pages/donate-with-elements.tsx#L25

GitHub

next.js/donate-with-elements.tsx at 2085dac9267800ca6c8895120d85331...

The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.

Unknown User•2y ago

Message Not Public

amanuel•2y ago

Yeah, so what the fuck? I tried it locally and ther it loads But on their website it doesn't load at all? How can you check this btw?

Unknown User•2y ago

Message Not Public

amanuel•2y ago

I'd love to know how

Unknown User•2y ago

Message Not Public

amanuel•2y ago

It definitely does not run per request That's impossible

Unknown User•2y ago

Message Not Public

Gaming

Programming

Can you help me figure out why this page is loading so fast?