Pay Button

The Pay Button component renders a compact, single-action checkout button for a fixed USD amount. Optionally show a ledger dropdown; if hidden, it uses defaultSymbol.

Usage

Pay Button

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

export default function Page() {
  const config = {
    publishableKey: process.env.NEXT_PUBLIC_ICPAY_PK,
    amountUsd: 49.99,
    defaultSymbol: 'ICP',
    showLedgerDropdown: 'none',
    progressBar: { enabled: true, mode: 'modal' },
  }
  return (
    <IcpayPayButton
      config={config}
      onSuccess={(detail: IcpaySuccess) => console.log('Paid', detail)}
    />
  )
}

Configuration

amountUsd?: 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 (used if amountUsd not set)
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.

Onramp (Transak)

Enable card onramp from the wallet selector by configuring onramp and handle the success event. The component will:

Create an onramp intent via the SDK (createPaymentUsd with onrampPayment: true).
Open Transak using the returned sessionId.
Close the Transak modal on TRANSAK_ORDER_SUCCESSFUL and start notifying ICPay until completion.

'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,
      amountUsd: 49.99,
      onramp: {
        environment: 'STAGING',
        apiKey: process.env.NEXT_PUBLIC_TRANSAK_PK,
        creditCardLabel: 'Pay with credit card',
        enabled: true,
      },
      progressBar: { enabled: true, mode: 'modal' },
    }
  }, [])
  return <icpay-pay-button ref={ref as any} />
}

The progress bar updates “wallet” to “Transak Started – Awaiting Transak information” during onramp.