Supabase and Stripe, step by step

How to add login and payments to an app without coding

You need two accounts: Supabase for sign ups and the database, and Stripe for payments. Connect Supabase to CreonAI, put your Stripe key in Supabase, then describe the app. These are the steps we used for our own test app.

No card needed. 500 credits is enough to build a real site and change it.

What you need

  • A Supabase account with one project, for sign ups and your database
  • A Stripe account, for payments
  • A CreonAI account. You can try the builder first, but you need to sign up to connect Supabase

Set up Supabase and Stripe

  • Step 1: in Supabase, open Authentication, then Sign In / Providers, and check that Email is enabled
  • Step 2: on the same page, choose whether Confirm email is on. On means people must click a link before they can sign in. Off means they go straight in. CreonAI cannot change this for you
  • Step 3: in Stripe, copy your secret key. Start with the test key, which begins sk_test, so no real money moves
  • Step 4: in Supabase, open Edge Functions, then Secrets, and add the key under the name STRIPE_SECRET_KEY. Never paste it into a chat

Build the app

  • Step 5: in CreonAI, open Connectors and connect Supabase
  • Step 6: describe your app. There is an example below
  • Step 7: when CreonAI asks to change your database, read what it will do and allow it
  • Step 8: when it is online, sign up as a customer and pay with Stripe's test card to prove it works
  • Step 9: when you are ready for real customers, replace the test key with your live key in Supabase, then test again

An example to copy

This is the brief from our own test: "Build my startup's app in React. We sell monthly social media packages: a landing page with three plans, customers sign up with email and password, pay with a Stripe checkout (my key is in Supabase), then get a dashboard showing their plan and orders, saved in my Supabase. No webhook and no setup steps: confirm the payment when they come back from Stripe. Put it online."

The catches, plainly

  • That test app used 169 credits in total, more than one free day allows, so it can take two days of free credits or a paid plan
  • Without "no setup steps" in your brief, it may hand you jobs to do yourself, such as setting up a Stripe webhook
  • Stripe takes a fee on each payment, and Supabase charges once you pass its free limits. Check their pricing pages
  • Taking real money makes you responsible for things like refunds and your own terms

Common questions

Do I need to know how to code?

No. You click through the settings above and describe the app in plain words.

Do I have to give CreonAI my Stripe key?

No. You add it to Supabase yourself, so you never need to paste it into the chat.

Will the payments be real?

Only once you use your live Stripe key. With a test key, no real money moves, which is how you should start.

Why did nobody get a confirmation email?

Check Confirm email in Supabase, and look at Supabase's email limits. Its built in email service is limited, so a real app usually needs its own email sender.

Try it on your own business

Type one sentence about what you do. Watch it build, then publish it when you are happy.

Keep reading

Updated