Payment buttons and products

A product is a price you set once in the dashboard (Payments → Products) or with the API: a name, an amount of USDC or USDT, the chain you are paid on and your payout address. Every product gets a buy link and a button you can paste into any website. When a customer clicks it, LayerHop starts a checkout session for that exact price and opens the payment, on top of your page or on layerhop.com.

You need no backend: the price, token and payout address live on the product, so a visitor cannot change what they pay or where it goes. You still get the signed checkout.session.completed webhook for every payment.

1. Create a product#

In the dashboard: Payments → Products → New product. Or with the API:

curl -X POST https://api.layerhop.com/v1/checkout/products \
  -H "x-api-key: $LAYERHOP_API_KEY" -H "content-type: application/json" \
  -d '{
    "name": "Pro plan",
    "description": "1 month, unlimited projects",
    "amount": "49000000",
    "settleChain": "base",
    "settleToken": "USDC",
    "recipient": "0xYourPayoutAddress",
    "successUrl": "https://shop.example.com/thanks",
    "allowedOrigins": ["https://shop.example.com"]
  }'

const product = await lh.checkout.products.create({
  name: "Pro plan", amount: "49000000", settleChain: "base", settleToken: "USDC",
  recipient: "0xYourPayoutAddress", successUrl: "https://shop.example.com/thanks",
});
// product.id = "prod_…", product.url = "https://layerhop.com/buy/prod_…"

Products created with an lh_test_ key (or in the dashboard's test mode) are test-mode products: their payments are simulated.

2. Add the button to your site#

Paste this anywhere in your HTML:

<script src="https://layerhop.com/checkout.js" async></script>
<button data-layerhop-product="prod_…">Pay with crypto</button>

Clicking the button starts a session and opens the payment in a popup on your page; the customer never leaves your site. Add data-layerhop-reference="order_1042" to tag the payment with your own order id (it comes back in the webhooks and when you fetch the session with your key), or data-layerhop-mode="inline" on a <div> to show the payment inside your page instead of a popup.

The button fires DOM events you can listen to:

document.addEventListener("layerhop:paid", (e) => {
  console.log("paid", e.detail.session.id); // show a thank-you message
});
document.addEventListener("layerhop:cancel", () => console.log("closed without paying"));

Important

Use the browser events for the user interface only. Fulfil orders on the signed checkout.session.completed webhook, which LayerHop sends only after it has verified the payment on chain.

Other ways to sell a product#

• Link or QR code: share https://layerhop.com/buy/prod_… in emails, social posts or invoices. Add ?reference=… to tag the payment. The dashboard shows a QR code for every product.
• JavaScript: LayerHopCheckout.open({ productId: "prod_…", reference: "order_1042", onPaid: (session) => { … } }). See Embedded checkout.
• React: <LayerHopCheckout productId="prod_…" onPaid={…} /> from @layerhop/widget/react.
• WordPress: the shortcode [layerhop_button product="prod_…"] from the LayerHop WordPress plugin.
• Your own code: POST /v1/checkout/products/{id}/sessions (no key needed) returns a session; send the customer to its url.

How starting a checkout works#

POST /v1/checkout/products/{id}/sessions is public and open to any website (CORS). It creates a session with the product's amount, token, payout address and URLs; the caller can only add a reference and metadata. If the product lists allowedOrigins, browser requests from other sites are refused (FORBIDDEN). Inactive products return CONFLICT.

Sessions started from a product carry productId, so you can tell in webhooks and in the dashboard which product was bought.