Payment Integration

Sitepins integrates with Paddle to handle subscriptions, payments, and billing.

Paddle Implementation

The application uses the @paddle/paddle-node-sdk for server-side operations and the Paddle.js library for client-side checkout.

Server-side Instance (`src/lib/paddle/get-paddle-instance.ts`)


import { Paddle, PaddleOptions } from "@paddle/paddle-node-sdk";
 
export function getPaddleInstance() {
  return new Paddle(process.env.PADDLE_API_KEY, {
    environment: process.env.NEXT_PUBLIC_PADDLE_ENV as any,
  });
}

Pricing Configuration

Pricing plans are defined in src/config/pricing.json. This file contains the plan structure, features, and price IDs for different environments (sandbox/production).


{
  "plan_name": "Pro",
  "packages": [
    {
      "frequency": "monthly",
      "price_id": {
        "sandbox": "pri_...",
        "production": "pri_..."
      }
    }
  ]
}

State Management & RTK Query

Subscription state is managed via the packageApi, which injects endpoints into the main Redux API slice.

Subscription Fetching (`src/redux/features/package/package-api.ts`)

The getSubscriptions query fetches the user’s order history and determines the active plan.


export const packageApi = api.injectEndpoints({
  endpoints: (builder) => ({
    getSubscriptions: builder.query({
      query: ({ userId }) => ({
        url: `/order/${userId}`,
        method: "GET",
      }),
      async onQueryStarted(args, { dispatch, queryFulfilled }) {
        const { data } = await queryFulfilled;
        const currentPlan = getActiveSubscription(data ?? []);
        dispatch(setPackage({ 
          currentPackage: currentPlan?.package, 
          frequency: currentPlan?.billing_period 
        }));
      },
    }),
    // ... cancel and update payment methods
  }),
});

Checkout Flow

The src/app/checkout directory handles the payment process. It coordinates with Paddle to open the checkout overlay and handles post-purchase redirects or state updates.