One component for pricing, checkout, and billing management. Drop it into any React app and start collecting recurring payments.
Start Free# Install
npm install @paylio/react// PricingPage.tsx
import { PaylioPricingGrid } from "@paylio/react";
export default function PricingPage() {
return (
<PaylioPricingGrid
publishableKey="pk_live_xxx"
userId="user_123"
theme="light"
onSubscribed={(sub) => {
console.log("Subscribed to", sub.plan.name);
}}
/>
);
}Add the Paylio React component library to your project. It includes the PricingGrid, checkout flow, and subscription management UI.
Drop the PaylioPricingGrid component into your pricing page. Pass your publishable key and user ID to render plans with checkout built in.
Use the Paylio server SDK in your API to verify a user's subscription status before serving protected resources.
Read entitlements from the subscription response to conditionally render premium features in your React components.
Install @paylio/react, then render the PaylioPricingGrid component with your publishable key and user ID. It handles plan display, checkout, and payment collection. Use the server SDK to verify subscriptions in your backend.
Yes. The @paylio/react package includes PaylioPricingGrid, which renders your plans as a responsive pricing grid with built-in checkout. No custom UI or payment forms required.
Yes. The @paylio/react component works with any React 18+ setup including Vite, Create React App, Remix, and Next.js. It is a standard React component with no framework-specific dependencies.
Install the paylio Node.js SDK in your backend. Call paylio.getSubscription(userId) from your API endpoint. Your React app fetches this endpoint to get the current subscription state and entitlements.
Free up to 100 subscribers. No credit card required.
Get Started Free