@billmyagent/payments-elements

A framework-free Web Component for the x402 payment protocol.

Wraps @billmyagent/payments-core as a custom element, <x402-pay-button>, that calls an x402-gated URL and automatically pays the HTTP 402 challenge when one is returned (the core client signs an EIP-3009 transferWithAuthorization and the facilitator settles it on-chain). Works in any HTML page or framework.

Install

npm install @billmyagent/payments-elements @billmyagent/payments-core

Usage

Paying requires a viem signer — a JS object that can't be expressed as an HTML attribute — so the configured PaymentClient is assigned in JavaScript. The url and label are plain attributes.

<x402-pay-button url="https://api.example.com/premium" label="Read article"></x402-pay-button>

<script type="module">
  import { PaymentClient, createSigner } from '@billmyagent/payments-core';
  import '@billmyagent/payments-elements'; // registers <x402-pay-button>

  const el = document.querySelector('x402-pay-button');
  // Browser: el.client = new PaymentClient({ signer: <viem wallet client> });
  el.client = new PaymentClient({ signer: await createSigner('base', PRIVATE_KEY) });

  el.addEventListener('payment-success', (e) => console.log(e.detail.data, e.detail.paid));
  el.addEventListener('payment-error', (e) => console.error(e.detail));
</script>

API

Element: <x402-pay-button>

| | | | |---|---|---| | Attribute url | string | the x402-gated URL to call (and pay, if challenged) | | Attribute label | string | button label; defaults to "Pay" | | Property client | PaymentClient | assign in JS; must be created with a signer | | Event payment-success | CustomEvent<{ data, paid }> | fired on success; paid is true if a payment was made | | Event payment-error | CustomEvent<Error> | fired on failure (including no client set) |

Supported networks

EVM only, exact scheme: Base, Ethereum, Polygon.

Development

# from sdk/elements/
npm install
npm test
npm run build

License

Apache 2.0 — see LICENSE.