The React paddle hooks is a custom React hook that provides integration with the Paddle payment platform. It allows you to easily integrate majority of paddle api.
Paddle installation
npm i react-paddle-hooksBefore using the usePaddle hook, make sure you have installed the required dependencies:
npm install @paddle/paddle-js reactTo use the usePaddle hook in your React component, import it and call it with the desired options:
import { usePaddle } from "react-paddle-hooks";
const MyApp = () => {
const { paddle, openCheckout, getPrices, productPrices, billingCycle } =
usePaddle({
environment: "sandbox",
token: "your_paddle_token",
});
return <div>{/* Your component JSX */}</div>;
};The usePaddle hook takes an object with the following options:
- environment (required): Specifies the Paddle environment to use. Choose between "sandbox" or "production".
- token (required): Your Paddle token for authentication.
- eventCallback (optional): A callback function triggered by Paddle events, receiving event data as a parameter.
- checkoutSettings (optional): Additional settings for checkout, like the success URL.
The usePaddle hook returns an object with:
- paddle: Initialized Paddle instance.
- openCheckout: Function to open Paddle checkout with checkout options.
- getPrices: Function to get prices of selected products based on the chosen billing cycle.
- productPrices: Object with product prices, using product IDs as keys and prices as values.
- billingCycle: Current billing cycle, either "month" or "year".
The openCheckout function accepts an object with:
-
items (required): Array of item objects with a
priceIdand optionalquantity. - customer (optional): Customer details object including email and address.
- settings (optional): Additional checkout settings like display mode, theme, and locale.
The getPrices function fetches prices for selected products based on billing cycle. It takes an array of ProductDetails objects and the billing cycle ("month" or "year"). ProductDetails has:
- productId: Product ID.
- monthlyPriceId: Price ID for monthly billing.
- yearlyPriceId: Price ID for yearly billing.
Prices are stored in productPrices with product IDs as keys and their prices as values.
import { usePaddle } from "react-paddle-hooks";
const SubscriptionComponent = () => {
const { paddle, openCheckout, getPrices, productPrices, billingCycle } =
usePaddle({
environment: "sandbox",
token: "your_paddle_api_token",
eventCallback: (data) => {
// Handle Paddle events
console.log("Paddle event:", data);
},
checkoutSettings: {
successUrl: "/success",
},
});
const productDetails = [
{
productId: "product_1",
monthlyPriceId: "price_monthly_1",
yearlyPriceId: "price_yearly_1",
},
{
productId: "product_2",
monthlyPriceId: "price_monthly_2",
yearlyPriceId: "price_yearly_2",
},
];
const handleSubscribe = () => {
const checkoutOptions = {
items: [
{
priceId:
billingCycle === "month"
? productDetails[0].monthlyPriceId
: productDetails[0].yearlyPriceId,
quantity: 1,
},
],
customer: {
email: "customer@example.com",
},
settings: {
displayMode: "overlay",
theme: "light",
locale: "en",
},
};
openCheckout(checkoutOptions);
};
return (
<div>
<h2>Subscription Plans</h2>
<div>
<label>
<input
type="radio"
value="month"
checked={billingCycle === "month"}
onChange={() => getPrices(productDetails, "month")}
/>
Monthly
</label>
<label>
<input
type="radio"
value="year"
checked={billingCycle === "year"}
onChange={() => getPrices(productDetails, "year")}
/>
Yearly
</label>
</div>
<ul>
{productDetails.map((product) => (
<li key={product.productId}>
{product.productId}:{" "}
{productPrices[product.productId] || "Loading..."}
</li>
))}
</ul>
<button onClick={handleSubscribe}>Subscribe</button>
</div>
);
};
export default SubscriptionComponent;import { usePaddle } from "react-paddle-hooks";We're importing the usePaddle hook from the react-paddle-hooks package.
const { paddle, openCheckout, getPrices, productPrices, billingCycle } =
usePaddle({
environment: "sandbox",
token: "your_paddle_api_token",
eventCallback: (data) => {
// Handle Paddle events
console.log("Paddle event:", data);
},
checkoutSettings: {
successUrl: "/success",
},
});- usePaddle: Initializes the Paddle hook with specified options.
- paddle: Initialized Paddle instance.
- openCheckout: Function to open Paddle checkout.
- getPrices: Function to fetch prices based on billing cycle.
- productPrices: Object storing product prices.
- billingCycle: Current billing cycle ("month" or "year").
const productDetails = [
{
productId: "product_1",
monthlyPriceId: "price_monthly_1",
yearlyPriceId: "price_yearly_1",
},
{
productId: "product_2",
monthlyPriceId: "price_monthly_2",
yearlyPriceId: "price_yearly_2",
},
];Array containing details of products and their price IDs for monthly and yearly billing.
const handleSubscribe = () => {
const checkoutOptions = {
items: [
{
priceId:
billingCycle === "month"
? productDetails[0].monthlyPriceId
: productDetails[0].yearlyPriceId,
quantity: 1,
},
],
customer: {
email: "customer@example.com",
},
settings: {
displayMode: "overlay",
theme: "light",
locale: "en",
},
};
openCheckout(checkoutOptions);
};handleSubscribe: Function to handle subscription. It sets checkout options based on the selected billing cycle and opens the checkout.
Errors during Paddle initialization or when calling openCheckout or getPrices are logged to the console.
This code is under the MIT License.