Plainform

Learn how to add a new product to your Stripe account and display it on your pricing page.

Prerequisites

Stripe account set up and connected
Stripe API keys configured in .env
Access to Stripe Dashboard

Steps

Create Product in Stripe Dashboard

Navigate to your Stripe Dashboard:

https://dashboard.stripe.com/products

Click "Add product" and fill in the details:

Product Information:

Name: Your product name (e.g., "Pro Plan", "Starter Package")
Description: Brief description of what's included
Image: Optional product image (recommended: 1200x630px)

Pricing:

Pricing model: Standard pricing
Price: Amount in your currency
Billing period: One-time or Recurring (monthly/yearly)
Currency: USD, EUR, etc.

For subscription products, choose "Recurring" and select the billing interval (month or year).

Add Marketing Features

Marketing features are displayed as bullet points on your pricing cards. Add them in the Stripe Dashboard:

Scroll to "Marketing features" section
Click "Add feature"
Add feature descriptions (one per line):

Unlimited projects
Priority support
Advanced analytics
Custom integrations

These features will automatically appear on your pricing page as checkmark bullet points.

Keep features concise (3-5 words each) and focus on customer benefits rather than technical details.

Activate the Product

Ensure the product is marked as "Active" in the Stripe Dashboard. Only active products will appear in your API responses.

Verify Product Appears

Your product will automatically appear on the pricing page once it's active in Stripe. The app fetches products from:

GET /api/stripe/products

Start your dev server and check the pricing section:

npm run dev

Navigate to http://localhost:3000/#buy to see your new product.

Product Display

Products are displayed in the order they were created (oldest first). The pricing component automatically:

Fetches all active products
Displays product name, price, and description
Shows the default price
Includes a "Get Started" button that links to checkout

Common Issues

Product Not Showing

Verify the product is marked as "Active" in Stripe Dashboard
Check that you have a default price set
Ensure your Stripe API keys are correctly configured in .env
Restart your dev server after adding products

Price Not Displaying Correctly

Confirm the default price is set in Stripe Dashboard
Check that the currency matches your expected format
Verify the price is active (not archived)

Checkout Button Not Working

Ensure the product has a valid default price
Check browser console for errors
Verify Stripe publishable key is set in environment variables

Next Steps

Create Subscription - Set up recurring billing
Add Coupon - Create discount codes
Test Payments Locally - Test with Stripe CLI

Add Stripe Product