Astro
Integrate GoPayLocal with Astro sites.
Astro’s static-first approach works perfectly with GoPayLocal’s banner script. Since the banner loads asynchronously and renders in Shadow DOM, it works seamlessly with Astro’s island architecture.
Banner Script (Recommended)
Section titled “Banner Script (Recommended)”Add the script to your layout:
<html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>My Site</title> </head> <body> <slot /> <script src="https://api.gopaylocal.com/v1/banner/script.js?key=gpl_pk_live_abc123" is:inline async ></script> </body></html>JavaScript SDK
Section titled “JavaScript SDK”For more control, use the JavaScript SDK in an Astro component:
<div id="pricing"> <div class="plan"> <h3>Pro Plan</h3> <span data-gopaylocal-price="9.99">$9.99</span>/mo </div></div>
<script> import { GoPayLocal } from '@gopaylocal/js';
const gpl = new GoPayLocal({ apiKey: 'gpl_pk_live_abc123' }); await gpl.init(); gpl.bindPriceElements();</script>Install the SDK first:
npm install @gopaylocal/jsReact SDK (with Astro React Islands)
Section titled “React SDK (with Astro React Islands)”If you’re using Astro with React islands:
npm install @gopaylocal/react @astrojs/reactimport { GoPayLocalProvider, PPPPricingTable } from '@gopaylocal/react';
export default function PricingIsland() { return ( <GoPayLocalProvider apiKey="gpl_pk_live_abc123"> <PPPPricingTable plans={[ { name: 'Free', price: 0, features: ['1 product'] }, { name: 'Pro', price: 19, features: ['10 products', '500K hits'], highlighted: true }, { name: 'Business', price: 49, features: ['50 products', '5M hits'] }, ]} /> </GoPayLocalProvider> );}---import Layout from '../layouts/Layout.astro';import PricingIsland from '../components/PricingIsland';---<Layout> <h1>Pricing</h1> <PricingIsland client:load /></Layout>Use client:load to hydrate the island immediately, ensuring the PPP data is fetched as soon as possible.