NETCORESAAS
Search…
Creating Stripe Products
We will create 3 products with different pricing, billing periods and trial days.

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. 1.
    Go your products page
  2. 2.
    Set
    1. 1.
      Name: Standard
    2. 2.
      Pricing model: Standard pricing
    3. 3.
      Price: $9
    4. 4.
      Billing period: Monthly
    5. 5.
      Trial: 14 days
    6. 6.
      Add another price for the Yearly tier
  3. 3.
    Repeat step 2 for Enterprise but without trial days
  4. 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.
Copy link
Contents
Demo
Products