Stripe Configuration
Testing

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

Testing the subscription process

  1. Start the Stripe CLI to listen to webhook events

    stripe listen --forward-to localhost:3000/api/stripe/webhook
  2. Open your app in the browser and sign in

  3. 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
  4. Check the Stripe CLI terminal for the webhook event

  5. Check the Stripe dashboard for the new subscription

  6. 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:

database/models/user.model.ts
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.

Full-Stack-Kit © 2024