Amount Input
The Amount Input component lets users enter a custom USD amount and pay, optionally choosing a token from a dropdown.
Usage
Amount Input
'use client'
import { IcpayAmountInput, IcpaySuccess } from '@ic-pay/icpay-widget/react'
export default function Page() {
const config = {
publishableKey: process.env.NEXT_PUBLIC_ICPAY_PK,
defaultAmountUsd: 20,
minUsd: 1,
stepUsd: 1,
// Optional: filter which tokens appear in the balances modal
tokenShortcodes: ['ic_icp', 'ic_ckusdc', 'base_eth'],
progressBar: { enabled: true },
}
return (
<IcpayAmountInput
config={config}
onSuccess={(detail: IcpaySuccess) => console.log('Paid', detail)}
/>
)
}
Configuration
defaultAmountUsd?: numberplaceholder?: stringminUsd?: number,maxUsd?: number,stepUsd?: numberbuttonLabel?: stringprogressBar?: { enabled?: boolean }- Common options:
tokenShortcodes?: string[],chainShortcodes?: string[],chainTypes?: Array<'ic' | 'evm'>,theme?,useOwnWallet?,plugNPlay?,debug?,disablePaymentButton?,disableAfterSuccess?