Take payments in your React app

@access0x1/react adds a Pay button, priced in dollars, to any React app. The customer pays from their own wallet; the business gets its share and the fee goes to Access0x1 in the same step.

Install

npm install @access0x1/react viem wagmi

React, viem and wagmi come from your app. The package never holds keys or money.

Add the button

import { PayButton, clientFromViem } from "@access0x1/react";
import { usePublicClient, useWalletClient } from "wagmi";

export function Checkout() {
  const publicClient = usePublicClient();
  const { data: walletClient } = useWalletClient();
  const client = clientFromViem(publicClient!, walletClient ?? undefined);

  return (
    <PayButton
      merchantId={1n}                                         // your business's number on the router
      usdAmount={29.0}                                        // priced in dollars
      token="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"  // USDC on Base
      routerAddress="0xe92244e3368561faf21648146511DeDE3a475EB5"  // the Access0x1 router
      client={client}
      explorerBaseUrl="https://basescan.org"
      onSuccess={(receipt) => console.log("paid", receipt.txHash)}
    />
  );
}

The button asks the router for a dollar quote, has the customer approve and pay, then waits for the router’s receipt. If the token or the price feed is not available it shows why, instead of sending the customer into a failed payment.

Check it yourself

• The package: @access0x1/react on npm (version 0.1.1).
• The router it pays through: 0xe92244e3368561faf21648146511DeDE3a475EB5 on Base, source verified on Basescan.
• The fees: on the public record page, read from the contracts.
• Every payment a business received, read live from Base: for example business 1’s record.

License

Proprietary, © 2026 SebasTN Inc. You may install it and use it unmodified to accept payments through the Access0x1 payment network. You may not copy, modify or use it to build another payment network.