The configuration in subscription-pricing.ts consists of the following settings for each plan:

Go to the Stripe Dashboard to create a new subscription for each plan. The price identifier is used to identify the plan in the application. The price identifier is unique to each plan and can be found in the Stripe Dashboard.

Then copy the price identifier and paste it into the monthly and annually fields of the priceId in the subscription-pricing.ts file.

Stripe Copy Price ID
subscription-pricing.ts
export const Subscriptions = {
  plans: [
     {
        name: 'Pro',                                          // Display name of the pricing plan
        id: 'tier-pro',                                       // Unique identifier for the plan
        priceId: {
           monthly: process.env.NODE_ENV === 'development'
           ? 'price_1234'                                     // The price identifier to test in the development environment
           : 'price_5678',                                    // The price identifier to test in the development environment
           annually: process.env.NODE_ENV === 'development'
           ? 'price_1234'                                     // The price identifier to test in the development environment
           : 'price_5678',                                    // The price identifier to test in the development environment
        },
        amount: {
           monthly: "$40",                                    // The regular monthly price of the plan
           annually: "$400",                                  // The regular annual price of the plan
        },
        discountId: {                                         // Optional discount coupon identifier (use the discount Id)
           monthly: process.env.NODE_ENV === 'development'
           ? 'price_1234'                                     // The price identifier to test in the development environment
           : 'price_5678',                                    // The price identifier to test in the development environment
           annually: process.env.NODE_ENV === 'development'
           ? 'price_1234'                                     // The price identifier to test in the development environment
           : 'price_5678',                                    // The price identifier to test in the development environment
        };                                                    // Optional discount coupon discount amount
        discount: {
              monthly: '$20',                                 // Optional discounted monthly price
              annually: '$200',                               // Optional discounted annual price
        };
        isMostPopular: true,								            // Boolean flag to highlight the most popular plan
        features: [
           { name: 'Feature 1', available: true },			   // Array of features included in the plan
           { name: 'Feature 2', available: true },
           { name: 'Feature 3', available: true },
        ],
     },
	...
	],
};

The SubscriptionPricing component is used to display the one-time payment plans in the application.

Was this page helpful?

One Time PurchaseTesting Payments