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

Go to the Stripe Dashboard to create a new price 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 priceId field in the one-time-pricing.ts file.

Stripe Copy Price ID
one-time-pricing.ts
export const OneTimePayments: OneTimePaymentConfig = {
	display: {
		currency: 'USD',										// The currency of the plan
		showTrialDays: true,									// Boolean flag to show the trial days
	},
	plans: [
		{
			name: 'Pro',										// Display name of the pricing plan
			id: 'pro',											// Unique identifier for the plan
  			type: 'paid',										// The type of plan (paid, free, trial or enterprise)
			description: 'Best for professionals',				// The description of the plan
			isMostPopular: true,								// Boolean flag to highlight the most popular plan
			pricing: {
				amount: 290,									// The regular price of the plan
				priceId: process.env.NODE_ENV === 'development'
				? 'price_1234' 									// The price identifier to test in the development environment
				: 'price_5678',									// The price identifier to use in the production environment
				discount: {
					amount: 232,								// The discounted price of the plan
					priceId: process.env.NODE_ENV === 'development'
					? 'price_2345' 								// The discount price identifier to test in the development environment
					: 'price_6789',								// The discount price identifier to use in the production environment
					percentage: 20,								// The percentage discount of the plan
					label: 'Launch Special',					// The label of the discount
				},
			},
			features: [											// Array of features included in the plan
				{ name: 'Feature 1', description: 'Feature 1 description', available: true, },
				{ name: 'Feature 2', available: true },
				{ name: 'Feature 3', available: true },
			],
		},
	...
	],
}

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