Pay Button

The Pay Button component renders a compact, single-action checkout button for a fixed USD amount. Optionally filter available tokens via tokenShortcodes.

Usage

'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,
    // Optional: constrain wallets/tokens shown
    // chainTypes: ['ic','evm','sol'],
    // chainShortcodes: ['ic','base','sol'],
    // tokenShortcodes: ['ic_icp','ic_ckusdc','base_eth','sol_usdc'],
    // progressBar: { enabled: true },
  }
  return (
    <IcpayPayButton
      config={config}
      onSuccess={(detail: IcpaySuccess) => console.log('Paid', detail)}
    />
  )
}

Configuration

• amountUsd?: number
• buttonLabel?: string (used if amountUsd not set)
• progressBar?: { enabled?: boolean }
• Common options: tokenShortcodes?: string[], chainShortcodes?: string[], chainTypes?: Array<'ic' | 'evm' | 'sol'>, theme?, useOwnWallet?, plugNPlay?, debug?, disablePaymentButton?, disableAfterSuccess?

X402 up-to (agentic)

For usage-based / capped X402 payments (scheme: 'upto'), set x402Upto: true. The widget uses createPaymentX402Usd, persists the EVM header via up-to confirm, then either polls the intent until completed or, with x402UptoSkipSettlementWait: true, stops after confirm and treats the flow as “authorization saved” while settlement may finish later.

• x402Upto?: boolean — enable up-to intent and signing flow.
• x402Scheme?: 'exact' | 'upto' — optional explicit scheme (usually inferred from x402Upto).
• x402UptoSkipSettlementWait?: boolean — when true with up-to (EVM): no long poll; onSuccess may receive status: 'authorized_pending_settlement'; progress shows a banner + pending settlement step. See Agentic X402 up-to payments.
• onX402UptoIntent?: (info) => void | Promise<void> — called after confirm with paymentIntentId, cap amountUsd, accepts, paymentHeader, paymentRequirements, metadata — use to notify your backend to start work / store the header.

Full flow, progress behavior, webhook x402_upto_authorization_received, and code examples: Agentic X402 up-to payments and Webhooks.

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 },
    }
  }, [])
  return <icpay-pay-button ref={ref as any} />
}

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