Amount Input

The Amount Input component lets users enter a custom USD amount and pay, optionally choosing a ledger 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,
    defaultSymbol: 'ICP',
    showLedgerDropdown: 'dropdown',
    cryptoOptions: [
      { symbol: 'ICP', label: 'ICP' },
      { symbol: 'ckUSDC', label: 'USDC' },
    ],
    progressBar: { enabled: true, mode: 'modal' },
  }
  return (
    <IcpayAmountInput
      config={config}
      onSuccess={(detail: IcpaySuccess) => console.log('Paid', detail)}
    />
  )
}

Configuration

defaultAmountUsd?: number
placeholder?: string
minUsd?: number, maxUsd?: number, stepUsd?: number
cryptoOptions?: { symbol: string; label: string; canisterId?: string }[]
Token selector:
- Per-component legacy: showLedgerDropdown?: boolean (default: false)
- Global (recommended): showLedgerDropdown?: 'buttons' | 'dropdown' | 'none'
defaultSymbol?: string (e.g., 'ICP')
buttonLabel?: string
progressBar?: { enabled?: boolean; mode?: 'modal' | 'horizontal' | 'vertical' | 'inline' }

Notes:

With the global showLedgerDropdown string:
- 'buttons' shows selector chips when multiple ledgers are available; hides selector if only one.
- 'dropdown' always shows a dropdown.
- 'none' hides the selector and uses defaultSymbol.
For non-modal progress modes, the bar appears only during processing.