SupaAPI: Monetizing an API with Supabase, OpenAI and Zuplo

This is a demo to help you start monetizing an API quickly using:

• Supabase as the database and authentication provider
• OpenAI for spicing your API with AI
• Zuplo for API auth, rate limiting, and monetization
• Stripe for payments and subscription management

This repo contains a dashboard that allows users to sign up, pay, and manage their subscription to any API.

Demo

• https://supa-api.zuplosite.com

Getting started

Step 1 - Create a Stripe account and product

1. Create a Stripe account

You'll need a Stripe account to accept payments. You can create one here.

2. Create a metered product in Stripe

To enable metered billing so that you can charge users for their API usage, you'll need to create a metered product in Stripe.

Go to Products and click Add a product.

Now create a product with the following details:

3. Create a Pricing Table to embed on the web-app

Go back to Product menu and click on the Pricing tables.

Fill in the details as shown below:

4. Add the Pricing table to the dashboard

Copy the Pricing Table code which will be used in the web app:

Paste the code in the file /app/pricing/page.tsx

<div
  dangerouslySetInnerHTML={{
    __html: `
+        <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
+        <stripe-pricing-table pricing-table-id="prctbl_1234ABC" publishable-key="pk_test_1234ABC">
+        </stripe-pricing-table>
      `,
  }}
/>

Hold on to your Stripe Secret Key This Key will be used in the next step to configure the Zuplo API Gateway. Copy the Stripe Secret Key from the top right menu Developers > API Keys > Copy Secret Key.

Step 2 - Deploy the API with Zuplo

For the purposes of this demo, we'll be using the SupaAPI as our API which will be monetized.

It exposes one endpoint /v1/blogs which can either POST to create a new blogpost using OpenAI, or GET to retrieve a list of blogposts.

Click the button below to deploy the API to Zuplo:

Set the following environment variables in Settings > Environment Variables

1. OPENAI_API_KEY: Your OpenAPI API Key which you can get from the OpenAI account dashboard.

2. STRIPE_API_KEY: This key is the Stripe Secret Key that you got in step 1.

3. SUPABASE_PROJECT_URL

4. SUPABASE_SERVICE_ROLE_KEY

Step 3 - Deploy to Vercel

This will deploy the dashboard to Vercel and uses the Supabase Integration to create a Supabase project and seed it with the required tables.

You will be required to add the following environment variables:

1. STRIPE_API_KEY: This key is the Stripe Secret Key that you got in step 1.

2. NEXT_PUBLIC_ZUPLO_API_URL: in Zuplo, go to the Settings > Project Information tab and copy the URL.

3. ZUPLO_BUCKET_URL: from the same page, copy the API Key Bucket URL.

4. ZUPLO_API_KEY: in Zuplo, go to the Settings > Zuplo API Keys tab and copy the available key.

Step 4 - Try it out!

You can now try out the dashboard following the next steps:

1. Go to the Vercel URL that was generated in the previous step.

2. Sign up for an account.

3. Subscribe to the API with Stripe test cards

4. Once you're subscribed, the API dev portal link will be available in the dashboard.

5. You can now try out the API by using the Authorization header with the token that is available to you in the API dev portal.