AvaCloud UI Kit
Components

Payments

PaymentQRCode

Use PaymentQRCode when you need a receiving surface for wallets, checkout flows, transfer requests, or event-style scan-to-pay interactions.

No provider requiredNative + token paymentsCustomizable visuals

Request types

Native or ERC-20

Generate simple address requests or full token payment requests with amount and decimals.

Interaction

Optional copy action

Expose copy-to-clipboard alongside the scannable payload when the UI needs a fallback.

Brand fit

Styleable

Adjust module style, quiet zone, colors, eye radius, and optional logo treatment.

Payment request with amount

A practical default for receiving a specific native-token amount on a known chain.

Payment request with amount
<PaymentQRCodeaddress="0x1234..."chainId={43114}amount="10.5"copyable/>

ERC-20 payment request

Use tokenAddress and decimals when the receiving flow is for a specific ERC-20 rather than native gas token.

ERC-20 payment request
<PaymentQRCodeaddress="0xRecipient..."chainId={43114}tokenAddress="0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E"amount="100"decimals={6}copyable/>

Styled variants

Adjust visual treatment to match a product’s brand or to create more prominent QR-based calls to action.

Squares (red)
Dots (blue)
Fluid (green)
Styled variants
<PaymentQRCodeaddress="0x1234..."amount="1.5"size={256}fgColor="#E84142"moduleStyle="dots"eyeRadius={8}copyable/>

Props

Prop

Type

Common Avalanche chain IDs

NetworkChain ID
Avalanche C-Chain43114
Avalanche Fuji Testnet43113

On this page