---
name: add-payments-with-your-own-checkout
description: "A free plan plus paid tiers, paid on your own page with Stripe Elements, never a hosted checkout."
---

# Add payments with your own checkout

Purpose:: Visitors start free and can upgrade to a paid plan on your own checkout page.

Rules::
- One free plan + paid tiers, each with monthly credits in product metadata
- Your own checkout and billing pages (Stripe Elements); never send visitors to a hosted page
- Test mode first, live once the domain is live; keys never printed

Inventory::
- Stripe API keys, your competitors' pricing
- Your app's user table (plan name, credits, customer id)

Steps::
1. Pick the plans from competitor pricing
2. Create products and prices with plan_name and monthly_credits metadata
3. On signup: create the customer and put them on the free plan
4. Billing page: card form (Elements), subscribe, cancel, invoices
5. Webhook: subscription created, updated, deleted and invoice paid update the user's plan
6. Test: sign up, upgrade with a test card, cancel; reply with plans and mode

Metrics::
- New signups land on the free plan
- Upgrading changes the plan and credits in the app

Source:: https://isklls.com/skills/add-payments-with-your-own-checkout (iSklls, free skill library)