Pay button SDK

Take a Tazor payment on any website with one script tag, one element and one event.

@tazor/pay lets another website take a Tazor payment. It makes the same encrypted payment link the Invoices page makes, opens it in the Tazor app, and watches Whitechain until the invoice is paid. It has no server and no API key, and its only dependency is viem.

What the merchant and the customer see

1. The customer clicks Pay with Tazor on the merchant's checkout. The button shows the amount.
2. The Tazor app opens the invoice. The customer's approvers check it and approve it with a passkey; anyone, including the relayer, submits it.
3. The button changes to Waiting for payment…, then Paid ✓ · View tx once the payment is on Whitechain, and fires tazor-paid.
4. The merchant's own page or dashboard can watch the same invoice with watchPayment, on any device.

Install

It isn't on npm yet. In the repository, build it from packages/pay with pnpm build, which writes dist/index.js (ES module) and dist/tazor-pay.js (one script for a <script> tag). The merchant demo in examples/merchant-demo already has a copy.

The whole integration: 15 lines

This is the integration from the Bluejay Logistics demo: one script, one element, one listener. There is no build step and no framework. In mode="wallet" the customer pays from any wallet holding USDT with one signature (no gas, no WBT; Tazor's relayer submits it), or by a plain transfer from WhiteBIT or any exchange.

<script src="./tazor-pay.js"></script>
<tazor-pay-button
  mode="wallet" demo-wallet="true"
  merchant="0xc1dce946D192e344251972470237F1471C93876c"
  amount="0.20"
  order-ref="BJ-1042"
  label="Pay 0.20 USDT"></tazor-pay-button>
<script>
  document.querySelector('tazor-pay-button').addEventListener('tazor-paid', (e) => {
    document.querySelector('#order-status').textContent = 'Paid';
    const tx = document.querySelector('#order-tx');
    tx.href = e.detail.explorerUrl;
    tx.hidden = false;
  });
</script>

From code

import { createInvoiceLink, watchPayment } from '@tazor/pay';

const link = await createInvoiceLink({
  supplierName: 'Bluejay Logistics',
  payee: '0xc1dce946D192e344251972470237F1471C93876c',
  buyerAccount: '0xb99A12652BEe98429ae31EA0529A0b63f1073721',
  lines: [{ description: 'Freight', quantity: 1, unitPrice: '100' }],
  taxRate: 18, taxLabel: 'GST',
  dueDate: '2026-12-31',
  id: 'BJ-1042',
});
// link.url → https://tazor.charlesms.dev/pay/#v1.…   link.amount → '118'

const stop = watchPayment({
  invoiceHash: link.invoiceHash,
  payee: '0xc1dce946D192e344251972470237F1471C93876c',
  onPaid: ({ txHash, amount, at }) => markOrderPaid('BJ-1042', txHash),
});

<tazor-pay-button> attributes

Style it with CSS variables (--tazor-bg, --tazor-fg, --tazor-accent, --tazor-radius, --tazor-font, --tazor-paid) or with the parts ::part(button), ::part(label), ::part(status) and ::part(tx).

Events

The events bubble and cross the shadow root, so you can listen on the element or on document.

API

How payment is detected

PaymentModule emits InvoicePaid(account, nonce, payee, amount, viaL1), and the nonce is the invoice hash (keccak256 of the canonical invoice). The SDK reads the newest logs of PaymentModule v1 and v2 from the Whitechain Blockscout API and matches that nonce, and the payee if you pass it. Payments sent through Ethereum count too.