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, mode: 'modal' },
  }
  return (
    <IcpayTipJar
      config={config}
      onSuccess={(detail: IcpaySuccess) => console.log('Tip completed', detail)}
    />
  )
}

Configuration

amountsUsd?: number[]
defaultAmountUsd?: number
cryptoOptions?: { symbol: string; label: string; canisterId?: string }[]
defaultSymbol?: string (e.g., 'ICP')
buttonLabel?: string (supports {amount} and {symbol} placeholders)
onSuccess?: (tx) => void
Token selector:
- Per-component: showLedgerDropdown?: boolean (legacy) — if true, always render a dropdown.
- Global: showLedgerDropdown?: 'buttons' | 'dropdown' | 'none' — recommended. If 'buttons', renders chips when multiple ledgers are available; 'dropdown' forces dropdown; 'none' hides selector.
Common options: progressBar?, theme?, useOwnWallet?, plugNPlay?, debug?, disablePaymentButton?, disableAfterSuccess?

Onramp (Transak)

Enable card tips with Transak:

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

export default function Page() {
  const ref = useRef<any>(null)
  useEffect(() => {
    if (!ref.current) return
    ref.current.config = {
      publishableKey: process.env.NEXT_PUBLIC_ICPAY_PK,
      amountsUsd: [1,5,10],
      defaultAmountUsd: 5,
      onramp: {
        environment: 'STAGING',
        apiKey: process.env.NEXT_PUBLIC_TRANSAK_PK,
        creditCardLabel: 'Pay with credit card',
        enabled: true,
      },
      progressBar: { enabled: true, mode: 'modal' },
    }
  }, [])
  return <icpay-tip-jar ref={ref as any} />
}

The first step shows “Transak Started — Awaiting Transak information” during onramp.