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?: number
  • placeholder?: string
  • minUsd?: number, maxUsd?: number, stepUsd?: number
  • buttonLabel?: string
  • progressBar?: { enabled?: boolean }
  • Common options: tokenShortcodes?: string[], chainShortcodes?: string[], chainTypes?: Array<'ic' | 'evm'>, theme?, useOwnWallet?, plugNPlay?, debug?, disablePaymentButton?, disableAfterSuccess?

Was this page helpful?