Creating Stripe Products

Demo
Creating Products.mov
13MB
Binary
Video: Creating stripe Products
Products
Product Name
Price Type
Billing Period
Price
Trial
Standard
Recurring
Monthly
$9
14 days
Standard
Recurring
Yearly
$90 (2 months free)
30 days
Enterprise
Recurring
Monthly
$29
❌
Enterprise
Recurring
Yearly
$290 (2 months free)
❌
Ultimate
One Time
Once
$399
❌
1.Go your products page​
2.Set
1.Name: Standard
2.Pricing model: Standard pricing
3.Price: $9
4.Billing period: Monthly
5.Trial: 14 days
6.Add another price for the Yearly tier 
3.Repeat step 2 for Enterprise but without trial days
4.Now for Ultimate, set One time instead of Recurring
It should look something like this:
Go to ClientApp/src/store/modules/pricing/default-pricing.Development.ts and change the price id's.
default-pricing.Development.ts
1
import Product from "@/app/models/pricing/Product";
2
import Feature from "@/app/models/pricing/Feature";
3
import { BillingPeriod, PriceType } from "@/app/models/pricing/Price";
4
​
5
const defaultCurrency: string = "usd";
6
export const defaultProductsDevelopment: Product[] = [
7
  new Product(
8
    "Standard 🔥",
9
    "border-orange-300 bg-orange-100 inline-flex px-4 py-1 rounded-full text-sm leading-5 font-semibold tracking-wide uppercase border text-indigo-600",
10
    [
11
      {
12
        id: "price_1HJ5kjDoGxBcf8G2BRSGmVVo",
13
        type: PriceType.Recurring,
14
        billingPeriod: BillingPeriod.Monthly,
15
        price: 9,
16
        currency: defaultCurrency,
17
        trialDays: 14,
18
        product: undefined,
19
      },
20
      {
21
        id: "price_1HJ5kjDoGxBcf8G2SUXpDxnS",
22
        type: PriceType.Recurring,
23
        billingPeriod: BillingPeriod.Yearly,
24
        price: 90,
25
        currency: defaultCurrency,
26
        trialDays: 30,
27
        product: undefined,
28
      },
29
    ],
30
    [
31
      new Feature("Feature 1", true),
32
      new Feature("Feature 2", true),
33
      new Feature("Feature 3", true),
34
      new Feature("Feature 4", false),
35
      new Feature("Feature 5", false),
36
    ],
37
    false
38
  ),
39
  new Product(
40
    "Enterprise 🚀",
41
    "border-green-300 bg-green-100 inline-flex px-4 py-1 rounded-full text-sm leading-5 font-semibold tracking-wide uppercase border text-indigo-600",
42
    [
43
      {
44
        id: "price_1HJ5l9DoGxBcf8G2RQwzXg0q",
45
        type: PriceType.Recurring,
46
        billingPeriod: BillingPeriod.Monthly,
47
        price: 29,
48
        currency: defaultCurrency,
49
        trialDays: 0,
50
        product: undefined,
51
      },
52
      {
53
        id: "price_1HJ5l9DoGxBcf8G2YzDYNvyP",
54
        type: PriceType.Recurring,
55
        billingPeriod: BillingPeriod.Yearly,
56
        price: 290,
57
        currency: defaultCurrency,
58
        trialDays: 0,
59
        product: undefined,
60
      },
61
    ],
62
    [
63
      new Feature("Feature 1", true),
64
      new Feature("Feature 2", true),
65
      new Feature("Feature 3", true),
66
      new Feature("Feature 4", true),
67
      new Feature("Feature 5", false),
68
    ],
69
    true
70
  ),
71
  new Product(
72
    "Unlimited 🦄",
73
    "border-indigo-300 bg-indigo-100 inline-flex px-4 py-1 rounded-full text-sm leading-5 font-semibold tracking-wide uppercase border text-indigo-600",
74
    [
75
      {
76
        id: "price_1HJ5lWDoGxBcf8G2HUGddqQz",
77
        type: PriceType.OneTime,
78
        billingPeriod: BillingPeriod.Once,
79
        price: 399,
80
        currency: defaultCurrency,
81
        trialDays: 0,
82
        product: undefined,
83
      },
84
    ],
85
    [
86
      new Feature("Feature 1", true),
87
      new Feature("Feature 2", true),
88
      new Feature("Feature 3", true),
89
      new Feature("Feature 4", true),
90
      new Feature("Feature 5", true),
91
    ],
92
    false
93
  ),
94
];
95
​
Copied!
Your pricing page should be:
Don't forget to update ClientApp/src/store/modules/pricing/default-pricing.ts and set your LIVE stripe API Keys.

Getting the API Keys

Creating the Customer Portal

Last modified 1yr ago

Copy link

Contents

Demo

Products