Integrate Stripe Checkout to Purchase Products in Next.js with Stripe @stripe/stripe-js Cl

Now that we have an app and our products configure in Stripe, it's time to connect the two and give people a way to purchase our products.

Using Stripe's API, we can initiate a new instance of the Stripe Checkout flow with a simple click of a button.

We'll create an initiateCheckout function that handles this flow for us. After loading stripe through @stripe/stripe-js we'll await a stripePromise that will allow us to redirect to stripes checkout flow. You'll notice that we will need to pass in line items with the price id and quantity.