Subscriptions

After you have created your products in Stripe, add their price IDs to the Volca app.config.ts file. Each environment in the config has a list of available plans and price ids.

// app.config.ts

plans: [
  {
    id: PlanId.BASIC,
    stripePriceId: '<price-id>',
  },
  {
    id: PlanId.PLUS,
    stripePriceId: '<price-id>',
  },
  {
    id: PlanId.PREMIUM,
    stripePriceId: '<price-id>',
  },
],
              

After you have configured your pricing plans in the backend, it's time to configure how they are shown to the user.

// clients/dashboard/src/pages/onboarding.tsx

const plans: PlanDescriptionMap = {
  BASIC: {
    title: 'Basic',
    description: 'The basic plan',
    price: 9.99,
    features: ['Feature 1', 'Feature 2', 'Feature 3'],
  },
  PLUS: {
    title: 'Plus',
    description: 'The plus plan',
    price: 29.99,
    features: ['Feature 1', 'Feature 2', 'Feature 3'],
  },
  PREMIUM: {
    title: 'Premium',
    description: 'The premium plan',
    price: 59.99,
    features: ['Feature 1', 'Feature 2', 'Feature 3'],
  },
};