vibes.diy/docs Home Discord
creator docs · works with

Works with Square

Already sell on Square? Build a preorder page, a class sign-up or a merch shop that takes real payments into your own Square account — the card on Square's own page, the sale in your Square Dashboard, the record in your app.

What you can build

Online sales for a shop that already rings people up on Square: a bakery's preorder page, seats in a weekend class, a band's merch table that keeps selling after the show, a pickup order for the café. You list what you sell and set each price in your app, buyers pay on Square's own checkout page, and every sale lands in the same Square Dashboard as your counter sales. Say Square in your prompt (pay with Square, my Square account, a Square checkout page) and the builder writes the part that talks to Square.

How it connects

Your own Square access token, saved on your app. Until it is in, your app shows you a Setup screen with these steps, each one a link:

  1. Open the Square Developer Console and sign in with the Square account you sell with.
  2. Press + to create an application, and give it any name, such as your app's.
  3. Open the application, choose Credentials, switch the toggle at the top to Production, and copy the Production Access token.
  4. On your app's Settings → Secrets, save it as SQUARE_ACCESS_TOKEN.

Come back to your app and the Pay buttons open, with the Setup screen naming the Square business and location your sales go to and the currency they are priced in. Your backend.js makes every Square call with that token, so it never reaches the page.

What it can read and do

Your app can read Your app can do
Your Square business name and its locations Open a Square checkout page for each order, with one line per item
The location that takes cards, and its currency Mark an order paid once Square's own copy of it shows the money arrived
Each order your app sent to Square Settle orders whose buyer closed Square's tab, and tell you about each sale

Every payment lands in your Square account, and the order list in your app agrees with your Square Dashboard because the app only copies Square's answer.

Starter prompts

  • Make a preorder page for my bakery where customers pick a box of pastries and pay with Square.
  • Build a class sign-up page for my pottery studio where each seat is paid through my Square account, with a list of who's coming.
  • Make a merch shop for my band where fans fill a bag and pay on a Square checkout page, and I get a note for every sale.

Good to know

  • Your price list lives in your app. You add each thing you sell on the app's Products screen, and the app charges that price. Your Square item library stays as it is.
  • Your first sale is real money. A production token takes real cards, so buy your cheapest item once and refund it from your Square Dashboard to see the whole trip. To rehearse first, save Square's sandbox access token instead and add a secret SQUARE_ENV set to sandbox: Square's sandbox checkout page has a Test Payment button that pays like a buyer would.
  • Guests pay without an account. Square's page asks for the buyer's email and sends the receipt, so nobody needs a Vibes DIY account to buy.
  • Refunds, payouts and reports live in your Square Dashboard, where you already make them; vibes.diy takes no cut.
  • One payment per order. Something that recurs, like a monthly class, sells as one order per month. For a membership that renews on its own, ask for Stripe.
  • New to taking payments? Stripe is the default for every other payment app: Connect Stripe, test payments first, then live.

Go deeper