JavaScript API and events

Once embed.js has loaded, window.Paylead is available.

Opening embeds

Paylead.buy('k3x9pa', options);           // product checkout overlay
Paylead.subscribe('k3x9pa', options);     // subscribe overlay
Paylead.pay('church-giving', options);    // payment link overlay
Paylead.close();                          // close whatever is open

Paylead.product('#el', 'k3x9pa', options);              // product card
Paylead.booking('#el', 'k3x9pa', options);              // booking calendar
Paylead.course('#el', 'k3x9pa', options);               // course card
Paylead.webinar('#el', 'w8b2nd', options);              // webinar sign-up
Paylead.store('#el', 'amas-studio', options);           // product grid
Paylead.newsletter('#el', 'amas-studio', options);      // newsletter box
Paylead.tipButton('amas-studio', options);              // floating tip button
Paylead.tip('amas-studio');                             // tip page overlay
Paylead.pricing('#el', ['b4s1c0', 'pr0p1n'], options);  // pricing table
Paylead.payInline('#el', 'church-giving', options);      // pay box

The first argument of the inline ones is a CSS selector or an element.

Options

Option
ref	Your id for the user (subscriptions)
prefill	{ email, name, phone }
theme	{ accent: '#0b2c2e', scheme: 'light' | 'dark' | 'auto', radius: 'medium' }
buttonText	The button's words on cards, tables and pay boxes
layout	Product cards: 'card', 'row' or 'minimal'
featured	Pricing tables: the plan code to highlight
amounts	Pay boxes: [20, 50, 100]
onPaid	Called with the payment details when a payment finishes in the overlay
onClose	Called when the overlay closes
onReady	Called when the embed has loaded
dataLayer	Set to false to stop pushing events to Google Tag Manager
passThrough	Set to false to stop passing UTM and ad click ids from your page's address

Events

Paylead.on('paid', (detail) => {
  // detail = { kind: 'buy' | 'subscribe' | 'pay' | 'tip', order_number, total, currency }
});

Paylead.on('close', () => {});

window.addEventListener('paylead:paid', (event) => console.log(event.detail));

paid fires when the payment finishes inside the overlay: card payments, free orders and pay-on-delivery orders. Mobile money payments finish on the mobile money page and come back to a Paylead receipt or your after-purchase link, so for anything that unlocks access, rely on webhooks or the access check.

Google Tag Manager

When a payment finishes in the overlay, Paylead pushes to window.dataLayer:

{
  event: 'paylead_purchase',
  paylead_kind: 'buy',
  paylead_order_number: 'K7Q2M9XA',
  value: 50,
  currency: 'GHS'
}

Forms push paylead_form_submit, as before.

React

Load the script once, then call the API:

import { useEffect } from 'react';

export function UpgradeButton({ user }) {
  useEffect(() => {
    if (window.Paylead) return;
    const script = document.createElement('script');
    script.src = 'https://paylead.app/embed.js';
    document.body.appendChild(script);
  }, []);

  return (
    <button
      onClick={() =>
        window.Paylead?.subscribe('k3x9pa', {
          ref: user.id,
          prefill: { email: user.email },
        })
      }
    >
      Upgrade to Pro
    </button>
  );
}

Elements with data-paylead-* attributes that appear after the page loads (for example after a route change) are picked up when you call Paylead.init().