Giter Club home page Giter Club logo

advaitva / nextjs-subscription-payments Goto Github PK

View Code? Open in Web Editor NEW

This project forked from vercel/nextjs-subscription-payments

0.0 1.0 0.0 537 KB

The all-in-one starter kit for high-performance SaaS applications. With a few clicks, Next.js developers can clone, deploy and fully customize their own SaaS subscription application.

Home Page: https://nextjs-subscription-payments-starter.vercel.app/

License: MIT License

JavaScript 79.82% PLpgSQL 12.71% CSS 7.47%

nextjs-subscription-payments's Introduction

Next.js Subscription Payments Starter

The all-in-one starter kit for high-performance SaaS applications. With a few clicks, Next.js developers can clone, deploy and fully customize their own SaaS subscription application.

Features

Demo

Screenshot of demo

Architecture

Architecture diagram

Setup

1. Create new Supabase project

Sign up to Supabase - https://app.supabase.io and create a new project. Wait for your database to start.

2. Set up your database tables and auth policies

In your Supabase dashboard, go to the SQL editor. There, the welcome tab has a "Quick Start" section. Select the "Stripe Subscriptions" quick start (it has the same content as the schema.sql file) and hit the "RUN" button.

[Optional] - Set up OAuth providers

You can use third-party login providers like GitHub or Google. Refer to the docs to learn how to configure these.

3. Get your Supabase credentials

In your Supabase Dashboard, go to the Project Settings (the cog icon), open the API tab, and find your API URL, the public anon key, and the secret service_role key. You will be prompted for these when deploying with Vercel.

Deploy with Vercel

Deploy with Vercel

Once your project has been deployed, continue with the configuration steps below.

Configure Supabase Auth

After deploying, copy the deployment URL and navigate to your Supabase project settings (Authentication > Settings) and set your site url.

Configure Stripe

Create product and pricing information

For Stripe to automatically bill your users for recurring payments, you need to create your product and pricing information in the Stripe Dashboard. When you create or update your product and price information, the changes are automatically synced with your Supabase database, as long as the webhook is configured correctly as described above.

Stripe Checkout currently supports pricing plans that bill a predefined amount at a specific interval. More complex plans (e.g. different pricing tiers or seats) are not yet supported.

For example, you can create business models with different pricing tiers, e.g.:

  • Product 1: Hobby
    • Price 1: 10 USD per month
    • Price 2: 100 USD per year
    • Price 3: 8 GBP per month
    • Price 4: 80 GBP per year
    • [...]: additional currency and interval combinations
  • Product 2: Freelancer
    • Price 1: 20 USD per month
    • Price 2: 20 USD per year
    • Price 3: 16 GBP per month
    • Price 4: 160 GBP per year
    • [...]: additional currency and interval combinations

Configure the Stripe customer portal

  1. Set your custom branding in the settings.
  2. Configure the Customer Portal settings.
  3. Toggle on "Allow customers to update their payment methods".
  4. Toggle on "Allow customers to update subscriptions".
  5. Toggle on "Allow customers to cancel subscriptions".
  6. Add the products and prices that you want to allow customer to switch between.
  7. Set up the required business information and links.

That's it

That's it, you're now ready to earn recurring revenue from your customers \o/

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.