Paylio React SDK

React components for Paylio. Embed pricing grids and checkout flows into React applications with a provider and component pattern.

Documentation

See the Paylio API docs.

Requirements

• React 18+

Installation

npm install @paylio/react

Usage

import { PaylioProvider, PricingGrid } from "@paylio/react";

function App() {
  return (
    <PaylioProvider publishableKey="pk_live_xxx">
      <PricingGrid userId="user_123" />
    </PaylioProvider>
  );
}

Country override

<PricingGrid userId="user_123" country="IN" />

By default, the country is auto-detected from the user's IP address.

Next.js

The SDK is SSR-safe. Use it in client components:

"use client";

import { PaylioProvider, PricingGrid } from "@paylio/react";

export default function PricingPage() {
  return (
    <PaylioProvider publishableKey="pk_live_xxx">
      <PricingGrid userId="user_123" />
    </PaylioProvider>
  );
}

Access context directly

import { usePaylioContext } from "@paylio/react";

function MyComponent() {
  const { publishableKey } = usePaylioContext();
  // ...
}

Components

<PaylioProvider>

Provides Paylio configuration to child components.

| Prop | Type | Required | Description | |------|------|----------|-------------| | publishableKey | string | Yes | Publishable API key (pk_...) | | children | ReactNode | Yes | Child components |

<PricingGrid>

Renders a Paylio pricing grid. Must be used within a <PaylioProvider>.

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | userId | string | No | Anonymous | Your external user ID | | country | string | No | Auto-detected | ISO 3166-1 alpha-2 country code | | scriptUrl | string | No | https://api.paylio.pro/embed/v1/js | Override hosted runtime script URL |

Anonymous mode is supported:

<PaylioProvider publishableKey="pk_live_xxx">
  <PricingGrid />
</PaylioProvider>

When an anonymous user clicks checkout, the embed flow redirects to your project's login redirect URL.

Development

npm install
npm test
npm run lint
npm run build

License

MIT