vibes.diy/docs Home Discord
creator docs · guide · payments

Take payments with Stripe

What a vibe is good at with Stripe: one-time charges and paid memberships into your own Stripe account, connected once with Connect Stripe — the card on Stripe's page, the money in your account, and the record in your app. You connect and take test payments first, then press Go live with Stripe when you are ready for real money.

A vibe can take money. Ask for a deposit, tickets, dues, a shop with checkout or a monthly membership, and the builder writes the part that talks to Stripe, keeps the card on Stripe's own page, and keeps the record of who paid in your app. You bring one thing: your Stripe account, connected once with the Connect Stripe button on your app's Settings tab. Everything a buyer pays lands there.

This page is what that looks like, what to ask for, what you set up once, and where the edges are. There are two recipes, because money that happens once and money that keeps coming are different shapes.

What a vibe is good at

Money the maker already has a reason to collect. The apps that take payment best are the ones where the people and the thing already exist: a booking page for clients you already have, dues for a club with a roster, a ticket for an event with a date, a members-only feed for people who already read you. The payment is one more column on a record the app already keeps.

The card never touches your app. Checkout is a page Stripe hosts. Your app opens it in a new tab, Stripe takes the card, handles Apple Pay and Google Pay and whatever your account turns on, and sends the buyer back. Nothing about a card is ever in your app's code or its data. That keeps your app out of the card-handling scope that Stripe's own pages carry for you; what still applies to you as a merchant is the short self-assessment Stripe asks of hosted-checkout accounts, and your Stripe dashboard tells you when it does.

"Paid" is a fact only Stripe can establish. When the buyer comes back, your backend reads the payment back from Stripe before it marks anything paid, and it checks that the payment is for this order, at this amount. A browser cannot mark an order paid, and neither can a guessed link. If a buyer pays and closes the tab without coming back, a sweep every few minutes reads their payment back anyway.

You see every order in your own app. Who paid, what for, how much, when. It is also in your Stripe dashboard, and the two agree because the app only ever copies Stripe's answer.

What to ask for

The builder adds payments only when you ask. A shop that records orders, a plans page that records requests, a booking page that holds a slot: each of those takes no money and says so, until you say otherwise. When an app looks like it could take money, the builder offers it as a chip, and tapping the chip is the ask.

One-time charges. Say pay the bill, split the check, tip, donate, checkout, deposit, dues, sell tickets, pay by card, or charge:

  • a split-the-check page for my restaurant: staff open each table's check, and diners scan its QR code to pay the bill with a tip
  • a booking page that takes a $50 deposit to hold a time for my photo sessions
  • sell $15 tickets to our chili cook-off, 80 seats, with a list of who's coming
  • a members page where everyone pays their $40 annual dues for our running club
  • a shop with checkout for my candles
  • a tip jar with a live total for my Saturday street set

Something that recurs but that you collect yourself each time, like annual dues or a season pass, is still a one-time charge: one order per period, and the roster shows "paid through".

Paid memberships. Say paid membership, subscribe, a month, yearly, membership fee, or members-only:

  • a paid newsletter where readers subscribe for $5 a month to read the members-only posts
  • a members-only recipe club with a monthly membership for my sourdough recipes
  • a $20/month coaching community where paying members see the weekly video

A membership is a subscription Stripe renews and retries on its own. The app mirrors what Stripe says about it: active members are in, a member whose card bounced gets a few days of grace while Stripe retries, and a cancelled membership runs to the end of the period the member paid for. Members cancel or change their card on Stripe's own page, reached from a button in your app.

Put the price and the period in the ask. $5 a month tells the builder you want a membership; $40 dues tells it you want one charge. Prices live in your app's code, so you change them by asking for a change, and a buyer can never send their own amount.

What you set up once

An app that takes money needs one or two things from you before it works — your connected Stripe account for one-time payments, plus a saved Customer portal for memberships — and it tells you so in one place: a Setup entry in the app's own navigation that only you see, highlighted until every item is done (an app with no navigation shows a banner at the top that opens it). Your buyers never see it; until Stripe is connected, the Pay or Join button reads a calm "not open yet" for them, and the rest of the app works as usual. The Setup screen lists what the app needs, whether each item is done, and the steps below with your vibe's real handle and slug filled in. Connect Stripe in another tab, come back, and the buttons go live in place, with no reload. Once everything is done the entry stays, quietly, which is where you come back to go live. The same surface is how every integration that needs a key, a saved page or a connected account is set up, so it looks the same in every app you make.

  1. Open your vibe's Settings tab: My Vibes, then your app, then Settings. Under Payments, press Connect Stripe. First confirm the Country beside it (it starts on where you are; this is where your business is based, and it is set when Stripe setup finishes). Stripe then opens its own setup pages: sign in with your usual Stripe login, or create one there, and answer Stripe's questions about your business. If setup is not finished and you picked the wrong country, come back to Settings, choose the right Country, then press Start over: it starts a fresh setup in the country selected at that moment. The app's Setup screen links straight to this tab for your vibe. Your Stripe account belongs to your Vibes DIY account and serves every app you make, so the second app is one press.

    Already use Stripe for a shop? Sign in with the Stripe login you already have, not a new email. Connect Stripe adds a separate Stripe account for your Vibes DIY apps under that same login; it shows up in your Stripe account switcher beside your other accounts, and your existing shop's account stays exactly as it was. Stripe offers to reuse the business and bank details it already has, so setup is quick.

    What buyers see. Two separate Stripe settings, both yours to change in your Stripe account's settings: the public business name shows on Stripe's checkout page, and the statement descriptor shows on buyers' card statements. Set both to a name buyers will recognize.

  2. Come back to your app. The Pay buttons work in test mode as soon as Stripe says your account is ready.

  3. For a membership app, also open Stripe's Customer portal settings, signed in to the Stripe account you connected. Under Cancellations, turn on Cancel subscriptions, choose At end of billing period, and press Save. That is the page your members use to cancel or change a card, and it exists once you save it; the app's Setup screen shows the portal as its own item and marks it done the moment you save.

  4. Go live, one app at a time. Connect and take test payments first, then press Go live with Stripe under Payments on the Settings tab and finish Stripe's live setup, once for all your apps. Then, in each app that is ready for real money, press Take live payments in this app on its Setup screen, and for a membership app save the Customer portal settings in live mode once more. An app you are still rehearsing keeps taking test payments. Once an app is live it stays live: if your live Stripe account ever needs attention, its checkout waits for you to finish on the Settings tab.

While an app is in test mode, everyone who opens it sees a Test mode badge beside the Pay button, you see the test card to use (4242 4242 4242 4242 with any future date), and your buyers read that test purchases end when the app goes live. It is a full rehearsal — Checkout, the return, the paid order, the sweep — with no real card charged. When the app goes live, buyers start fresh: test orders and test memberships stay in your app as rehearsals and unlock nothing.

Building a payment app for a friend

The Stripe account you connect belongs to your Vibes DIY account and serves every app you make, and payouts go to whoever's Stripe is connected. So when the money is your friend's, the app is your friend's too:

  1. Your friend signs in to Vibes DIY with their own account and makes the app there, or opens the app you made and presses Remix to copy it into their account.
  2. Your friend presses Connect Stripe on that app's Settings tab. Only an app's owner connects Stripe, and the payouts land in their account.
  3. To keep building it with them, your friend opens Share → Share settings, invites you, and sets your Code to Yes. That is developer access: you edit, push and publish the app while it, its Stripe account and its money stay theirs.

How it works, in one paragraph

Your app's backend writes the order (or the membership record) first, in a pending state, then asks Stripe for a Checkout Session for exactly that record and hands the page its URL. The page opens the URL in a new tab, because a vibe runs inside a frame that cannot steer the page around it. When the buyer returns, the backend reads the session back from Stripe through the platform, which holds the Stripe credential for your connected account, checks it belongs to this record at this amount, and only then marks it paid. A restaurant check is paid by one person with one button by default; splitting by what each person had, or evenly, is a second choice. Each payment reserves its share of the check before Stripe's page opens, so two people never pay the same balance or the same item. For memberships the backend also reads the subscription back on a schedule, so a failed renewal or a cancellation reaches your app without a webhook. The rules in access.js make it structural: only your backend can change an order's state, and for a membership the members-only channel is a grant the membership record carries and the backend withdraws.

Where the edges are

  • One merchant per app. Every buyer pays you, into the Stripe account you connected. A marketplace, where each visitor collects money into their own account, is a different build from a one-merchant vibe.
  • Your money, your Dashboard. Refunds, disputes, payouts and reports live in your own Stripe Dashboard, and Stripe's fees come out of your payments as usual; vibes.diy takes no cut.
  • Apps made with a pasted key keep working. An app that already has STRIPE_SECRET_KEY in its Secrets keeps using it; new payment apps use Connect Stripe.
  • Guests pay at your place without an account. A restaurant check, a tip jar, a donation page or a ticket bought on the spot is guest checkout: the payment is a record of the thing paid for (the table's check, the order), Stripe's page asks the payer for their email and sends the receipt, and your backend writes every payment record and reads every payment back from Stripe before it counts. One setting lets guests pay: publishing from the editor turns it on, and after a CLI push your app's Setup screen gives you the exact vibes-diy app anon-write line.
  • Members sign in. A membership, dues on a roster, a booking under someone's name or a "my orders" page belongs to a person over time, so those buyers have a Vibes DIY sign-in. A visitor who is not signed in sees a "Sign in to join" button, not a broken one.
  • Apple Pay and Google Pay work on Stripe's page, where the card form is. They are not available inside the app's own frame.
  • Memberships follow Stripe's status, and only that. The app reads a subscription's status, its period and whether it is set to cancel. A refund, a discount or pausing collection in the Stripe dashboard changes none of those on its own, so access stays as it was. To end someone's access, cancel their subscription in Stripe; the next read picks that up.
  • Stripe's fees apply, and Stripe Billing adds a small percentage on subscriptions. Your dashboard shows the exact numbers for your account.