Customer Portal not displaying?
I'm following:
https://docs.opensaas.sh/guides/payments-integration/#set-up-the-customer-portal
I added:
STRIPE_CUSTOMER_PORTAL_URL=<your-test-customer-portal-link>
but I found that in the .env.client.example:
REACT_APP_STRIPE_CUSTOMER_PORTAL=https://billing.stripe.com/...
Actually I go to the pricing page or the user page and I dont see anything of Manage Subscription.
What I'm doing wrong?OpenSaaS.sh
Payments Integration
Open SaaS is a free, open-source, full-stack SaaS starter kit for React + NodeJS.
37 Replies
Hi @NEROX. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided, it seems like you might be mixing up the environment variables. The
STRIPE_CUSTOMER_PORTAL_URL is likely meant to be set in your server-side .env file, while REACT_APP_STRIPE_CUSTOMER_PORTAL is for the client-side .env.client file.
However, the issue might not be related to the environment variables at all. It could be that the "Manage Subscription" button or link is not properly set up in your application. You should check your application's code to ensure that the link or button is correctly implemented and that it points to the correct URL.
If you're still having trouble, you might find it helpful to refer back to the OpenSaaS documentation (https://docs.opensaas.sh/guides/payments-integration/#set-up-the-customer-portal) or ask for help in the Wasp community.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @NEROX, 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?@kapa.ai for example, in the
AccountPage.tsx I have the following:
function CustomerPortalButton() {
const handleClick = () => {
try {
const schema = z.string().url();
const customerPortalUrl = schema.parse(import.meta.env.REACT_APP_STRIPE_CUSTOMER_PORTAL);
window.open(customerPortalUrl, '_blank');
} catch (err) {
console.error(err);
}
};
and
function UserCurrentPaymentPlan({ subscriptionPlan, subscriptionStatus, datePaid, credits }: UserCurrentPaymentPlanProps) {
if (subscriptionStatus && subscriptionPlan && datePaid) {
return (
<>
<dd className='mt-1 text-sm text-gray-900 dark:text-gray-400 sm:col-span-1 sm:mt-0'>
{getUserSubscriptionStatusDescription({ subscriptionPlan, subscriptionStatus, datePaid })}
</dd>
{subscriptionStatus !== 'deleted' ? <CustomerPortalButton /> : <BuyMoreButton />}
</>
);
}
So, what variable is?Let me check the knowledge base for you. One moment! :books:
----------------------
Based on the code you've provided, it seems like you're using the
REACT_APP_STRIPE_CUSTOMER_PORTAL environment variable in your CustomerPortalButton component. This variable should contain the URL to your Stripe Customer Portal.
The handleClick function in the CustomerPortalButton component is trying to parse this environment variable as a URL using the z.string().url() schema from the zod library. If the parsing is successful, it opens a new browser tab with the parsed URL when the button is clicked.
In the UserCurrentPaymentPlan component, the CustomerPortalButton is rendered if the subscriptionStatus is not 'deleted'. This means that users should be able to see and click the "Manage Subscription" button unless their subscription status is 'deleted'.
If you're not seeing the "Manage Subscription" button on your page, it could be because the subscriptionStatus is 'deleted', or because there's an issue with the way the CustomerPortalButton or UserCurrentPaymentPlan components are being used in your application.
You should ensure that the REACT_APP_STRIPE_CUSTOMER_PORTAL environment variable is correctly set in your .env.client file, and that the UserCurrentPaymentPlan component is receiving the correct props. If you're still having trouble, you might find it helpful to ask for help in the Wasp community.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @NEROX, 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?@kapa.ai Regarding your message: "In the UserCurrentPaymentPlan component, the CustomerPortalButton is rendered if the subscriptionStatus is not 'deleted'. This means that users should be able to see and click the "Manage Subscription" button unless their subscription status is 'deleted'."
I just followed the Stripe integration and it works, so the user is getting subscribed.
Based on that, what kind of info you can provide me?
Let me check the knowledge base for you. One moment! :books:
----------------------
If the Stripe integration is working and the user is getting subscribed, then the
subscriptionStatus should not be 'deleted'. This means that the CustomerPortalButton should be rendered in the UserCurrentPaymentPlan component, and users should be able to see and click the "Manage Subscription" button.
If the button is not appearing as expected, there could be a few reasons:
1. The subscriptionStatus might not be getting passed to the UserCurrentPaymentPlan component correctly. You can check this by logging the subscriptionStatus prop inside the UserCurrentPaymentPlan component and seeing what value it has.
2. There might be an issue with the condition subscriptionStatus !== 'deleted'. If subscriptionStatus is undefined or null, this condition will still be true, but the button might not render correctly. You might want to change the condition to explicitly check if subscriptionStatus is one of the active statuses.
3. There could be a CSS issue that's causing the button to be hidden or not displayed correctly. You can check this by inspecting the page with your browser's developer tools and looking for the CustomerPortalButton in the HTML.
4. The REACT_APP_STRIPE_CUSTOMER_PORTAL environment variable might not be set correctly in your .env.client file, or there might be an issue with the handleClick function in the CustomerPortalButton component. You can check this by logging the customerPortalUrl inside the handleClick function and seeing what URL it's trying to open.
If you're still having trouble, you might find it helpful to ask for help in the Wasp community.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @NEROX, 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?@kapa.ai Ok, I just discovered that the user is generated a Stripe ID but
Subscription Status is empty, why could this happen considering our conversation history?
Let me check the knowledge base for you. One moment! :books:
----------------------
The
subscriptionStatus could be empty if the subscription event from Stripe is not being handled correctly in your application. In the webhook handler, there should be logic to update the subscriptionStatus based on the events received from Stripe.
From the conversation history, it seems that there was a discussion about the sequence of events in Stripe and how they are handled in the application. Specifically, there was a mention of the checkout.session.completed event and the invoice.paid event. If these events are not being handled correctly, or if the webhook is not set up to listen for these events, the subscriptionStatus might not get updated as expected.
You can add logging in your webhook handler to see which events are being received and how they are being handled. This might help you identify if there's an issue with the event handling logic.
Also, ensure that your webhook is correctly set up in Stripe and that it's listening for the necessary events. You can test your webhook using the Stripe CLI as suggested in the conversation history.
If you're still having trouble, you might find it helpful to ask for help in the Wasp community.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @NEROX, 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?@kapa.ai is about: STRIPE_WEBHOOKSECRET=whsec...
?
Let me check the knowledge base for you. One moment! :books:
----------------------
The
STRIPE_WEBHOOK_SECRET is an environment variable that should contain the secret key for your Stripe webhook. This key is used to verify that the webhook requests your application receives are indeed from Stripe.
In the conversation history, there was a discussion about setting up the Stripe webhook. Specifically, a community member mentioned that they had to change the webhook secret in the Stripe Dashboard when they deployed their application to a production environment. They created a new webhook by URL pointing to their server's /stripe-webhook endpoint, and then added the Webhook Secret found on the Stripe dashboard to their .env settings.
You should follow a similar process to set up your Stripe webhook. You can find the Webhook Secret in your Stripe Dashboard, under the Developers > Webhooks section. Once you have the secret, you should add it to your .env file as the STRIPE_WEBHOOK_SECRET environment variable.
Remember to keep this secret safe, as it can be used to impersonate Stripe and send fake webhook events to your application.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @NEROX, 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?@kapa.ai I have followed until https://docs.opensaas.sh/guides/payments-integration/#testing-webhooks-via-the-stripe-cli
And it works correct
But When I try to buy with the
4242... card, all goes correct, sucessfull purchase but the user still not have subscriptionStatus=active is just empty.
What kind of info you can show me about this?OpenSaaS.sh
Payments Integration
Open SaaS is a free, open-source, full-stack SaaS starter kit for React + NodeJS.
Let me check the knowledge base for you. One moment! :books:
----------------------
If the purchase is successful but the
subscriptionStatus is not being updated to 'active', it could be due to the webhook not correctly handling the invoice.paid or checkout.session.completed events from Stripe.
Here are a few things you can check:
1. Webhook Setup: Ensure that your webhook is correctly set up in Stripe and that it's listening for the necessary events. You can test your webhook using the Stripe CLI as suggested in the OpenSaaS documentation (https://docs.opensaas.sh/guides/payments-integration/#testing-webhooks-via-the-stripe-cli).
2. Event Handling: In your webhook handler, there should be logic to update the subscriptionStatus based on the events received from Stripe. You can add logging in your webhook handler to see which events are being received and how they are being handled.
3. Database Updates: Ensure that the user's subscriptionStatus is being correctly updated in your database when the invoice.paid or checkout.session.completed events are received.
4. Stripe API Version: In the conversation history, a community member mentioned that they were using a newer version of the Stripe API and that the checkout.session.completed event was not being triggered as expected. Ensure that you're using a compatible version of the Stripe API.
If you're still having trouble, you might find it helpful to ask for help in the Wasp community.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @NEROX, 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?@kapa.ai What this means?:
^Crootall@Nerox-LpTp:~/apps/minisaas-boilerplate/app$ stripe listen --forward-to localhost:3001/payments-webhook
> Ready! You are using Stripe API Version [2023-08-16]. Your webhook signing secret is whsec_053f6a7ea19ac6eba1b0903796f2a7136acef9bbd128e5f72f8dd0c19398262c (^C to quit)
2024-09-26 17:05:27 --> charge.succeeded [evt_3Q3JKhCUece7yGOW0EGeSc3D]
2024-09-26 17:05:27 <-- [404] POST http://localhost:3001/payments-webhook [evt_3Q3JKhCUece7yGOW0EGeSc3D]
2024-09-26 17:05:27 --> checkout.session.completed [evt_1Q3JKjCUece7yGOWmQnd2jPM]
2024-09-26 17:05:27 <-- [404] POST http://localhost:3001/payments-webhook [evt_1Q3JKjCUece7yGOWmQnd2jPM]
2024-09-26 17:05:27 --> payment_method.attached [evt_1Q3JKjCUece7yGOWkkvTXFmO]
2024-09-26 17:05:27 <-- [404] POST http://localhost:3001/payments-webhook [evt_1Q3JKjCUece7yGOWkkvTXFmO]
2024-09-26 17:05:27 --> customer.subscription.created [evt_1Q3JKkCUece7yGOWizml46OM]
2024-09-26 17:05:27 <-- [404] POST http://localhost:3001/payments-webhook [evt_1Q3JKkCUece7yGOWizml46OM]
2024-09-26 17:05:27 --> customer.subscription.updated [evt_1Q3JKkCUece7yGOWVoJ75kNT]
2024-09-26 17:05:27 <-- [404] POST http://localhost:3001/payments-webhook [evt_1Q3JKkCUece7yGOWVoJ75kNT]
2024-09-26 17:05:27 --> payment_intent.succeeded [evt_3Q3JKhCUece7yGOW0990ywu3]
2024-09-26 17:05:27 <-- [404] POST http://localhost:3001/payments-webhook [evt_3Q3JKhCUece7yGOW0990ywu3]
2024-09-26 17:05:28 --> payment_intent.created [evt_3Q3JKhCUece7yGOW0XN9CrCq]
2024-09-26 17:05:28 <-- [404] POST http://localhost:3001/payments-webhook [evt_3Q3JKhCUece7yGOW0XN9CrCq]
2024-09-26 17:05:28 --> invoice.created [evt_1Q3JKkCUece7yGOWlighX9Ok]
2024-09-26 17:05:28 <-- [404] POST http://localhost:3001/payments-webhook [evt_1Q3JKkCUece7yGOWlighX9Ok]
2024-09-26 17:05:28 --> invoice.finalized [evt_1Q3JKkCUece7yGOWmEbiAmsf]
2024-09-26 17:05:28 <-- [404] POST http://localhost:3001/payments-webhook [evt_1Q3JKkCUece7yGOWmEbiAmsf]
2024-09-26 17:05:28 --> invoice.updated [evt_1Q3JKkCUece7yGOWOdnELvGH]
2024-09-26 17:05:28 <-- [404] POST http://localhost:3001/payments-webhook [evt_1Q3JKkCUece7yGOWOdnELvGH]
2024-09-26 17:05:28 --> invoice.paid [evt_1Q3JKkCUece7yGOWrP9ZoKZU]
2024-09-26 17:05:28 <-- [404] POST http://localhost:3001/payments-webhook [evt_1Q3JKkCUece7yGOWrP9ZoKZU]
2024-09-26 17:05:28 --> invoice.payment_succeeded [evt_1Q3JKlCUece7yGOWFTzrWGf1]
2024-09-26 17:05:28 <-- [404] POST http://localhost:3001/payments-webhook [evt_1Q3JKlCUece7yGOWFTzrWGf1]
2024-09-26 17:07:36 --> charge.succeeded [evt_3Q3JMnCUece7yGOW0Y53Qftk]
2024-09-26 17:07:36 <-- [404] POST http://localhost:3001/payments-webhook [evt_3Q3JMnCUece7yGOW0Y53Qftk]
2024-09-26 17:07:36 --> payment_intent.succeeded [evt_3Q3JMnCUece7yGOW0pM4PVsM]
2024-09-26 17:07:36 <-- [404] POST http://localhost:3001/payments-webhook [evt_3Q3JMnCUece7yGOW0pM4PVsM]
2024-09-26 17:07:36 --> payment_intent.created [evt_3Q3JMnCUece7yGOW09oBXPVT]
2024-09-26 17:07:36 <-- [404] POST http://localhost:3001/payments-webhook [evt_3Q3JMnCUece7yGOW09oBXPVT]Wohooo @NEROX, you just became a Waspeteer level 5!
Let me check the knowledge base for you. One moment! :books:
----------------------
The output you're seeing is from the Stripe CLI when it's set up to listen for events and forward them to your local server. Each line represents an event that Stripe sent to your webhook.
The
--> symbol indicates an event that was sent from Stripe to your webhook. The [404] POST <http://localhost:3001/payments-webhook> part indicates that your local server responded with a 404 status code, which means it could not find the requested resource.
In your case, it seems like your server is not able to handle the requests being forwarded to <http://localhost:3001/payments-webhook.> This could be because the /payments-webhook route does not exist on your server, or because there's an issue with the way your server is set up to handle these requests.
Here are a few things you can check:
1. Webhook Route: Ensure that the /payments-webhook route exists on your server and is set up to handle POST requests.
2. Server Setup: Ensure that your server is running and is set up to handle requests on the port you're using (3001 in this case).
3. Event Handling: Ensure that your server is correctly handling the events it receives from Stripe. You should have logic in place to handle each of the events you're interested in (such as invoice.paid and checkout.session.completed), and to update the user's subscriptionStatus accordingly.
If you're still having trouble, you might find it helpful to ask for help in the Wasp community.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @NEROX, 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?ok will check all that later
@kapa.ai Following the entire tutorial at https://docs.opensaas.sh/guides/payments-integration/#stripe
I think I have done everything correctly.
I have checked that:
STRIPE_KEY, STRIPE_WEBHOOK_SECRET, STRIPE_CUSTOMER_PORTAL_URL, and the plans...
But I keep getting 404:
2024-09-26 18:52:22 --> invoice.created [evt_1Q3L0DCUece7yGOWO7kQxNlg]
2024-09-26 18:52:22 <-- [404] POST http://localhost:3001/payments-webhook [evt_1Q3L0DCUece7yGOWO7kQxNlg]
--> checkout.session.completed [evt_1Q3L0ICUece7yGOWqopJwQeI]
2024-09-26 18:52:28 <-- [404] POST http://localhost:3001/payments-webhook [evt_1Q3L0ICUece7yGOWqopJwQeI]
What can be wrong?OpenSaaS.sh
Payments Integration
Open SaaS is a free, open-source, full-stack SaaS starter kit for React + NodeJS.
Let me check the knowledge base for you. One moment! :books:
----------------------
The 404 error indicates that the server cannot find the requested resource, in this case, the
/payments-webhook endpoint. Here are a few things you can check:
1. Webhook Endpoint: Ensure that the /payments-webhook endpoint exists in your server and is correctly set up to handle POST requests. This endpoint should be defined in your server code.
2. Server Running: Make sure your server is running and listening on the correct port (3001 in your case).
3. Stripe CLI: Ensure that the Stripe CLI is correctly forwarding events to your local server. The command should be stripe listen --forward-to localhost:3001/payments-webhook.
4. Environment Variables: Check that the STRIPE_WEBHOOK_SECRET environment variable is correctly set in your .env file and matches the secret key of your Stripe webhook.
If you've checked all of these and are still encountering the issue, it might be helpful to ask for further assistance in the Wasp community.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @NEROX, 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?Hmm, maybe something with new stripe update? Im getting when trying to purchase a plan
Only starting from today, I've been receiving the same errors. I'm looking into this as well
@NEROX I believe you are using wrong Stripe API version [2023-08-16]
check to verify
Wohooo @sion0921, you just became a Waspeteer level 3!
:be:
@sion0921 How did you updated the Stripe API?
Like you, @NEROX , I'm also dealing with the same issue and haven't found a solution yet.
Once a solution is found, I'll provide an update
@sion0921 Which of these methods have you tried?
https://docs.stripe.com/stripe-cli#install
Get started with the Stripe CLI
Build, test, and manage your Stripe integration directly from the command line.
Homebrew failed and I think there is no solution:
- https://github.com/Homebrew/homebrew-core/issues/128554
- https://github.com/stripe/stripe-cli/issues/609
I also tried Linux steps but the latest release of the Stripe CLI https://github.com/stripe/stripe-cli/releases/tag/v1.21.7 doesn't contain the Linux binaries.
I saw one (3 week ago) that it contains the Linux binaries: https://github.com/stripe/stripe-cli/releases/tag/v1.21.5
rootall@Nerox-LpTp:~/apps/minisaas-boilerplate$ stripe --version
stripe version 1.21.5
But there are still 404🥹All good, solved ✅ It's 404 because our wasp is outdated @NEROX
In main.wasp try:
I've changed httpRoute
Solved it for me
I'm just crying that it worked🥹 🥹 🥹
@sion0921 Does the manage button work and take you to the portal?
When I click I got this error
@kapa.ai I have configured stripe, I get the manage subscription button but it doesn't work, it gives this error:
PricingPage.tsx:76 ZodError: [
{
“code": ‘invalid_type’,
“expected": ‘string’,
“received": ‘undefined’,
“path": [],
“message": ”required”
}
]Let me check the knowledge base for you. One moment! :books:
----------------------
The error message you're seeing is from the
zod library, which is used for schema validation in your application. The error is indicating that a required string value is undefined.
In your PricingPage.tsx file, it seems like you're trying to parse a value as a string using zod, but the value is undefined. This could be because an environment variable or a prop that's expected to be a string is not defined.
Here's what you can check:
1. Environment Variables: Ensure that all required environment variables are correctly set in your .env and .env.client files. In the context of Stripe and the "Manage Subscription" button, you might be using the REACT_APP_STRIPE_CUSTOMER_PORTAL environment variable. Make sure it's defined in your .env.client file.
2. Props: If you're passing props to a component, make sure all required props are provided and that they have the correct types.
3. Zod Schema: Check the zod schema you're using to parse the value. Make sure it matches the type of the value you're expecting.
If you're still having trouble, you might find it helpful to ask for help in the Wasp community.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @NEROX, 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?@kapa.ai What are the customer portal variables in
env.server and env.client? I think there have been updates, check!Let me check the knowledge base for you. One moment! :books:
----------------------
The customer portal variables in
.env.server and .env.client are environment variables that are used to configure the Stripe Customer Portal in your Wasp application.
In the .env.server file, you might have the STRIPE_WEBHOOK_SECRET variable, which is used to verify the webhook requests from Stripe.
In the .env.client file, you might have the REACT_APP_STRIPE_CUSTOMER_PORTAL variable, which should contain the URL to your Stripe Customer Portal. This variable is used in the client-side code to redirect users to the Stripe Customer Portal.
Here's an example of how these variables might be defined in your .env files:
.env.server
.env.client
Remember to replace your-stripe-webhook-secret and your-stripe-customer-portal-url with your actual Stripe webhook secret and Customer Portal URL.
Please note that these files should not be committed to version control, and they are already ignored by default in the .gitignore file that comes with Wasp.
For more information on how to use environment variables in Wasp, you can refer to the Wasp documentation (https://wasp-lang.dev/docs/project/env-vars).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @NEROX, 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?@kapa.ai I'm crying because anything of this works
Let me check the knowledge base for you. One moment! :books:
----------------------
I'm really sorry to hear that you're having a tough time with this. Setting up and troubleshooting technical issues can sometimes be frustrating, but don't worry, we're here to help!
Here are a few general steps you can take when troubleshooting:
1. Double-check your setup: Ensure that you've followed all the steps in the tutorial or documentation correctly. Sometimes, a small missed step or typo can cause issues.
2. Look at the error messages: They often provide clues about what's going wrong. You can usually find more information about the error by searching for it online.
3. Ask for help: If you're stuck, don't hesitate to ask for help. You can ask questions in the Wasp community or other programming communities. When asking for help, try to provide as much relevant information as possible to make it easier for others to understand your problem.
Remember, every developer encounters difficulties and obstacles. It's a normal part of the learning process. Don't be too hard on yourself!
If you're still having trouble with your Wasp app, could you please provide more details about the issue you're facing? That way, I can give you more specific guidance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @NEROX, 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?
✅ Fixed: I was all the time working on the
env.client.example, I had no env.client created:laughboi: :laughboi: :laughboi:🤷♀️
Hahaha, classic!
Glad you got it working