Buy button for your token

The buy button is a small script (about 3 KB gzipped, no dependencies) that puts a "Buy $YOURTOKEN" button on your page. A click opens the LayerHop swap widget in a window over your site, with your token locked as the token the visitor receives. They pay with any token on any of the 71 supported chains and sign in their own wallet. Swaps go through the widget fee channel, exactly like the embedded widget.

1. Make it in the button builder#

Open the button builder. Search for your token, set the label, theme and color, add your partner id if you have one, and click the preview: it is the real button. Copy the script tag, the React component or a plain link. From any token page on app.layerhop.com, Share → Get a buy button opens the builder with that token filled in.

2. Paste the script tag#

Put the tag where the button should appear:

<script async src="https://app.layerhop.com/buy.js"
  data-chain="solana"
  data-token="DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263"
  data-label="Buy $BONK"
></script>

The script inserts the button right after itself. A tag placed in <head> puts the button at the start of <body> instead, and data-target (a CSS selector) puts it inside that element, waiting for the page to load if needed. You can add several tags for several tokens on one page.

Invalid values are ignored and the default is used, the same rules as the widget parameters.

3. Or use React#

React does not run <script> tags in JSX, so the component adds the script itself:

import { useEffect, useRef } from "react";

export function BuyButton() {
  const ref = useRef<HTMLSpanElement>(null);
  useEffect(() => {
    const host = ref.current;
    if (!host) return;
    const s = document.createElement("script");
    s.src = "https://app.layerhop.com/buy.js";
    s.dataset.chain = "solana";
    s.dataset.token = "DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263";
    s.dataset.label = "Buy $BONK";
    host.appendChild(s);
    return () => host.replaceChildren();
  }, []);
  return <span ref={ref} />;
}

Once the script has loaded, window.LayerHopBuy also has mount(element, options) (returns { destroy }), open(options) and close(), with the same option names as the attributes (chain, token, label, theme, color, integrator).

4. Or link to the token page#

No script at all: link to your token's page on the LayerHop app, opened on the Buy side.

https://app.layerhop.com/token/solana/DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263?side=buy

Token pages exist for Solana and Robinhood Chain tokens. Add &amount=50 to prefill a $50 buy paid in USDC (up to $1,000); the visitor still picks what to pay with, reviews and signs.

Earn partner fees#

data-integrator is the same partner id as the widget's integrator parameter. When it belongs to a registered partner, your fee is added on top of LayerHop's and shown to the buyer as its own line before they sign. Unknown ids are ignored, so the button works before you are approved. See Earn fees as a partner.

Events#

While the window is open, the button re-dispatches the widget's events on its element as DOM events named layerhop:<type> (for example layerhop:submitted and layerhop:status), with the payload in event.detail. They bubble, so you can listen on document:

document.addEventListener("layerhop:status", (e) => {
  if (e.detail.state === "filled") console.log("Bought!", e.detail.srcTxHash);
});

Is it safe for my visitors?#

• It only opens LayerHop. The window always loads https://layerhop.com/embed, whatever page or copy of the script it runs from.
• Messages are checked. The script only reads messages whose origin is LayerHop, that come from its own window and that use the widget's message format.
• Minimal permissions. The window gets clipboard-write and nothing else. No cookies are set on your site, and it needs no third-party cookies.
• Non-custodial. The visitor's own wallet signs every transaction; LayerHop never holds funds or keys. See Non-custodial by design.
• Isolated styles. The button and window render in a shadow root, so your CSS can't break them and theirs never leaks into your page.

Related#

• Embed the widget: the full widget, with every customization.
• Widget customization reference: parameters and events.
• Earn fees as a partner.