Pricing

The <PricePlans> component renders a pricing table similar to that featured on the Gravity pricing page using your Stripe plans from /config.

The styling is optimised for three plans, with one plan highlighted in the middle. You may need to adjust the styling if you want to add more than 3 plans.

Preview

Code

<PricePlans plans={ plans }/>

To list your features for each plan, modify the array of sample features added to your config file during the setup process.

Config

const config = {

  period_selector: true, // show monthly/yearly switch 
  ppp_banner: false, // show a ppp banner
  currency_selector: true, // show currency selector

}

Period Selector

Show a toggle switch to choose between monthly or yearly pricing by enabling period_selector inside the config object in <PricePlans/>

Depending on the interval key value (month or year), this will show or hide plans from your config.

Purchasing Power Parity Banner

If you offer purchasing power parity pricing, you can display a banner message with the coupon code inside the component by enabling ppp_banner in the config. The text inside the banner can be customised inside <PricePlans/>

<Banner text='🇹🇭 We support purchasing power parity for citizens of Thailand. Use coupon THAI50 at checkout'/>

Currency Selector

To switch between different currencies, enable the currency_selector in config.

This will render a currency selector with a list of currencies based on your Stripe plans. By default, flags for USD, GBP, EUR and CAD are enabled, but you can import more flags into the component to support more currencies.

import { US, GB, EU, CA } from 'country-flag-icons/react/3x2' // add your flag import here

export function CurrencySelector(props){

  // add your currency flag pair here
  const flags = { usd: US, gbp: GB, eur: EU, cad: CA }

});