- 8Integrate Stripe Checkout to Purchase Products in Next.js with Stripe @stripe/stripe-js Cl5m 9s
Integrate Stripe Checkout to Purchase Products in Next.js with Stripe @stripe/stripe-js Cl
Share this video with your friends
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.
can you please share your vscode editor settings (font-family)?
which extension shows the import library size?
can you please share your vscode editor settings (font-family)?
Font family is VS Code default Menlo, Monaco, 'Courier New', monospace Theme is Night Owl https://marketplace.visualstudio.com/items?itemName=sdras.night-owl
which extension shows the import library size?
Extension is https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
Could you explain the following error message I return when I click the 'Buy Now!' button? :
Client-only Checkout does not support prices with usage_type=metered in items[0].
Could you explain the following error message I return when I click the 'Buy Now!' button? :
Client-only Checkout does not support prices with usage_type=metered in items[0].
That looks like a Stripe error, I'm not sure about that. It seems that you may be trying to use "metered" billing that's not supported with the client-only checkout.
Hi! I did all the things you are doing, and added lineItems too. There's still an error that's coming both after deployment and on localhost.
It says this - "v3:1 Uncaught (in promise) IntegrationError: stripe.redirectToCheckout: successUrl must start with either http:// or https://."
I went over to network and searched stripe, then reloaded it too. I'm not sure what's happening.
Kindly help!
Hello, I'm around 4:20 and when I click on the button the error i have is this
v3:1 Uncaught (in promise) IntegrationError: The domain (http://localhost:3000/) that redirected to Checkout is not enabled in the dashboard. Add this domain at https://dashboard.stripe.com/account/checkout/settings. at rn (v3:1) at e._handleMessage (v3:1) at e._handleMessage (v3:1) at v3:1
I did try to enable it in the dashboard, but the problem is that I can't enable localhost3000, it doesn't let me do so.
Hi, Having the same problem as Hugo, v3:1 Uncaught (in promise) IntegrationError: The domain (http://localhost:3000/) that redirected to Checkout is not enabled in the dashboard. Add this domain at https://dashboard.stripe.com/account/checkout/settings.
Even though I am in Test mode in stripe. Any help please?
Hi again, it seems I was using the Stripe API key for live and not for test mode, I have put the test mode API key in .env.local and also in Vercel environment variable, I also made sure that the product price IDs where the ones from test mode and not from live mode, cause it seems they are different. Now all seems to work.
I'm getting this error when clicking on Buy Button
IntegrationError: Invalid value for stripe.redirectToCheckout: lineItems.0.price should be a string. You specified: 1
I would start by double-checking your code. Here is the start of the next lesson for the index.js file and here is the start for the payments.js file.