Next.js
Integrate GoPayLocal with Next.js — App Router and Pages Router.
GoPayLocal works with both Next.js App Router and Pages Router. Use the React SDK for the deepest integration, or the banner script for a quick setup.
Option 1: React SDK (Recommended)
Section titled “Option 1: React SDK (Recommended)”-
Install the SDK
Terminal window npm install @gopaylocal/react -
Create a provider
app/providers.tsx 'use client';import { GoPayLocalProvider } from '@gopaylocal/react';export function Providers({ children }: { children: React.ReactNode }) {return (<GoPayLocalProvider apiKey="gpl_pk_live_abc123">{children}</GoPayLocalProvider>);}app/layout.tsx import { Providers } from './providers';export default function RootLayout({ children }: { children: React.ReactNode }) {return (<html lang="en"><body><Providers>{children}</Providers></body></html>);}pages/_app.tsx 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>);} -
Use in your pricing page
// app/pricing/page.tsx (or pages/pricing.tsx)'use client';import { PPPPricingTable } from '@gopaylocal/react';export default function PricingPage() {return (<PPPPricingTableplans={[{ name: 'Free', price: 0, features: ['1 product', '10K hits'] },{ name: 'Pro', price: 19, features: ['10 products', '500K hits'], highlighted: true },{ name: 'Business', price: 49, features: ['50 products', '5M hits'] },{ name: 'Scale', price: 99, features: ['High volume', 'More seats'] },{ name: 'Enterprise', price: 0, features: ['Custom', 'SSO/SAML', '99.99% SLA'] },]}annualDiscount={20}/>);}
Option 2: Banner Script
Section titled “Option 2: Banner Script”For a simpler setup without the React SDK:
import Script from 'next/script';
export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body> {children} <Script src="https://api.gopaylocal.com/v1/banner/script.js?key=gpl_pk_live_abc123" strategy="afterInteractive" /> </body> </html> );}import Script from 'next/script';
export default function App({ Component, pageProps }) { return ( <> <Component {...pageProps} /> <Script src="https://api.gopaylocal.com/v1/banner/script.js?key=gpl_pk_live_abc123" strategy="afterInteractive" /> </> );}Use strategy="afterInteractive" to load the script after the page becomes interactive without blocking rendering.
Environment Variables
Section titled “Environment Variables”Store your API key in environment variables:
NEXT_PUBLIC_GOPAYLOCAL_KEY=gpl_pk_live_abc123<GoPayLocalProvider apiKey={process.env.NEXT_PUBLIC_GOPAYLOCAL_KEY!}>