> ## Documentation Index
> Fetch the complete documentation index at: https://boilerplate.loopple.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Payments - Paddle

> Details about payments

## Pricing Page

### Overview

The Pricing page allows users to choose and purchase subscription plans for your service. This page integrates with Paddle for handling payment processing and subscription management.

### Paddle Loader Component

The `PaddleLoader` component is responsible for loading the Paddle script and initializing the Paddle environment and vendor settings.

```jsx theme={null}
import Script from "next/script";

export default function PaddleLoader(){
  return (
    <Script
      src="https://cdn.paddle.com/paddle/paddle.js"
      onLoad={() => {
        if (process.env.NEXT_PUBLIC_PADDLE_SANDBOX) {
          Paddle.Environment.set("sandbox");
        }
        Paddle.Setup({
          vendor: Number(process.env.NEXT_PUBLIC_PADDLE_VENDOR_ID),
        });
      }}
    />
  );
}
```

### Purchase Buttons

The purchase buttons allow users to select and purchase subscription plans. These buttons call the handleBuy function, which initializes the Paddle checkout process.

```javascript theme={null}
function handleBuy(product_id) {
    console.log("handle buy: ", product_id);

    // Handle Paddle
    try {
        new Paddle.Checkout.open({
        product: product_id,
        email: user ? user.email : "", // Replace 'user.email' with actual user email
        passthrough: "1",
        successCallback: function (data) {
            // Redirect to dashboard after successful purchase
            router.push("/dashboard");
        },
        closeCallback: function () {
            // Handle checkout close event
            setIsLoading(false); // Update loading state if needed
        },
        });
    } catch (error) {
        console.error(error);
    }
}
```

### Usage

1. Include the PaddleLoader component in your application, preferably in a layout component that is used across multiple pages.

2. Add purchase buttons for each subscription plan on the Pricing page, and call the handleBuy function with the appropriate product ID when a button is clicked.

3. Ensure that environment variables such as `NEXT_PUBLIC_PADDLE_VENDOR_ID`, `NEXT_PUBLIC_MONTHLY_PLAN_ID`, etc., are defined in your .env file.