Buy button and product card
Sell any product from your own site. Downloads, courses, webinars, physical goods, bookings and services.
Buy button
Turn any button or link on your site into a Buy button:
<script src="https://paylead.app/embed.js" async></script>
<button data-paylead-buy="k3x9pa">Buy the ebook · GH₵ 50</button>
Clicking it opens the product's checkout over your page, with everything your product page has: options and sizes, booking times, service packages, order bumps, coupons and pay-on-delivery if you offer it.
Products with nothing to choose (no options, time slot or package) go straight to the checkout form. The others show the product first so the buyer can pick.
It works for every kind of product. For subscriptions, use the Subscribe button instead, so you can pass your user's id.
Product card
Show the product in your page, with its picture, name, price, rating and a Buy button:
<div data-paylead-product="k3x9pa"></div>
Three layouts:
<!-- A card with the picture on top (default) -->
<div data-paylead-product="k3x9pa"></div>
<!-- A row: small picture, name and price, button on the right -->
<div data-paylead-product="k3x9pa" data-paylead-layout="row"></div>
<!-- Just a button with the price: "Buy now · GH₵ 50" -->
<div data-paylead-product="k3x9pa" data-paylead-layout="minimal"></div>
Style it with data-paylead-accent, -scheme, -radius and -button-text (see Styling). The card grows to fit its content, so you don't need to set a height.
The card shows the product's sale price when it has one, with the full price crossed out, and the price in the visitor's currency when you set prices per country.
A row of products
Put several cards in a grid with your own CSS:
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px">
<div data-paylead-product="k3x9pa"></div>
<div data-paylead-product="m7q2ze"></div>
<div data-paylead-product="p0w8rt"></div>
</div>
From your own code
Paylead.buy('k3x9pa');
Paylead.product('#featured', 'k3x9pa', { layout: 'row' });