💰 Pricing Component

Explore the usage of the Pricing component to manage and display different pricing plans in your applications.

Example Pricing Usage

Below is an example of how to use the Pricing component with the configuration from settings.js.

Example Pricing Component Usage

1 import Pricing from '@/shared/component/Pricing';

3 <Pricing paymentTemplate={config.paymentTemplate} />

Configuration

The Pricing component utilizes the paymentTemplate from settings.js to configure the pricing plans. Ensure you have the correct Stripe configuration to handle payments.

Configuration in settings.js

1 const config = {

2   paymentTemplate: {

3     title: 'Your Pricing Title',

4     plans: [{

5       priceId: 'stripe_price_id',

6       name: 'Plan Name',

7       description: 'Plan Description',

8       price: 100,

9       priceAnchor: 120,

10       features: [{ name: 'Feature 1' }, { name: 'Feature 2' }],

11     }],

12   },

13 };

15 export default config;

Warning: Ensure that Stripe is correctly configured to handle payments. Misconfiguration can lead to payment failures.

For detailed setup instructions, refer to the Stripe Setup Tutorial.

Additional Resources

For more information on pricing configurations and handling payments, check out the Stripe Documentation.

Explore our full documentation for detailed guides on using our components effectively.