Skip to content
iSkllsSign up free

Add payments with your own checkout

A free plan plus paid tiers, paid on your own page with Stripe Elements, never a hosted checkout.

6 steps3 rulesStep 8 of 15 in Ship a website

Use this skill

Read https://isklls.com/s/add-payments-with-your-own-checkout and follow it.

Paste it into Claude, ChatGPT, Codex, Gemini or any agent that can open a link, then add your task.

Save.md
add-payments-with-your-own-checkout.md
Raw

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. 1Pick the plans from competitor pricing
  2. 2Create products and prices with plan_name and monthly_credits metadata
  3. 3On signup: create the customer and put them on the free plan
  4. 4Billing page: card form (Elements), subscribe, cancel, invoices
  5. 5Webhook: subscription created, updated, deleted and invoice paid update the user's plan
  6. 6Test: 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
Website.md

Purpose:: List the pages of the first website.

Steps::

  1. 1. Start with home, pricing
  2. 2. Add signup and signin if users get an account
  3. 3. Add the 1-3 pages where the idea and the success metric happen
  4. 4. Reply as one comma separated line

Plan a first sitemap

The 4-7 pages your first website needs, so every CTA and success metric has a page.

Website.md

Purpose:: Lock the main inspiration URL: the live site your first website follows in structure and craft.

Steps::

  1. 1. Think of 3 famous products that sell something close to your idea
  2. 2. Open each; note how the home page puts the main action first
  3. 3. Keep the one with the clearest, most detailed home
  4. 4. Reply with its homepage URL and one line on what you take from it

Pick an inspiration website

Lock one famous, live product site whose structure your first website will follow.

Website.md

Purpose:: Say in one concrete sentence why this project is a perfect fit for you.

Steps::

  1. 1. Read the project's purpose
  2. 2. Read what you are about and what you have
  3. 3. Find the overlap: what you already have that this project can offer
  4. 4. Write: we have <X> (evidence), so <project> offers <Y> to <buyer>

Prove the fit in one sentence

Say why this project is a perfect fit for you, with evidence of what you already have.

Website.md

Purpose:: Build the perfect alternative to your direct competitors: their best parts plus what visitors in this space are used to.

Steps::

  1. 1. Per competitor: note the landing, pages and flow
  2. 2. List what they all share (traditional) and the best part of each
  3. 3. Build the header, footer and home, then the other public pages from that list
  4. 4. Deploy; screenshot desktop and mobile; compare with the competitor screenshots; fix

Build the best alternative frontend

Take the best part of each direct competitor plus what visitors in the space expect, and build it better.