Steps to Integrate stripe custom checkout in nextjs or react application

Here are the things you need to keep in mind when integrating stripe custom checkout.

• Checkout Form must be put in a components directory (and not in pages directory) especially if you are using nextjs app
• If you put checkout form in pages, you may see error saying "Stripe reactjs - could not find elements context"
• In page where you want to see payment form, you need to wrap the checkout component in Elements component provided by Stripe.

So here is what happens when you land on the checkout page

• Inside the useEffect, api request is sent to create payment intent (Make sure you have created an api endpoint on your server that accepts this request and sends it to the stripe server). When sending this request, you can pass the amount to be charged and items in the cart as well
• Server responds with payment intent object. Inside payment intent object, there is a property called as clientSecret.
• Then state is changed using setClientSecret and page re-renders. At this point, Payment form is shown to user.
• Then user fills all the payment details and hits pay now
• Then "confirm payment intent" request is sent to the Stripe server directly.