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