AddThisFeature

Stripe Checkout

Take payment through a Stripe-hosted checkout with prices the browser cannot alter.

involved Payments & Finance

What it adds

A server-initiated Stripe-hosted checkout session carrying the correct customer, trusted pricing, and a return path that resolves the same regardless of when confirmation arrives.

What your agent is told to do

5
  1. 1

    Create the checkout session on the server. Take only an identifier for what is being bought from the browser, then look up the price, currency, quantity limits, and tax treatment from the app's own records.

  2. 2

    Resolve the billing customer before creating the session: reuse the one already recorded for this workspace or account, and create a new one only when none exists. Store the identifier the moment it is known so a retry does not create a second customer.

  3. 3

    Carry the app's own reference for the purchase into the session so the confirmation that arrives later can be matched back to a workspace, a user, and an intended outcome without guessing.

  4. 4

    Grant nothing on the browser returning to the success page. Access is granted only when a verified server-side confirmation says the money was taken, which may arrive before, during, or long after the redirect.

  5. 5

    Reconciling the ongoing state of customers, subscriptions, and invoices belongs to the Stripe Customer and Subscription Sync brief. This one ends at a confirmed first payment; do not build a second event handler that competes with it.

Edge cases it handles

8
  • Anything the browser sends about price, quantity, currency, or discount must be discarded. Read those from server-held records, or a user can edit the request and buy at a price you never offered.
  • A user can abandon a checkout, let it expire, complete it, or pay by a method that settles hours later. Each of those needs a defined local state, and the pending case must not look identical to a failure.
  • Confirmations from the provider must be verified as genuine before anything is granted, and must be safe to receive more than once. Providers retry, so the same confirmation arriving twice must not create two purchases or two subscriptions.
  • The redirect back and the server confirmation race each other. The success page must handle arriving first by showing a pending state that resolves on its own, and handle arriving second by showing the finished result, without ever telling the user something contradictory.
  • The same person clicking through checkout twice, or reloading the initiation, must not end up with two customers or two charges. Make session creation idempotent against the app's own reference.
  • If the provider is down or the session cannot be created, say so plainly and leave the user's cart or intent intact so they can try again, rather than sending them to a blank page.
  • A user who closes the tab mid-payment and returns later must find their account in a truthful state: either paid, or not paid with a clear way to resume.
  • Never place a secret credential in the page. Only values the provider designates as publishable may reach the browser.

Definition of done

9
  • Checkout sessions are created server-side and price, quantity, and currency come only from server-held records.
  • A workspace resolves to exactly one billing customer, even across repeated or retried checkouts.
  • Access is granted only after a verified server-side confirmation, never from the browser's return.
  • Completed, expired, abandoned, and asynchronously settled sessions each map to a distinct, correct local state.
  • Repeated confirmations for the same purchase produce no duplicate records or duplicate access.
  • The success page resolves correctly whether it loads before or after the confirmation arrives.
  • A provider failure at initiation shows a clear message and preserves the user's intent to retry.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.