Controlled inputs
Lock the amount, recipient, or chain so the widget becomes a confirm-and-pay surface.
There are two ways to put a value into <WhiskSend>. Controlled
props lock the field so the user can read it but can't change it.
Default props seed an initial value the user can still edit. Use
controlled when the host app has the authoritative number (cart
total, merchant address). Use defaults when you're nudging.
Controlled props
<WhiskSend
amount="49.99"
recipient="0xMerchantTreasury…"
destinationChain="Base"
/>| Prop | What it locks |
|---|---|
amount | The amount field. |
recipient | The recipient field. |
sourceChain | The source chain picker. |
destinationChain | The destination chain picker. |
When all three of amount, recipient, and destinationChain are
locked, the widget reads like a checkout summary: the user signs
once, and the transfer leaves.
Default props
These pre-fill the input but stay editable:
<WhiskSend recipient="0xDAOTreasury…" defaultAmount="10" />| Prop | What it seeds |
|---|---|
defaultAmount | The starting amount. |
defaultRecipient | The starting recipient. |
The recipient is locked (treasury address) but the amount nudges toward 10 USDC. Donors can change it before confirming.
Reading back what the user picked
Pair any unlocked field with a change callback to mirror its value in your app's state:
const [amount, setAmount] = useState("10");
<WhiskSend
defaultAmount={amount}
onAmountChange={setAmount}
recipient="0xDAOTreasury…"
/>;The full set: onAmountChange, onRecipientChange,
onSourceChainChange, onDestinationChainChange. Each receives the
new value as a string (or Chain literal for the chain callbacks).
Common shapes
| Flow | Controlled | Default |
|---|---|---|
| Checkout | amount + recipient + dest chain | — |
| Donation | recipient + dest chain | amount |
| Invoice link | amount + recipient + dest chain | source chain |
| Payroll batch | amount + recipient + dest chain | — |
The source chain almost always stays free. The customer pays from wherever their USDC sits. Whisk handles the bridge when source and destination differ.
Next
See the e-commerce checkout recipe for a full integration including the server-side payment verification.