Chargebee Notion Blog Starter

date

Sep 1, 2024

slug

example-030

status

Published

Chargebee Notion Blog Starter

This is sample Next.js starter site that uses Notion as CMS and Chargebee for managing membership subscriptions.

Authentication and user profile information is stored in Supabase (PostgreSQL).

Screenshot

Demo: https://chargebee-blog-starter.vercel.app/

Features

🚀 Fast and responsive

Fast page render and responsive design

Fast static and server side generation with efficient compiler

🔥 Membership

Manage membership with Chargebee subscription easily

🤖 Deploy instantly

Deploy on Vercel/Netlify in minutes

Incremental regeneration and no need to redeploy after update the content in notion

🚙 Fully functional

Comments, full width page, quick search and tag filter

RSS, analytics, web vital... and much more

🎨 Easy for customization

Rich config options, support English & Chinese interface

Built with Tailwind CSS, easy for customization

🕸 Pretty URLs and SEO friendly

Automatic OG image generation

Meta tag generation to unfurl meta information on social platforms

Built With

Next.js – Framework

Tailwind CSS - Styling

Notion – Content

Chargebee – Subscription

Supabase - Database & Authentication

Getting Started

This project requires a recent version of Node.js (we recommend >= 16).

Star this repo 😉

Duplicate this Notion template. Make sure it is not public.

Fork this project by clicking on Use this template action.

Customize blog.config.js. All config is defined in this file.

(Optional) Replace favicon.png in /public folder with your own.

For local development, run cp .env.example .env.local and update the following env properties.

Configuration

Env Property	How to get it ?
NOTION_PAGE_ID	The ID of the Notion page you previously shared to the web, usually has 32 digits after your workspace address
NOTION_ACCESS_TOKEN	Notion Access Token
SUPABASE_SERVICE_KEY	Supabase Admin Key
NEXT_PUBLIC_SUPABASE_URL	Supabase project public URL.
NEXT_PUBLIC_SUPABASE_ANON_KEY	Supabase anonymous key.
NEXT_PUBLIC_CHARGEBEE_DOMAIN	Chargebee Domain name.
CHARGEBEE_API_KEY	Chargebee's Full access key.
DEFAULT_PLAN	Your default item plan id. - Eg. free
API_ROUTE_SECRET	Admin Secret Key to access our API

How to get Notion related envs

How to get Supabase related envs

How to get Chargebee related envs

How to get API Route secret

openssl rand -base64 32

Run this following seed command once to setup Chargebee. pnpm seed

This will create product catalog configuration needed for this blog starter to work. You can customize generated product catalog as per your preference.

That's it! Easy-peasy? You now have blog running locally.

Now you can deploy to Vercel using the following button and update the env property values.

Deploy

Configure Supabase.

Copy the seed.sql and in a freshly created Supabase project. Go to SQL Editor and run this sql script. This will create required tables, triggers and functions.
You also need to create a webhook in Supabase that watches the row insertions and triggers a HTTP call to our application to create new customer in Chargebee.
Finally configure Supabase Auth. You can add social SSO based on your requirement easily from Supabase console.

Configure Chargebee

Create new webhook with path {REPLACE_YOUR_BASE_URL}/api/webhooks. This will allow Chargebee to inform our application about the subscription changes happening at their end.

How does it will look like

How to create ?

1. Webhook Name: create_chargebee_customer 2. Conditions: Table - profiles; Event - insert 3. Type of Webhook - HTTP POST 4. Headers - Content-type: application/json - x-api-secret: {{REPLACE_WITH_API_ROUTE_SECRET}} 5. Create

Awesome. It's your time to write content. 🎉

Contributing

We love our contributors! Here's how you can contribute:

Open an issue if you believe you've encountered a bug. Make a pull request to add new features/make quality-of-life improvements/fix bugs.

Author

Bharathvaj Ganesan (@bharathvaj_g)

License

Inspired by Notion Blog, this starter is open-source under the MIT. You can find it here.