NowgateDocs

Embeds

Put checkout on your own site, as a widget, an overlay, a button or a badge.

On this page

Every payment link and payment has a hosted checkout page at its checkout_url. You can also bring checkout to your own pages, in four ways.

The widget#

An iframe of checkout's compact layout, with every state the full page has. Use your link's token, from its checkout_url:

<iframe src="https://pay.nowgate.io/embed/l/yhcrgeuaebrryccqrepckh4wib"
        title="Pay with crypto" style="width:100%;max-width:440px;height:720px;border:0"
        allow="clipboard-write"></iframe>

Only the /embed/ pages may be framed. Every other checkout page refuses framing, so nobody can put your checkout under a disguise.

The overlay#

A script of about 2 KB, plain JavaScript with no dependencies, that opens checkout in a modal over your page. Load it once:

Before </body>
<script src="https://pay.nowgate.io/v1/overlay.js" integrity="sha384-x2XJikuVfYc9AomlnXLz4Gi4I0Bz53wHNZZ9FJJMV7Kcrpscc7e+gS3ag3x6smY3" crossorigin="anonymous" defer></script>

Then either mark a link to your payment link's page, which keeps working without the script:

<a href="https://pay.nowgate.io/l/yhcrgeuaebrryccqrepckh4wib" data-nowgate-overlay>Pay with crypto</a>

or open it from your code, with a link's token or a payment's:

Nowgate.open({
  link: "yhcrgeuaebrryccqrepckh4wib",
  onStatus: ({ status, token }) => console.log(status, token), // waiting, confirming, finished, ...
  onClose: () => console.log("closed"),
});
  • The modal keeps focus inside it, closes on Escape or the close button, and returns focus to what opened it.
  • Its messages: the overlay tells checkout your page's origin, and checkout reports the payment's status to that origin alone. The script believes only messages from its own checkout frame. The same events reach window as nowgate:status and nowgate:close.
  • Status isn't payment. Credit an order on your server, from the signed webhook or GET /v1/payments/{id}, never from a message in the browser.
  • The script's integrity hash is above. v1 changes only compatibly; the hash changes with it, so pin the file if you pin the hash.

Buttons#

Make a payment link for what you sell, and share its checkout_url:

const link = await nowgate.paymentLinks.create({
  title: "Pro plan, one month",
  amount: "49.90",
  network: "tron",
  asset: "USDT",
});

Then copy a button for your link's URL. The styles are inline, so they work on any page with no stylesheet. Add data-nowgate-overlay to open the overlay instead of the page.

orange

Pay with cryptoPay with cryptoPay with crypto
<a href="https://pay.nowgate.io/l/yhcrgeuaebrryccqrepckh4wib" style="display:inline-block;background:#f97316;color:#1c1917;border:1px solid #f97316;padding:11px 20px;font-size:15px;border-radius:10px;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:600;line-height:1.2;text-decoration:none">Pay with crypto</a>

dark

Pay with cryptoPay with cryptoPay with crypto
<a href="https://pay.nowgate.io/l/yhcrgeuaebrryccqrepckh4wib" style="display:inline-block;background:#1c1917;color:#ffffff;border:1px solid #1c1917;padding:11px 20px;font-size:15px;border-radius:10px;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:600;line-height:1.2;text-decoration:none">Pay with crypto</a>

light

Pay with cryptoPay with cryptoPay with crypto
<a href="https://pay.nowgate.io/l/yhcrgeuaebrryccqrepckh4wib" style="display:inline-block;background:#ffffff;color:#1c1917;border:1px solid #e7e5e4;padding:11px 20px;font-size:15px;border-radius:10px;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:600;line-height:1.2;text-decoration:none">Pay with crypto</a>

outline

Pay with cryptoPay with cryptoPay with crypto
<a href="https://pay.nowgate.io/l/yhcrgeuaebrryccqrepckh4wib" style="display:inline-block;background:transparent;color:#c2410c;border:2px solid #c2410c;padding:11px 20px;font-size:15px;border-radius:10px;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:600;line-height:1.2;text-decoration:none">Pay with crypto</a>

Badges#

A set of SVG badges, light and dark, drawn with their text as outlines, so they look the same everywhere.

Pay with cryptoPay with crypto
<img src="https://pay.nowgate.io/v1/badges/pay-with-crypto-light.svg" alt="Pay with crypto" width="194" height="48">
Crypto accepted hereCrypto accepted here
<img src="https://pay.nowgate.io/v1/badges/crypto-accepted-light.svg" alt="Crypto accepted here" width="245" height="48">
Bitcoin, Ethereum, BNB Smart Chain, Polygon, Base, TRON, Solana, Stellar and BittensorBitcoin, Ethereum, BNB Smart Chain, Polygon, Base, TRON, Solana, Stellar and Bittensor
<img src="https://pay.nowgate.io/v1/badges/networks-light.svg" alt="Bitcoin, Ethereum, BNB Smart Chain, Polygon, Base, TRON, Solana, Stellar and Bittensor" width="352" height="48">