Enable Billing & SaaS Monetization

NoCodeBackend provides a complete, turnkey SaaS monetization engine that transforms any relational database into a multi-tiered subscription product in minutes. With zero backend billing code and automated background webhook synchronization, you can connect your Stripe account via direct API keys, configure recurring subscriptions or one-time payment tiers, enforce database table row limits (paywalls), and test everything end-to-end in our interactive Quick Demo environment.

How It Works

1. Direct Stripe API Keys: Connect your Stripe account directly using your Publishable and Secret keys. Your secret key is encrypted at rest using bank-grade AES-256-GCM.
2. Test Mode (0% Platform Fee): Test keys (pk_test_... / sk_test_...) are automatically detected and charged 0% platform commission, allowing you to test checkouts, subscriptions, and limits completely risk-free.
3. Table Row Limits (HTTP 402 Paywalls): Set maximum row limits per table for each pricing plan (e.g., Free tier gets 5 projects, Pro tier gets 500 projects). NoCodeBackend automatically enforces these limits on your create operations.
4. Out-of-the-Box Quick Demo Environment: Launch a live, dedicated sandbox app (/databases/<your-database>/demo) wired to your actual database to test simulated or real Stripe checkouts, plan upgrades, table row limits, and customer portals in real time.
5. Turnkey End-User UI: The @nocodebackend/account-react component provides a pre-built Billing tab where your users can view their active plan, upgrade/downgrade, and open the Stripe Customer Portal to manage cards and invoices.

Step 1: Open Enable Billing

1. Go to your NoCodeBackend Dashboard → My databases.
2. Click the 3 dots (⋮) menu on the database card you want to monetize.
3. Select "Enable billing" (or navigate to /databases/<your-database>/monetization).

Step 2: Connect Your Stripe Account via Direct API Keys

NoCodeBackend connects to Stripe using direct API keys, giving you full ownership of your Stripe account and customer data without third-party redirects or complex setup.

Where to Find Your Stripe Keys

1. Log in to your Stripe Dashboard.
2. In the top-right toggle, choose whether to view Test mode or Live mode.
3. Go to Developers → API keys.
4. Copy your Publishable key (pk_live_... or pk_test_...).
5. Reveal and copy your Secret key (sk_live_... or sk_test_...).

Connecting Your Keys in NoCodeBackend

1. On the Enable Billing page, paste your Publishable Key and Secret Key.
2. Click Connect Stripe Account.
3. NoCodeBackend validates the credentials with Stripe, detects whether the connection is in Test Mode or Live Mode, and saves the keys with AES-256-GCM encryption.

Automatic Webhook Synchronization

You do not need to manually configure webhook endpoints or signing secrets in Stripe! NoCodeBackend automatically registers and synchronizes webhook endpoints behind the scenes to listen for checkout sessions, subscription renewals, downgrades, and cancellations.

Test Mode vs. Live Mode

• Test Mode (pk_test_... / sk_test_...): Designed for development and staging. All test checkouts and subscriptions have 0% platform commission. You can test cards, plan limits, and customer upgrades completely free.
• Live Mode (pk_live_... / sk_live_...): Used for real customer transactions. Customer payments go directly to your Stripe account. Standard platform commission applies to live sales and is invoiced monthly.

Step 3: Turn On SaaS Monetization

1. Toggle the Enable SaaS Monetization switch to ON.
2. Once enabled, the pricing plan builder and table limit settings will become active.

Step 4: Create Pricing Plans

Click Add Plan to configure your pricing tiers:

• Plan Name: The display name of your tier (e.g., Free, Starter, Pro, Enterprise, or Lifetime Deal).
• Billing Type:
  • Recurring: For monthly or annual subscription plans.
  • One-Time: For lifetime deals, credit packs, or standalone purchases.
• Interval (for recurring plans): Choose Month or Year billing frequency.
• Price & Currency: Set your price and select the currency (e.g., $19.00 USD).
• Free Plan: Check this box if the tier is a $0 free plan.

Setting a Default Plan

In the Default Plan dropdown, select which plan new users are automatically assigned when they register in your application (typically your Free tier).

Step 5: Configure Table Row Limits (Enforce Paywalls)

Enforce feature paywalls by setting the maximum number of records users on a given plan can create in specific tables.

1. Under your chosen plan, click Add Limit.
2. Select the Table to restrict (e.g., projects, leads, documents, tasks).
3. Set the Max Rows:
   • Enter a specific number (e.g., 5 for Free, 500 for Pro).
   • Leave blank or set to Unlimited for no row restrictions.
4. Set a Feature Label (e.g., Active Projects) to display as a user-friendly label on your user's billing dashboard.

How Row Limits Are Enforced

When an end user attempts to create a record in your application (via POST /api/data/create/<table_name>?Instance=<your-database> or direct API POST /create/<table_name>?Instance=<your-database>):

• Within Quota: The record is created successfully.
• Quota Exceeded: NoCodeBackend returns a 402 Payment Required response with an upgrade notice, protecting your database against unauthorized usage.

Step 6: Test in the Quick Demo Environment

NoCodeBackend includes a dedicated, out-of-the-box interactive demo application so you can test your exact Stripe connection, pricing tiers, and row limits before writing a single line of frontend code!

Launching the Demo

1. On the Enable Billing page (/databases/<your-database>/monetization), scroll to the Interactive SaaS Demo card.
2. Click Test out a quick demo (or navigate directly to /databases/<your-database>/demo).

What You Can Do in the Demo Sandbox:

• Live Stripe Checkouts: Click Upgrade on any paid tier to launch a real Stripe Checkout session using your connected Stripe keys. Complete the checkout (using Stripe test card 4242... in Test Mode), and upon redirect, the demo verifies the session, displays a success celebration, and immediately upgrades the demo user's plan.
• Table Row Limit Paywalls in Action: Add records to tables until you hit your configured plan limit. The live quota meter turns red and triggers the real HTTP 402 Payment Required paywall modal, prompting the user to upgrade.
• Instant Plan Switching: Switch between your configured plans on the fly to inspect how quota progress bars and row limits expand or contract.
• Stripe Customer Portal: Click Manage Billing to open Stripe's hosted customer portal where subscribers can update payment methods, view invoices, or cancel subscriptions.
• Reset Demo Records: Click Reset at any time to clear test records from your demo table and re-run your tests.

Step 7: Customer Checkout & Billing UI Integration

Option A: Using the @nocodebackend/account-react Component (Recommended)

Install the official drop-in React component to give your end users a complete customer billing dashboard:

npm install @nocodebackend/account-react@latest

Embed <NCBAccount /> in your application:

• Billing Tab: Displays their active plan, live usage progress bars against table quotas, and available upgrade options.
• 1-Click Checkout: Clicking Upgrade redirects directly to Stripe Checkout with your app's return URLs handled automatically.
• Stripe Customer Portal: Active subscribers see a Manage Billing button that opens Stripe's hosted portal to update cards, download invoices, or cancel subscriptions.

Option B: Custom Frontend Checkout API

If you are building a custom pricing page or billing UI in your frontend, initiate checkouts using the API proxy:

// Trigger checkout session
const res = await fetch("/api/ncb/account/billing/checkout", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  credentials: "include",
  body: JSON.stringify({
    plan_id: "YOUR_PLAN_ID",
    success_url: window.location.origin + "/dashboard?payment=success",
    cancel_url: window.location.origin + "/dashboard?payment=cancelled",
  })
});

const { url } = await res.json();
if (url) window.location.href = url;

Step 8: Automatic Webhook Sync

You do not need to configure any webhook endpoints in Stripe! NoCodeBackend automatically receives and verifies Stripe webhook events in the background:

• Subscription Created / Renewed: Instantly updates user access and billing cycle dates.
• Subscription Cancelled: Automatically downgrades the user back to your default Free plan.
• Payment Failed: Marks the subscription as past due so your app can prompt for updated payment details.