Wasp•2mo ago

Stripe Ngrok

@kapa.ai - with the OpenSaaS template, I'm having difficulty with the Credit payment plan. I'm currently using ngrok to get to the bottom of it - should the template work 'out-of-the-box' - or is writing your own middle ware and using ngrok just standard practise? Its worth nothing that nGrok is sending to port 3001, which is something I'm about to check. Would love your oppionon

14 Replies

kapa.ai•2mo ago

Hi @Gareth_Simpson. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The OpenSaaS template is designed to work "out-of-the-box" for Stripe payments, including credit-based payment flows, but there are some important caveats when using tools like ngrok for local development and testing. ngrok & OpenSaaS Stripe Integration: - Using ngrok is a common and recommended practice for exposing your local server to Stripe webhooks during development. The OpenSaaS docs and community recommend using the Stripe CLI or ngrok to forward webhook events to your local server for testing Stripe integrations [stripe integration debugging best practices]. - For the app to work correctly with ngrok, you need to forward both the client (usually port 3000) and the server (port 3001) and set your REACT_APP_API_URL in .env.client to the ngrok URL for your server (port 3001). This ensures the frontend talks to the correct backend endpoint [ngrok... > Answers Part 1]. - If you only forward port 3000 (client), API calls from the frontend to the backend (on 3001) will fail due to CORS or network issues. Forwarding both ports and updating the environment variable is necessary. Middleware: - You do not need to write your own middleware for Stripe or ngrok to get the credit payment plan working. The template provides the necessary backend logic, but you may need to adjust the webhook handling and ensure your Stripe product IDs and environment variables are set up correctly for credits vs. subscriptions [Payment for Credits / Credit Balance System > Answers Part 1]. - If you want to customize the credit logic (e.g., incrementing user credits on successful payment), you can do so in the provided webhook handler code. The template includes examples and references to the relevant code sections [Payment for Credits / Credit Balance System > Answers Part 1]. Summary: - Using ngrok is standard practice for local Stripe webhook testing. - The template should work out-of-the-box if you forward both client and server ports and set the correct environment variables. - No custom middleware is required unless you want to extend or customize the payment logic. If you run into specific issues (e.g., credits not incrementing), double-check your Stripe webhook setup, environment variables, and that the Stripe CLI or ngrok is forwarding events to the correct port. If you need to see example code for credit handling, the community has shared relevant code snippets and links to the OpenSaaS repo [Payment for Credits / Credit Balance System > Answers Part 1]. Let me know if you need help with a specific error or configuration! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Gareth_Simpson, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Gareth_SimpsonOP•2mo ago

@kapa.ai where is the best documentation for this StripeCredit system? Where in my codebase should I be looking?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The best documentation for implementing a Stripe-based credit system with Wasp/OpenSaaS is found in the community discussions and code references, rather than in a single official doc page. Where to look: - Community Guidance: The most detailed guidance is in Discord threads, where users and maintainers discuss how to set up a credit system using Stripe one-time payments. For example, you can see step-by-step advice and code snippets for incrementing user credits after a successful payment. A key reference is this Discord thread, which also links to the relevant code in the OpenSaaS repo:
Payment for Credits / Credit Balance System > Answers Part 1 - Codebase Location:
You should look at your server-side code, specifically the Stripe webhook handler. In the OpenSaaS template, this is typically found in:

  app/src/server/webhooks/stripe.ts

  app/src/server/webhooks/stripe.ts

There, you'll find logic for handling different Stripe events. The code for incrementing credits is usually inside the handler for successful payment events, where you check if the purchased product matches your credits product and then update the user's credits accordingly. - Environment Variables:
Make sure you have a CREDITS_PRICE_ID set in your .env file, and that your webhook handler checks for this ID to distinguish credit purchases from subscriptions. - Example Code:
The Discord thread provides a direct code example for incrementing credits:

  if (line_items?.data[0]?.price?.id === process.env.CREDITS_PRICE_ID) {
    await context.entities.User.updateMany({
      where: { stripeId: userStripeId },
      data: { credits: { increment: 10 } },
    });
  }

  if (line_items?.data[0]?.price?.id === process.env.CREDITS_PRICE_ID) {
    await context.entities.User.updateMany({
      where: { stripeId: userStripeId },
      data: { credits: { increment: 10 } },
    });
  }

This logic should be placed in your Stripe webhook handler, as shown in the referenced code and discussions. Summary:
There is no single official doc page for the Stripe credit system, but the best resources are the Discord threads (with code links) and the stripe.ts webhook handler in your codebase. If you follow the advice and code examples in those threads, you should be able to implement and customize the credit system for your app. If you need more details, check the referenced Discord thread and the linked code in the OpenSaaS repo for real-world examples and troubleshooting tips. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Gareth_Simpson, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Gareth_SimpsonOP•2mo ago

@Carlos - are you around for a query? I'm having massive issues with getting credits working. I'm using Stripe and I'm happy that its working that side - i'm trying to confirm this using ngrok, however, I've hit backend/front end issues - when I when I set my react varaible on the client side to ngrok app url, I can't log in to my app and get 400 bad request errors. When I purchase credits, the application just takes me to the page I was at previously and the credits don't update. I've search discord and there isn't much around, including links to 404 documentation. My life would be a lot simpler if I could manage to get checkout.session.completed to log somewhere!

Carlos•2mo ago

Hey, I'm tagging @miho, he's in charge of support for the next couple of weeks. But we might take a bit of time to respond right now because we're in the middle of preparing a release 🙏

Gareth_SimpsonOP•2mo ago

Thanks - if you have any questions or seek clarification, then please hit me up. Okay, I've confirmed something - listening to http://localhost:3001/payments-webhook via the Stripe CLI, I'm getting 404 post errors.

miho•2mo ago

@Vinny (@Wasp) is our most experienced Stripe guy, can you take a look pls?

Vinny (@Wasp)•2mo ago

@Gareth_Simpson You dont have to use ngrok to use Stripe (but you do if you're using Lemon Squeezy), and you won't neeed to change any of the middleware. Look in the webhooks.ts file for the one-time credit payment event handler. Make sure you're running the local stripe cli running: stripe listen --forward-to localhost:3001/payments-webhook Can you tell me what errors or issues you're having?

Gareth_SimpsonOP•2mo ago

@Vinny (@Wasp) 2025-07-10 14:26:40 --> payment_intent.succeeded [evt_3RjKUlGMy4JZMuXM1lvMlKkd] 2025-07-10 14:26:40 <-- [500] POST http://localhost:3001/stripe-webhook [evt_3RjKUlGMy4JZMuXM1lvMlKkd] both cursor 'auto' agent and the kapa-ai here persistently lead me into a direction to look at customer id's, and I think the 500 error is null for customers on test events because the stripe trigger checkout.session.completed is only minimal data. When I listen on strip-webhook and payments-webhook using the stripe cli - when I try to purchase credits using the actual website as a user, neither of them return anything. I've just tried purchasing a subscription plan, and that isn't setting subsciptionSatus in the database either.

Vinny (@Wasp)•2mo ago

500 is an internal server error, so an error is happening in your server. Can you check your server logs where you ran wasp start and share that error? make sure you run stripe listen --forward-to localhost:3001/payments-webhook as well As far as I understand, the subscriptions are working but the credits one-time-payment is not, right? Did you change the code or update the Stripe package in any way since pulling the template? can you look inside the app/src/package.json and tell me the stripe version you have installed, as well as the API version in src/payment/stripe/stripeClient.ts:

export const stripe = new Stripe(requireNodeEnvVar('STRIPE_API_KEY'), {
  apiVersion: '<your-api-version>',
});

export const stripe = new Stripe(requireNodeEnvVar('STRIPE_API_KEY'), {
  apiVersion: '<your-api-version>',
});

Gareth_SimpsonOP•2mo ago

@Vinny (@Wasp) Re: the subscriptions are working but the credits one-time-payment is not, right? Neither the subs nor credits are working. I rolled back my commit to branch much earlier to test - still having the problem. I never used to get this Plausable logging before - see the message.txt in my stripeClient - "apiVersion: '2022-11-15" - package.json = "stripe": "11.15.0", Re: server logs - I'm having issues getting to repeat on the 500 error -

message.txt

Gareth_SimpsonOP•2mo ago

Okay - Here's where I'm at now - I properly read the instructions for payments integrations and restarted them. I'm currently getting 400 errors - I'm sure about step: Re: You can find your Stripe customer portal URL in the Stripe Dashboard under the 'Customer Portal' settings. The UI has changed a little since the documentation was last updated. I feels like i'm going wrong here: Adding a new customer and getting the 'Customer portal link' - because this method asks to create a new customer - but commented in the .env is # You can find your Stripe customer portal URL in the Stripe Dashboard under the 'Customer Portal' settings - if feel the links are different.

Vinny (@Wasp)•2mo ago

Ok, some questions: 1. are you running the stripe CLI locally with stripe listen --forward-to localhost:3001/payments-webhook? 2. in the terminal window where you ran the stripe CLI, can you share those logs? To me, it looks like everything is working fine. My geuss is a) you're not running your stripe CLI, or b) that you put the wrong ..._PLAN_ID env vars in:

PAYMENTS_HOBBY_SUBSCRIPTION_PLAN_ID=012345
PAYMENTS_PRO_SUBSCRIPTION_PLAN_ID=012345
PAYMENTS_CREDITS_10_PLAN_ID=012345

PAYMENTS_HOBBY_SUBSCRIPTION_PLAN_ID=012345
PAYMENTS_PRO_SUBSCRIPTION_PLAN_ID=012345
PAYMENTS_CREDITS_10_PLAN_ID=012345

Make sure you put in plan IDs from the stripe Dashboard and not product IDs.

Gareth_SimpsonOP•2mo ago

Okay, resolved I think - it was my environment variables. I stumbled across documentation because the Stripe UI has changed. Though the comments in the .env.server are confusing.

Gaming

Programming

Stripe Ngrok

Did you find this page helpful?