Embed checkout

The Hilt embed lets a merchant place a hosted checkout button on almost any page. It is useful when the merchant does not use WooCommerce or Shopify, or when the offer lives on a landing page, newsletter page, course page, or creator site.

What it does

The embed renders a Hilt checkout button from a short snippet:
<script async src="https://www.hilt.so/embed.js"></script>
<div data-hilt-checkout="your-product-slug" data-theme="auto"></div>
The default button says Pay with USDC, uses the Hilt mark, and shows Checkout by Hilt.so below the button. When the buyer clicks it, they enter the same hosted Hilt checkout used by the public /p/{slug} link.

Where it works

Use the embed on platforms that allow custom HTML or script embeds, including:
  • Ghost
  • Carrd
  • Framer
  • Webflow
  • Kajabi
  • Beehiiv
  • plain HTML pages
Some hosted platforms restrict custom scripts. If a platform blocks scripts, use the normal public Hilt checkout link instead.

Copy the snippet

In the Hilt app:
  1. Open the Hilt checkout/template you want to sell.
  2. Use Copy embed.
  3. Paste the complete snippet into the page where the offer appears.
The dashboard copy action includes the script tag and the correct checkout slug so the snippet does not need hand editing.

Configuration

The required attribute is:
data-hilt-checkout="your-product-slug"
The optional theme attribute controls the button appearance:
data-theme="auto"
Use one of:
  • auto — follows the buyer’s system light or dark preference
  • light — white button, dark text
  • dark — dark button, white text
Use auto unless the host page needs a fixed visual mode. If the host page is already dark, set data-theme="dark". If the host page is light, set data-theme="light". Example fixed light button:
<script async src="https://www.hilt.so/embed.js"></script>
<div data-hilt-checkout="your-product-slug" data-theme="light"></div>
Example fixed dark button:
<script async src="https://www.hilt.so/embed.js"></script>
<div data-hilt-checkout="your-product-slug" data-theme="dark"></div>
The dashboard-generated snippet uses data-theme="auto" by default. You can edit only the theme value if the page needs a fixed button style.

Buyer flow

  1. Buyer clicks the embedded Hilt button.
  2. Buyer opens hosted Hilt checkout.
  3. Buyer pays with a Solana wallet.
  4. Hilt records the payment, receipt, member state, renewal timing, and support context.
The embed does not expose private API keys. It opens a public hosted checkout.

Best practices

Put the embed next to the offer copy, not hidden at the bottom of the page. Make the access promise clear before the button. For example, say whether the buyer receives a download, Telegram access, Discord access, a course login, or a renewal link. Keep one embed per offer section so buyers do not have to guess which checkout applies. Use the Hilt buyer guide when the audience is new to wallet payments: How buyers pay.

Common questions

Can I use Hilt checkout on a no-code site?

Yes. Use the Hilt embed on pages that allow custom HTML or scripts, including Ghost, Carrd, Framer, Webflow, Kajabi, Beehiiv, and plain HTML pages.

Does the embed expose my API key?

No. The embed opens a public hosted checkout by slug. It does not place a private Hilt API key in the browser.

What if my site blocks custom scripts?

Use the normal public Hilt checkout link instead of the embed script. The buyer still reaches the same hosted checkout flow.