@flexpay/react

Drop-in React checkout UI for FlexPay.

What It Does

• Wraps @flexpay/core in a React-first checkout flow
• Shows connected wallet token balances
• Lets users choose which token to spend
• Displays live quotes, price impact, refresh timer, and payment status
• Exposes a theme API and a headless useFlexPay hook

Main Exports

• FlexPayWidget
• useFlexPay
• TokenSelector
• QuoteDisplay
• StatusScreen

Example

import { FlexPayWidget } from "@flexpay/react";

export function Checkout() {
  return (
    <FlexPayWidget
      merchantWallet="YOUR_MERCHANT_WALLET_OR_USDC_ATA"
      amount={29.99}
      rpcEndpoint="https://api.devnet.solana.com"
      quoteApiUrl="/api/flexpay/quote"
      swapApiUrl="/api/flexpay/swap"
      tokensApiUrl="/api/flexpay/tokens"
    />
  );
}

Requirements

• React wallet adapter context must be present above the widget
• You should mount backend quote, swap, and token routes for production use