Struggling to Integrate Stripe for Payments in TypeScript Next.js E-Commerce App
Hello everyone,
I've been working on a T3 app and I'm having trouble integrating Stripe for payments. Despite trying different approaches, I haven't been able to get it to work properly. Here's a breakdown of what I've tried and the issues I'm facing:
- Stripe Quickstart: I initially followed the Stripe Quickstart guide, but it's written in JavaScript, and trying to add TypeScript types caused a lot of errors. Unfortunately, I'm not confident in my ability to add types correctly without causing more issues.
- with-stripe-typescript Example: I then attempted to set up payments similar to the example in the Next.js repository, specifically with-stripe-typescript. Strangely, the example project works fine, but when I replicated the setup in my own project, I encountered a 'react-server-dom-webpack/client.edge' module not found error. Installing 'react-server-dom-webpack' led to a dependency conflict for react@"^17.0.0".
I'm at a bit of an impasse here, and I could really use some guidance:
- Integrating Stripe: Is there a more TypeScript / T3 friendly guide or example for integrating Stripe payments? I'd prefer not to work in an environment where I need to compromise type safety.
- Alternative Payment Processors: I'm open to using other payment processors if they integrate well with the T3 stack. I'd rather avoid solutions that come with a monthly cost, such as Shopify.
This is my first time posting here, so I hope I've provided enough details. If more information is needed, please let me know. Your insights and suggestions would be immensely appreciated. Thanks in advance!
2 Replies
This is probably not best practice, but to get around the type issues on the Stripe provided code, I put /* eslint-disable */ on the top of the page, and made everything a type any. External page checkout is working, going to see if I can get the payment elements working doing this as well.
I think you're looking for something like this. Typical flow would be
1. Create product with stripe and it's prices
2. When you want checkout create a session and redirect user to that session using stripe-js.
https://stripe.com/docs/checkout/quickstart?client=next