Next JS

Install

To get started with Saazpay in your Next.js application, you need to install the necessary dependencies. Begin by installing the client library provided by Paddle itself:

npm install @paddle/paddle-js

Then, install the Saazpay Node SDK:

npm install @saazpayhq/node-sdk

After that, install the fully customizable template files using the following command:

npx @saazpayhq/react add saazpay

This command will add all the files under the components/saazpay directory with the following structure. The templates are written in TypeScript and Tailwind CSS:

components/
  saazpay/
    pricing_card.tsx
    types.d.ts
    pricing_plans/
        pricing_plans.tsx
    subscription_management/
        subscription_management.tsx
        manage_plans/
            manage_plans.tsx
            preview_plan.tsx

Usage

Pricing Plans

To display pricing plans in your Next.js application, you'll need to fetch the plans from Saazpay and pass them to the PricingPlans component. Here's how to implement it:

First, import the necessary functions and components:

import { getPlans, getActiveSubscription } from "@saazpayhq/node-sdk";
import PricingPlans from "@/components/saazpay/pricing_plans/pricing_plans";

Important: Make sure you use methods from @saazpayhq/node-sdk securely with server actions or a separate backend server without revealing the API key to the client side. All SDK methods should be called on the server to protect your sensitive credentials.

Then, create your page component with the pricing plans functionality:

export default async function Home() {
  // Get the current user (this is just for reference - pass your unique user identifier)
  const user = await currentUser();
 
  // Fetch all available plans
  const plans = await getPlans({
    appId: process.env.NEXT_PUBLIC_SAAZPAY_APP_ID ?? "",
  });
 
  // Get the user's active subscription if logged in
  let activeSubscription;
  if (user) {
    activeSubscription = await getActiveSubscription({
      appId: process.env.NEXT_PUBLIC_SAAZPAY_APP_ID ?? "",
      userId: user, // Pass your unique user identifier here
    });
  }
 
  return (
    <PricingPlans
      plans={plans}
      activePlanId={activeSubscription?.price.id}
      settings={{
        alignment: "center",
      }}
    />
  );
}

Key Features:

Plan Fetching: Uses getPlans() to retrieve all available pricing plans from Saazpay
Active Subscription: Checks if the user has an active subscription using getActiveSubscription()
User Authentication: Integrates with your authentication system to identify the current user
Customizable Settings: The settings prop allows you to customize the appearance and behavior of the pricing plans

Subscription Management

The subscription management component allows users to view and manage their active subscriptions, change plans, and access management URLs. Here's how to implement it:

First, import the necessary functions and components:

import SubscriptionManagement from "@/components/saazpay/subscription_management/subscription_management";
import {
  changePlan,
  getActiveSubscription,
  getManagementUrls,
  getPlans,
  previewPlan,
} from "@saazpayhq/node-sdk";

Then, create your subscription management page:

export default async function ManageSubscriptionPage() {
  // Get the current user (this is just for reference - pass your unique user identifier)
  const user = await currentUser();
 
  // Get the user's active subscription if logged in
  let activeSubscription;
  if (user) {
    activeSubscription = await getActiveSubscription({
      appId: process.env.NEXT_PUBLIC_SAAZPAY_APP_ID ?? "",
      userId: user, // Pass your unique user identifier here
    });
  }
 
  // Get management URLs for the subscription
  let managementUrls;
  if (activeSubscription) {
    managementUrls = await getManagementUrls({
      appId: process.env.NEXT_PUBLIC_SAAZPAY_APP_ID ?? "",
      subscriptionId: activeSubscription.id,
    });
  }
 
  return (
    <SubscriptionManagement
      activeSubscription={activeSubscription}
      managementUrls={managementUrls}
      settings={{
        primaryColor: "#68c5f3", // Customize the primary color of the component
      }}
      api={{
        getPlans: async () => {
          "use server";
          return await getPlans({
            appId: process.env.NEXT_PUBLIC_SAAZPAY_APP_ID ?? "",
          });
        },
        previewPlan: async (planId: string, subscriptionId: string) => {
          "use server";
          console.log("subscriptionId", subscriptionId);
          return await previewPlan({
            appId: process.env.NEXT_PUBLIC_SAAZPAY_APP_ID ?? "",
            newPlanId: planId,
            subscriptionId: subscriptionId,
          });
        },
        changePlan: async (planId: string, subscriptionId: string) => {
          "use server";
          return await changePlan({
            appId: process.env.NEXT_PUBLIC_SAAZPAY_APP_ID ?? "",
            newPlanId: planId,
            subscriptionId: subscriptionId,
          });
        },
      }}
    />
  );
}

Key Features:

Active Subscription Management: Displays the user's current subscription details
Plan Preview: Allows users to preview changes before switching plans using previewPlan()
Plan Changes: Enables users to change their subscription plan using changePlan()
Management URLs: Provides access to external management interfaces via getManagementUrls()
Server Actions: All API calls are handled securely on the server side

API Props:

The api prop contains server actions for handling subscription operations:

getPlans: Fetches all available plans
previewPlan: Previews the cost and changes when switching to a new plan
changePlan: Changes the user's subscription to a new plan

Settings:

primaryColor: Customizes the primary color of the component
activeSubscription: The user's current subscription data
managementUrls: External URLs for subscription management

Environment Variables

Make sure to add the following environment variables to your .env, .env.local file:

NEXT_PUBLIC_PADDLE_CLIENT_KEY=
NEXT_PUBLIC_SAAZPAY_APP_ID=
SAAZPAY_BASE_URL=
SAAZPAY_API_KEY=

Variable Descriptions:

NEXT_PUBLIC_PADDLE_CLIENT_KEY: Your Paddle client key for frontend integration
NEXT_PUBLIC_SAAZPAY_APP_ID: Your Saazpay application ID (public, used on client-side)
SAAZPAY_BASE_URL: The base URL for Saazpay API calls (server-side only)
SAAZPAY_API_KEY: Your Saazpay API key for server-side operations (keep secret)

Next JS

On this page