React SDK Installation

Install and set up the GoPayLocal React SDK in your React or Next.js app.

The React SDK provides components and hooks for building PPP-aware pricing in React and Next.js applications.

Install

npm install @gopaylocal/react

pnpm add @gopaylocal/react

yarn add @gopaylocal/react

bun add @gopaylocal/react

Setup

Wrap your app with GoPayLocalProvider

The provider fetches PPP data once and makes it available to all child components.

'use client';

import { GoPayLocalProvider } from '@gopaylocal/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <GoPayLocalProvider apiKey="gpl_pk_live_abc123">
      {children}
    </GoPayLocalProvider>
  );
}

import { Providers } from './providers';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

import { GoPayLocalProvider } from '@gopaylocal/react';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <GoPayLocalProvider apiKey="gpl_pk_live_abc123">
      <Component {...pageProps} />
    </GoPayLocalProvider>
  );
}

import React from 'react';
import ReactDOM from 'react-dom/client';
import { GoPayLocalProvider } from '@gopaylocal/react';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <GoPayLocalProvider apiKey="gpl_pk_live_abc123">
      <App />
    </GoPayLocalProvider>
  </React.StrictMode>
);

Use PPP-aware components or hooks

import { PPPPrice } from '@gopaylocal/react';

function PricingCard() {
  return (
    <div>
      <h2>Pro Plan</h2>
      <PPPPrice price={9.99} />
      <span>/month</span>
    </div>
  );
}

What’s Included

The React SDK exports:

Category	Exports
Provider	`GoPayLocalProvider`
Hooks	`usePPP`, `usePrice`
Components	`PPPBanner`, `PPPPrice`, `PPPPriceFormatted`, `PPPPriceInteger`, `PPPPriceDecimal`, `PPPCurrencySymbol`, `PPPCurrencyCode`, `PPPPricingTable`
Utilities	`countryToFlag`, `formatCurrency`, `splitPrice`
Types	`PPPConfig`, `PPPResponse`, `PPPContextValue`, and all component props

TypeScript

The SDK is written in TypeScript and ships with full type definitions. All components, hooks, and utilities are fully typed.

import type { PPPContextValue, PPPResponse } from '@gopaylocal/react';

Bundle Size

The React SDK is lightweight and tree-shakable. If you only use PPPPrice, only the PPPPrice component and the usePrice hook are included in your bundle.

Next Steps

Provider reference — All provider props and configuration
Hooks reference — usePPP() and usePrice() API
Components reference — All available components
Pricing Table — Drop-in pricing page component

React SDK Installation

Install

Setup

What’s Included

TypeScript

Bundle Size

Next Steps

Getting Started

Banner Script

React SDK

JavaScript SDK

Integrations

Dashboard

API Reference

Guides

Platform Guides