MyApp

Getting Started

Introduction

Content & Marketing

Add Blog PostAdd Blog AuthorAdd TestimonialsCustomize HeroAdd FAQ Items

Payments

Add Stripe ProductCreate Stripe SubscriptionAdd Stripe CouponCustomize CheckoutTest Payments Locally

Authentication

Customize Sign-InAdd OAuthImplement RolesProtect Routes

Content Management

Add Doc PageCreate Doc SectionCustomize Theme

Customization

Change ColorsAdd FontCustomize EmailsUse PostHog Analytics

Deployment

Deploy VercelDatabase Migrations

Advanced

Server ActionsAdd Rate Limiting
MyApp

Add Stripe Product

Learn how to create and configure a new product in Stripe for your pricing page

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:

  1. Scroll to "Marketing features" section
  2. Click "Add feature"
  3. 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

How is this guide ?

Last updated on

Add FAQ Items

Learn how to add and customize frequently asked questions on your homepage

Create Stripe Subscription

Learn how to set up recurring subscription billing with Stripe

On this page

Prerequisites
Steps
Create Product in Stripe Dashboard
Add Marketing Features
Activate the Product
Verify Product Appears
Product Display
Common Issues
Product Not Showing
Price Not Displaying Correctly
Checkout Button Not Working
Next Steps