Subscribe button and pricing table

Subscribe button

<script src="https://paylead.app/embed.js" async></script>

<button
  data-paylead-subscribe="k3x9pa"
  data-paylead-ref="USER_123"
  data-paylead-prefill-email="[email protected]"
  data-paylead-prefill-name="Ama Mensah"
>
  Upgrade to Pro
</button>

Attribute
data-paylead-subscribe	The subscription product's code
data-paylead-ref	Your own id for the signed-in user. It comes back on the subscription so you can check access
data-paylead-prefill-email	Fills in their email
data-paylead-prefill-name	Fills in their name
data-paylead-prefill-phone	Fills in their phone number
data-paylead-test	Test mode: a simulated payment, no real money. Needs a test key

The subscribe page opens over your page. After the payment is confirmed, Paylead sends the subscriber to the product's after-purchase link with ?subscription=, ?ref= and ?status=active added. Set that link to a page in your app that refreshes the user's access.

If the ref already has an active subscription, the overlay shows "You're already subscribed" with a link to their manage page instead of taking a second payment.

Pricing table

Show two to four plans side by side, each with a Subscribe button:

<div
  data-paylead-pricing="b4s1c0,pr0p1n,t3am99"
  data-paylead-featured="pr0p1n"
  data-paylead-ref="USER_123"
  data-paylead-prefill-email="[email protected]"
></div>

• Plans appear in the order you list them. Only active subscription products from one store are shown.
• data-paylead-featured highlights one plan with a "Most popular" badge.
• Each plan lists What subscribers get from the subscription product as ticks.
• The button says Subscribe, or the product's button text if you set one. Change every button with data-paylead-button-text.
• The ref and prefill attributes are passed on to whichever plan the visitor picks.

Style it with data-paylead-accent, -scheme and -radius.

From your own code

Single-page apps often have the user's details in code, not in HTML:

Paylead.subscribe('k3x9pa', {
  ref: user.id,
  prefill: { email: user.email, name: user.name },
  onPaid: () => refreshAccess(),
});

Paylead.pricing('#plans', ['b4s1c0', 'pr0p1n', 't3am99'], {
  featured: 'pr0p1n',
  ref: user.id,
  prefill: { email: user.email },
});

With mobile money, the subscriber leaves your page to approve the payment and then lands on your after-purchase link, so onPaid only fires for card payments that finish in the overlay. Use the return to your link, the access check or webhooks as the source of truth.