I shipped a 0.20 USDC x402 browser checkout—and refused any changed payee

Description and use

A static web page was built to let users pay exactly 0.20 USDC on Base via x402, validating all financial fields and signing once to prevent double payments.

Problem

Enable a browser‑based checkout for a USDC‑paid developer API without exposing private keys or allowing arbitrary spending.

Outcome

A fully functional, static browser checkout that accepts a single signed USDC payment of 0.20 Base, validates all financial fields, and prevents double spending, demonstrated by 48 offline tests and a live HTTP 402 quote.

Workflow

• Open the static page and view the 0.20 USDC quote
• Click Connect to inject an EIP‑1193 wallet and verify Base mainnet
• Read the pinned payee, token, and amount
• Click the payment button to sign a TransferWithAuthorization EIP‑3009 payload
• Send the signed request to the merchant
• Receive a PAYMENT‑RESPONSE header or HTTP 200 and display the report
• If the network disconnects, show an uncertainty warning instead of retrying

Evidence

The existing merchant returned a genuine 402 response with the PAYMENT-REQUIRED header, HTTP CORS headers, network eip155:8453, and amount 200000. The initial page refused it.

Source

The code only asks the wallet to sign EIP-712 typed data for TransferWithAuthorization, the EIP-3009 structure used by the x402 exact scheme.

Source

I used Node's built-in test runner, with 48 passing offline tests and no purchased token or live wallet signature.

Source