Add a pay button

One attribute turns any element into a checkout trigger. Add it, click it, and you'll watch a real payment flow through — start to finish — without spending a thing.

The one-attribute button

Add data-hashpay-price to any button (or link, or div) with the price id you copied in Step 4. The widget wires it up automatically when the page loads — no JavaScript to write.

<!-- loaded once, from Step 4 -->
<script src="https://cdn.hashpay.dev/embed.js" data-pk="pk_test_8sd7Fk…"></script>

<!-- your pay button — style it however you like -->
<button data-hashpay-price="price_8sd7Fk…">Pay with crypto</button>

That's a working checkout. The button is your own markup, so style it to match your site — HashPay only cares about the attribute.

Opening checkout from code

For single-page apps, custom flows, or "buy now" links generated on the fly, call HashPay.checkout() yourself:

HashPay.checkout({
  priceId: 'price_8sd7Fk…',
  // publishableKey is optional if data-pk is on the script tag
  onClose: () => console.log('checkout closed'),
})

checkout() returns a handle with a close() method, so you can dismiss the overlay programmatically if you need to:

const overlay = HashPay.checkout({ priceId: 'price_8sd7Fk…' })
// later…
overlay.close()

What your buyer sees

When the button is clicked, the overlay opens and the buyer:

1. Picks a chain and token from the ones your price accepts.
2. Gets your exact wallet address, the precise amount to send, and a QR code.
3. Pays from any wallet, and watches the status move from pending → detected → confirmed live.

Test the whole thing — no money required

This is the moment it all clicks. With your test key in place:

1. Click your own pay button. A test payment is created and the overlay opens.
2. Open the Payments tab (set to test) in your dashboard, find the payment, and hit Simulate payment. No blockchain, no spending — HashPay drives it straight to CONFIRMED.
3. Watch the overlay flip to confirmed. You just ran the entire flow end-to-end.

One thing to know before the finale

The overlay tells the buyer they're done — but your app shouldn't take the buyer's word for it. The reliable signal that a payment is real and final comes from a webhook to your server, not from the browser. That keeps fulfilment honest even if someone closes the tab early or fiddles with the page.

Good news: that's the last step, it's short, and you've already triggered your first webhook in the test above. Let's catch it.