Pricing

Components: Pricing

A pricing section to display the different plans available. Add or more plans inside strafer.config.ts. It will also display the number of coupon redemptions left if you have setup a coupon.

popular is a boolean to indicate the most popular plan. It will be displayed with a badge. proFeatures is an array of features that will be displayed with a plus icon. It can be used to display additional features for better plans.

strafer.config.ts

// ...
stripe: {
  plans: [{
    name: 'Starter',
    description: 'The perfect starter to get you up and running in minutes',
    popular: false,
    price: 250,
    discountedPrice: 150,
    features: sharedFeatures,
    priceId: 'price_1234',
  }, {
    name: 'Pro',
    description: 'The ultimate package for your business',
    popular: true,
    price: 350,
    discountedPrice: 250,
    features: sharedFeatures,
    proFeatures,
    priceId: 'price_123'
  }],
}

Pricing.tsx

import Pricing from "@/components/Pricing";
 
<Pricing />

Pricing