React JS

Install

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

npm install @paddle/paddle-js

After that, install the ## Alternative: Direct API Usage

If you're not using a Node.js backend, you can make direct API calls to Saazpay endpoints. Please refer to the Saazpay API documentation for the complete list of endpoints and request/response formats.

API Reference: For direct API usage without the Node.js SDK, see the API Reference documentation for complete endpoint specifications and examples. 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

Important: Since React is a client-side library without server-side capabilities, all API calls to Saazpay must be handled through a separate backend server. We currently support the Node.js SDK @saazpayhq/node-sdk for backend integration. If you're using a Node.js backend, configure it accordingly. Otherwise, use the direct API endpoints.

Pricing Plans

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

First, import the necessary components:

import PricingPlans from "@/components/saazpay/pricing_plans/pricing_plans";
import { useEffect, useState } from "react";

Then, create your component with the pricing plans functionality:

export default function Home() {
  const [plans, setPlans] = useState([]);
  const [activeSubscription, setActiveSubscription] = useState(null);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    const fetchData = async () => {
      try {
        // Fetch plans from your backend API
        const plansResponse = await fetch("/api/plans");
        const plansData = await plansResponse.json();
        setPlans(plansData);
 
        // Get user's active subscription if logged in
        const user = getCurrentUser(); // Your authentication logic
        if (user) {
          const subscriptionResponse = await fetch(
            `/api/subscription?userId=${user.id}`
          );
          const subscriptionData = await subscriptionResponse.json();
          setActiveSubscription(subscriptionData);
        }
      } catch (error) {
        console.error("Error fetching data:", error);
      } finally {
        setLoading(false);
      }
    };
 
    fetchData();
  }, []);
 
  if (loading) {
    return <div>Loading...</div>;
  }
 
  return (
    <PricingPlans
      plans={plans}
      activePlanId={activeSubscription?.price.id}
      settings={{
        alignment: "center",
      }}
    />
  );
}

Backend API Endpoints:

You'll need to create API endpoints in your backend server to handle Saazpay operations. For detailed implementation examples and comprehensive backend setup, please refer to our Node.js SDK documentation.

See Node.js SDK Documentation: For complete backend API implementation examples, error handling, and best practices, check out the Node.js SDK guide.

Key Features:

Plan Fetching: Fetches all available pricing plans from your backend API
Active Subscription: Checks if the user has an active subscription through your backend
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

Props:

plans: Array of pricing plans fetched from your backend
activePlanId: The ID of the user's currently active plan (if any)
settings: Configuration object for customizing the component appearance and behavior

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 components:

import SubscriptionManagement from "@/components/saazpay/subscription_management/subscription_management";
import { useEffect, useState } from "react";

Then, create your subscription management component:

export default function ManageSubscriptionPage() {
  const [activeSubscription, setActiveSubscription] = useState(null);
  const [managementUrls, setManagementUrls] = useState(null);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    const fetchData = async () => {
      try {
        const user = getCurrentUser(); // Your authentication logic
        if (user) {
          // Fetch active subscription
          const subscriptionResponse = await fetch(
            `/api/subscription?userId=${user.id}`
          );
          const subscriptionData = await subscriptionResponse.json();
          setActiveSubscription(subscriptionData);
 
          // Fetch management URLs if subscription exists
          if (subscriptionData) {
            const urlsResponse = await fetch(
              `/api/management-urls?subscriptionId=${subscriptionData.id}`
            );
            const urlsData = await urlsResponse.json();
            setManagementUrls(urlsData);
          }
        }
      } catch (error) {
        console.error("Error fetching data:", error);
      } finally {
        setLoading(false);
      }
    };
 
    fetchData();
  }, []);
 
  const handleGetPlans = async () => {
    const response = await fetch("/api/plans");
    return response.json();
  };
 
  const handlePreviewPlan = async (planId, subscriptionId) => {
    const response = await fetch("/api/preview-plan", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ planId, subscriptionId }),
    });
    return response.json();
  };
 
  const handleChangePlan = async (planId, subscriptionId) => {
    const response = await fetch("/api/change-plan", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ planId, subscriptionId }),
    });
    return response.json();
  };
 
  if (loading) {
    return <div>Loading...</div>;
  }
 
  return (
    <SubscriptionManagement
      activeSubscription={activeSubscription}
      managementUrls={managementUrls}
      settings={{
        primaryColor: "#68c5f3",
      }}
      api={{
        getPlans: handleGetPlans,
        previewPlan: handlePreviewPlan,
        changePlan: handleChangePlan,
      }}
    />
  );
}

Additional Backend API Endpoints:

For complete implementation of all required backend endpoints including management URLs, plan preview, and plan changes, please refer to our comprehensive Node.js SDK documentation.

Complete Backend Setup: See the Node.js SDK guide for detailed implementation of all required API endpoints with proper error handling, validation, and security practices.

Key Features:

Active Subscription Management: Displays the user's current subscription details
Plan Preview: Allows users to preview changes before switching plans
Plan Changes: Enables users to change their subscription plan
Management URLs: Provides access to external management interfaces
API Integration: All operations are handled through your backend API

API Props:

The api prop contains functions for handling subscription operations:

getPlans: Fetches all available plans from your backend
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

Backend Configuration

For complete backend setup including installation, configuration, and implementation details, please refer to our comprehensive Node.js SDK documentation.

Complete Backend Guide: See the Node.js SDK documentation for detailed backend setup instructions, environment configuration, and complete Express.js implementation examples.

Environment Variables

Make sure to add the following environment variables to your backend server:

SAAZPAY_APP_ID=your_app_id_here
SAAZPAY_BASE_URL=https://api.saazpay.com
SAAZPAY_API_KEY=your_api_key_here

For your React frontend, you'll need:

NEXT_PUBLIC_PADDLE_CLIENT_KEY=your_paddle_client_key_here

Variable Descriptions:

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

React JS

On this page