Testing Stripe Subscriptions
Once you created subscription plans in Stripe and setting up Full-Stack-Kit to use them, you can test the subscription process by authenticating to your app and subscribing to a plan.
Prerequisites
- You have created subscription plans in Stripe
- You have set up Full-Stack-Kit to use Stripe (set up the stripe environment variables)
- You have set up Full-Stack-Kit to use the subscription plans (in the
app/app.config.ts
file) - You have set up Stripe CLI to listen to webhook events on your loacal machine (For development only)
- You have set up the webhook endpoint in your Stripe dashboard (For production only)
- You have set up the webhook secret in the environment variables
- For development you will get the secret from the Stripe CLI after running the
stripe listen
command - For production you will get the secret from the Stripe dashboard, after setting up the webhook endpoint
- For development you will get the secret from the Stripe CLI after running the
Testing the subscription process
-
Start the Stripe CLI to listen to webhook events
stripe listen --forward-to localhost:3000/api/stripe/webhook
-
Open your app in the browser and sign in
-
Go to the
/billing
page and subscribe to a plan:- You can use the test card number
4242 4242 4242 4242
with any future expiration date and any CVC code
- You can use the test card number
-
Check the Stripe CLI terminal for the webhook event
-
Check the Stripe dashboard for the new subscription
-
Check the app for the new subscription
You can play around with the subscription process by subscribing to different plans, updating the subscription, canceling the subscription, and resubscribing to a different plan.
How do you know if a user is subscribed to a plan?
You can check if a user is subscribed to a plan by checking the subscription
object in the user's data.
If the subscription
object is null
or not exists, the user is not subscribed to any plan.
If the subscription
object exists, the user is subscribed to a plan.
You can also check the subscription
object to see the current status of the subscription and the current plan.
Here is the subscription
object structure:
export interface User {
// ...
subscription: {
id: string;
status:
| "active"
| "canceled"
| "incomplete"
| "incomplete_expired"
| "past_due"
| "trialing"
| "unpaid";
priceId: string;
currentPeriodStart: number;
currentPeriodEnd: number;
cancelAtPeriodEnd: boolean;
} | null;
}
If you run into any issues, check the logs in the Stripe CLI terminal, the Stripe dashboard, and the app logs.
If you have question or you find a bug, feel free to join the community discord and ask for help. We are here to help you ship your app faster and with less bugs.