Tip Jar

Usage

Tip Jar

'use client'
import { IcpayTipJar, IcpaySuccess } from '@ic-pay/icpay-widget/react'

export default function Page() {
  const config = {
    publishableKey: process.env.NEXT_PUBLIC_ICPAY_PK,
    amountsUsd: [1,5,10],
    defaultAmountUsd: 5,
    progressBar: { enabled: true },
  }
  return (
    <IcpayTipJar
      config={config}
      onSuccess={(detail: IcpaySuccess) => console.log('Tip completed', detail)}
    />
  )
}

Configuration

  • amountsUsd?: number[]
  • defaultAmountUsd?: number
  • buttonLabel?: string (supports {amount} and {symbol} placeholders)
  • onSuccess?: (tx) => void
  • Common options: tokenShortcodes?: string[], chainShortcodes?: string[], chainTypes?: Array<'ic' | 'evm'>, progressBar?, theme?, useOwnWallet?, plugNPlay?, debug?, disablePaymentButton?, disableAfterSuccess?

Was this page helpful?