Remix

Integrate GoPayLocal with Remix.

GoPayLocal integrates with Remix using either the React SDK or the banner script.

Option 1: React SDK

npm install @gopaylocal/react

Add the provider in your root layout:

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

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <GoPayLocalProvider apiKey="gpl_pk_live_abc123">
          <Outlet />
        </GoPayLocalProvider>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

Then use components in any route:

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

export default function Pricing() {
  return (
    <div>
      <PPPBanner position="top" />
      <h1>Pricing</h1>
      <div>
        <h2>Pro Plan</h2>
        <PPPPrice price={9.99} /> /month
      </div>
    </div>
  );
}

Add the script in your root layout:

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <script
          src="https://api.gopaylocal.com/v1/banner/script.js?key=gpl_pk_live_abc123"
          async
        />
      </body>
    </html>
  );
}

Environment Variables

GOPAYLOCAL_PUBLIC_KEY=gpl_pk_live_abc123

Expose it to the client via Remix’s loader:

import { json } from '@remix-run/node';

export const loader = async () => {
  return json({
    ENV: {
      GOPAYLOCAL_PUBLIC_KEY: process.env.GOPAYLOCAL_PUBLIC_KEY,
    },
  });
};

Remix

Option 1: React SDK

Option 2: Banner Script

Environment Variables

Getting Started

Banner Script

React SDK

JavaScript SDK

Integrations

Dashboard

API Reference

Guides

Platform Guides