Add Subscription Billing to React

One component for pricing, checkout, and billing management. Drop it into any React app and start collecting recurring payments.

Start Free

Add Billing in 2 Steps

# 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);
      }}
    />
  );
}

Integration Steps

1

Install @paylio/react

Add the Paylio React component library to your project. It includes the PricingGrid, checkout flow, and subscription management UI.

2

Add PricingGrid Component

Drop the PaylioPricingGrid component into your pricing page. Pass your publishable key and user ID to render plans with checkout built in.

3

Check Subscription in Backend

Use the Paylio server SDK in your API to verify a user&apos;s subscription status before serving protected resources.

4

Gate Features

Read entitlements from the subscription response to conditionally render premium features in your React components.

FAQ

How do I add subscription billing to a React app?

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.

Is there a React component for subscription billing?

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.

Does Paylio work with Vite and Create React App?

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.

How do I check subscriptions server-side from React?

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.

Ship Subscriptions in Your React App Today

Free up to 100 subscribers. No credit card required.

Get Started Free