HASH PAY Docs
Docs/Get started/Add the checkout widget
Step 4 of 6 ~3 minutes

Add the checkout widget

Time to connect HashPay to your actual site. There are just two pieces: a price (what you charge) and a script tag (how the checkout appears). Both are copy-paste.

Step 4 of 6 · this is where it comes alive

Create a product and a price

A Price is simply an amount in USD that you want to charge. Because the amount lives on HashPay's servers — never in the buyer's browser — checkout stays safe even though anyone can click the button.

  1. Open Products & prices and click New product (e.g. Pro plan).
  2. Add a price to it — just the amount, like 29.00. Stablecoins are treated 1:1 with USD, so the buyer pays exactly 29.00 USDC or USDT.
  3. HashPay gives the price an id like price_8sd7Fk…. Copy it — that's what your button will reference.

One price can be reused on as many buttons and pages as you like. By default it accepts every chain and token you have a wallet for. Need a different amount? Just add another price.

Grab your publishable key

Open the Integration page. In the dashboard's top bar is a test / live toggle — leave it on test for now. Copy your publishable key; it looks like this:

publishable keykey 
pk_test_8sd7FkJwKqL2mN9pQrStUvWx

Publishable keys are safe to put in your HTML — that's what they're for. The secret key (sk_…) is the one to guard; you won't need it for the standard checkout, only for advanced server-side flows.

Drop in the script

Add this one line to your page — anywhere, once. The data-pk attribute sets your publishable key for every HashPay button on the page.

your-page.htmlhtml 
<script src="https://cdn.hashpay.dev/embed.js" data-pk="pk_test_8sd7FkJwKqL2mN9pQrStUvWx"></script>

You can paste it straight from the Integration page, where it's pre-filled with your real key. That's the entire install — no package, no build step, no dependencies.

What that one line gives you

  • A global HashPay object with a checkout() method, plus automatic wiring for any pay buttons (next step).
  • A self-contained overlay. The checkout renders inside a Shadow DOM, so your site's CSS and HashPay's CSS can't leak into each other — it looks right on any page, framework or no framework.
  • Zero config. The widget knows which API to talk to out of the box, and which store you are from your pk alone; the page's origin is checked against your domain policy (Step 2).

Using React, Vue, or another framework? The script tag works the same — drop it in your index.html (or load it once at app start). You'll trigger checkout with HashPay.checkout(...), which we cover on the next page.

The widget is live on your page.

You have a price, a key, and the script loaded. There's literally one thing left between you and a working checkout: a button to open it. Let's add it.