Add Stripe to a Fabricate App in 30 Minutes

A "Buy" button on your Fabricate app that opens Stripe's hosted checkout page and takes a card. Your app keeps an orders table, marks an order paid only after its server has asked Stripe whether the payment went through, and shows the buyer a confirmation. The same checkout covers a one-time purchase, a paid download, a deposit, tickets or a donation.

Monthly memberships use the same checkout in subscription mode. That is the next playbook in this series.

You need a Fabricate app on Pro or Max: connecting Stripe is a paid-plan feature. You can test the whole checkout in the studio preview with a Stripe test key. Real payments happen on the published app.

In your app, open More > Payments and click Set up Stripe. Fabricate creates and connects a Stripe test account. No existing Stripe account or pasted key is needed.

If you already have a Stripe account, you can instead connect its test secret key on the same Payments page. You do not need a publishable key for hosted Checkout.

Wait for Payments to show that the test account is connected. One-click setup saves its test key automatically as an encrypted secret of this app. If you used an existing key, Fabricate checks it with Stripe before saving it.

The test key reaches the app's server in both the preview and the published app. It never reaches the browser, the code or the chat.

In your Fabricate chat, paste the prompt below with your own product and price. The app looks prices up on its server, so a buyer can't change them in the browser.

Open the preview and click Buy. Stripe's page can't open inside the studio's frame, so it opens in a new tab while the app shows "Finish paying in the new tab". Use one of these test cards:

• 4242 4242 4242 4242 — succeeds

• 4000 0000 0000 0002 — declines (good for testing the failure path)

• 4000 0027 6000 3184 — requires 3D Secure auth

Any future expiry date and any CVC works. Back in the app, the order shows as paid once the server has confirmed it with Stripe, and the payment appears in the Stripe dashboard under Payments. While a test key is in use, the app shows a small "Test mode" label by the button.

Claim the test account through its Stripe link on More > Payments, then complete Stripe verification and business details. You need an eligible Stripe account before accepting real payments.

Add your live secret key under More > Payments. Follow its live status: publish again if it says the key is waiting for publishing. Live keys only reach the published app; the preview keeps its test key.

Run one real purchase on the published app with your own card, and refund it from the Stripe dashboard if you don't want to keep the charge. Done: you can take payments.

Three common failures:

1. The button says "Payments are not set up yet". → The app has no Stripe key. Add one under More > Payments; for a live key, publish again afterwards.

2. Nothing opens when you click Buy in the preview. → The checkout opens in a new tab. If your browser blocked it, allow pop-ups for fabricate.build and click again.

3. A buyer paid, but the order still says pending. → They likely closed the tab before coming back. On the owner's orders page, press "Check payment": the app asks Stripe again and records the payment.

You now have a paid app. Three obvious next moves:

• Add a monthly membership: the same checkout in subscription mode, covered in "Add Stripe Subscriptions to a Fabricate App" (next in this playbook series).

• Add an upsell on the confirmation page — "Buy another for 50% off" usually lifts cart value 10–20%.

• Take a deposit for bookings instead of the full price. Prompt: "Take a $20 deposit when someone books, and keep the booking pending until it is paid."