More Tutorials

Chargebee Notion Blog Starter Template



The Chargebee Notion Blog Starter is a Next.js-based sample starter site that integrates Notion as a Content Management System(CMS) and utilizes Chargebee for managing memberships. This tutorial will guide you through the steps to quickly set up and start using the Charegbee blog starter template.

Starter Template Preview
Starter Template Preview

Step 1: Setup and Configuration

Follow the steps below to set up the notion template to customize according to your blog requirements.

  1. Click Duplicate to start duplicating this Notion template.

    Notion Template
    Notion Template
  2. Make sure the copied template is private and not published to the web.

  3. Click Use this template button to fork the Chargebee Notion Blog Starter project on GitHub.

    Chargebee Repository
    Chargebee Repository
  4. Customize the blog.config.js file at the root to adjust the configuration settings according to your requirements. You can set the title, description, theme, timezone, and analytics configuration here in one place.

  5. For local development, create a .env.local file by running the terminal command cp .env.example .env.local in the project root. Then, update the environment properties in the .env.local file with the required values.

    The below table describes the properties that need to be used:

    NOTION_PAGE_IDThe ID of the Notion page you previously shared to the web, usually has 32 digits after your workspace address
    NOTION_ACCESS_TOKENNotion Access Token.
    SUPABASE_SERVICE_KEYSupabase Admin Key.
    NEXT_PUBLIC_SUPABASE_URLSupabase project public URL.
    NEXT_PUBLIC_SUPABASE_ANON_KEYSupabase anonymous key.
    NEXT_PUBLIC_CHARGEBEE_DOMAINChargebee Domain name.
    CHARGEBEE_API_KEYChargebee's Full access key.
    DEFAULT_PLANYour default item plan id. Example: free
    API_ROUTE_SECRETAdmin Secret Key to access our API.

    Refer here on how to find the values for these environment properties.

  6. Replace the favicon.png file in the /public folder with your own favicon. This step is optional.

Step 2: Configuring Dependencies Locally and Seeding Data

Follow the steps below to configure dependencies locally and start seeding data.

  1. Ensure you have a recent version of Node.js installed on your system. We recommend using recommended version 16 or after.

  2. Install pnpm package manager.

  3. Install the project dependencies by running the command pnpm install in your system terminal.

  4. Run the seed command pnpm seed to set up the necessary product catalog configuration in Chargebee.

You can log in to your Chargebee web console to modify the product catalog based on your needs.

You now have your blog running locally.

Step 3: Deployment and Environment Configuration

Follow the steps below to deploy and configure the environment for going live with your blog.

  1. Deploy the project to Vercel using the Vercel deployment button. Make sure to update the environment property values mentioned above during the deployment process.

  2. Configure Supabase:

    • Copy the seed.sql script provided in the tutorial and execute it in your freshly created Supabase project's SQL Editor. This script will create the required tables, triggers, and functions.
      Configure Supabase
      Configure Supabase
    • Set up a webhook in Supabase to watch for row insertions and trigger an HTTP request to our endpoint /api/create-customer that creates a new customer in Chargebee. Pass the API_ROUTE_SECRET via HTTP Header as shown below.
      Configure Webhook
      Configure Webhook
    • Configure Supabase Authentication based on your specific requirements, including adding social SSO. You can choose your preferred Social platform. You have to create the project on the selected platform accordingly as mentioned here.
      Configure Supabase Authentication
      Configure Supabase Authentication
  3. Configure Chargebee:

    • Create a new webhook in Chargebee with the url REPLACE_YOUR_BASE_URL/api/webhooks as shown below. This webhook will allow Chargebee to notify your application about subscription changes.
    • Click Update.
      Configure Chargebee Webhook
      Configure Chargebee Webhook

Step 4: Writing Content and Customization

With the setup complete, it's time to start writing your blog content. You can use Notion to create and manage your blog posts easily.

Sample Blog
Sample Blog

You can explore the various features available in the Chargebee Notion Blog Starter, such as comments, full-width pages, quick search, tag filtering, RSS, analytics, and more. The starter template is built with Tailwind CSS, making it easy to customize the styling to match your branding and design preferences.

You have successfully set up and started your own blog using the Chargebee Notion Blog Starter template. Feel free to modify or contribute to the repository.

Enjoy blogging with the Chargebee Notion Blog Starter!

Was this tutorial helpful ?
Need more help?

We're always happy to help you with any questions you might have!