Creating Stripe Products
We will create 3 products with different pricing, billing periods and trial days.
Creating Products.mov
13MB
Binary
Video: Creating stripe 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.
- 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
import Product from "@/app/models/pricing/Product";
import Feature from "@/app/models/pricing/Feature";
import { BillingPeriod, PriceType } from "@/app/models/pricing/Price";
const defaultCurrency: string = "usd";
export const defaultProductsDevelopment: Product[] = [
new Product(
"Standard 🔥",
"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",
[
{
id: "price_1HJ5kjDoGxBcf8G2BRSGmVVo",
type: PriceType.Recurring,
billingPeriod: BillingPeriod.Monthly,
price: 9,
currency: defaultCurrency,
trialDays: 14,
product: undefined,
},
{
id: "price_1HJ5kjDoGxBcf8G2SUXpDxnS",
type: PriceType.Recurring,
billingPeriod: BillingPeriod.Yearly,
price: 90,
currency: defaultCurrency,
trialDays: 30,
product: undefined,
},
],
[
new Feature("Feature 1", true),
new Feature("Feature 2", true),
new Feature("Feature 3", true),
new Feature("Feature 4", false),
new Feature("Feature 5", false),
],
false
),
new Product(
"Enterprise 🚀",
"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",
[
{
id: "price_1HJ5l9DoGxBcf8G2RQwzXg0q",
type: PriceType.Recurring,
billingPeriod: BillingPeriod.Monthly,
price: 29,
currency: defaultCurrency,
trialDays: 0,
product: undefined,
},
{
id: "price_1HJ5l9DoGxBcf8G2YzDYNvyP",
type: PriceType.Recurring,
billingPeriod: BillingPeriod.Yearly,
price: 290,
currency: defaultCurrency,
trialDays: 0,
product: undefined,
},
],
[
new Feature("Feature 1", true),
new Feature("Feature 2", true),
new Feature("Feature 3", true),
new Feature("Feature 4", true),
new Feature("Feature 5", false),
],
true
),
new Product(
"Unlimited 🦄",
"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",
[
{
id: "price_1HJ5lWDoGxBcf8G2HUGddqQz",
type: PriceType.OneTime,
billingPeriod: BillingPeriod.Once,
price: 399,
currency: defaultCurrency,
trialDays: 0,
product: undefined,
},
],
[
new Feature("Feature 1", true),
new Feature("Feature 2", true),
new Feature("Feature 3", true),
new Feature("Feature 4", true),
new Feature("Feature 5", true),
],
false
),
];
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.Last modified 2yr ago