Accept BB84 Payments On Your Site

Drop a QR code onto a checkout page, invoice, or donation button that already carries the amount and currency — no backend, no wallet connection, no API key. The customer scans it with the BB84 app, and the recipient, amount, and asset (USDC or EURC) are filled in automatically.

It is the same payload shape the BB84 app’s Receive screen generates — bb84-pay.js just makes it embeddable on your page.

Quick Start

Add this to any page. Replace shop.bb84.eth with your own address or bb84.eth name.

<!-- 1. A placeholder where the QR should appear -->
<div data-bb84-pay
     data-to="shop.bb84.eth"
     data-amount="20"
     data-asset="usdc"></div>

<!-- 2. The widget script — finds it and renders the code -->
<script src="https://bb84.com/bb84-pay.js" defer></script>

The Payload

A BB84 payment-request QR encodes an ethereum: URI — the recipient, followed by the amount in the asset's smallest unit:

ethereum:<recipient>?value=<raw-units>&asset=<usdc|eurc>

<recipient> is a 0x… address, a *.bb84.eth name, or a real Mainnet *.eth name. Two concrete examples:

// Request 20 USDC
ethereum:shop.bb84.eth?value=20000000&asset=usdc

// Request 9.50 EURC
ethereum:shop.bb84.eth?value=9500000&asset=eurc

You never need to hand-build this string — BB84Pay.buildValue(to, amount, asset) does the decimal-to-raw-units conversion for you (see Programmatic API).

Amount & Asset

value is always an integer in the asset's smallest unit, matching how BB84 stores balances on-chain:

What Happens on Scan

Under the hood this is the exact same shorthand the BB84 app also accepts when typed directly into the recipient field, e.g. 20usd.shop.bb84.eth — handy for sharing a request over chat instead of a QR image.

Declarative Embed

The simplest integration needs no JavaScript of your own. Add one <div data-bb84-pay> per QR code you want on the page:

<div
  data-bb84-pay
  data-to="shop.bb84.eth"       <!-- required -->
  data-amount="49.90"       <!-- optional -->
  data-asset="eurc"         <!-- "usdc" | "eurc", required with data-amount -->
  data-size="220"           <!-- optional, pixels, default 200 -->
  data-label="true"          <!-- optional, shows "Requesting 49.90 EURC" -->
></div>

Elements are matched once on DOMContentLoaded. Adding a widget div later (e.g. after fetching a cart total) — call BB84Pay.init() to pick up any new ones, or just call BB84Pay.render() directly.

Programmatic API

For a checkout flow where the total isn't known until runtime:

BB84Pay.render("#checkout-qr", {
  to:     "shop.bb84.eth",
  amount: cartTotal.toFixed(2),   // decimal string, e.g. "49.90"
  asset:  "usdc",               // "usdc" | "eurc" — required with amount
  size:   220,
});

BB84Pay.render(target, options)

Draws the QR into target (a CSS selector string or a DOM element). Returns a Promise that resolves once drawn, and rejects with a descriptive error if to/amount don't parse — the widget also shows that error inline so a bad integration fails loudly, not silently.

BB84Pay.buildValue(to, amount, asset)

Returns the raw ethereum:… string without rendering anything — useful if you're feeding your own QR library (a native app, a PDF invoice generator, etc.) instead of the DOM widget. Returns null if the inputs don't parse.

const value = BB84Pay.buildValue("shop.bb84.eth", "20", "usdc");
// "ethereum:shop.bb84.eth?value=20000000&asset=usdc"

Live Demo

This calls the real bb84-pay.js hosted at /bb84-pay.js — the exact widget your page would load.

No-JS Alternative

If your site can't load third-party scripts at all, generate the QR once ahead of time in the BB84 app’s Receive screen, save the image, and embed the image directly — a static <img> tag works everywhere. For a dynamically-computed amount, build the ethereum:… string yourself using the format in The Payload and feed it to any QR-code image generator.

Security Notes

• The widget only displays a request — it never has access to funds, private keys, or the customer's device beyond rendering a QR image.
• bb84-pay.js is static and unauthenticated by design, same as any QR-image generator — nothing about it needs an API key, and nothing you embed can be revoked or rate-limited server-side.
• Double-check data-to is your own address or bb84.eth name before shipping — the widget validates the shape of the recipient (a valid address or ENS name) but has no way to know whose it is.
• The QR-rendering library (qrcodejs) is lazy-loaded from cdnjs.cloudflare.com only once, and only if window.QRCode isn't already present — check your CSP allows that origin if you enforce one.