Progress Bar

Every widget can render a progress indicator and it is turned on by default. You can enable or disable it per widget via the progressBar.enabled option.

Usage

'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,
      progressBar: { enabled: true },
    }
  }, [])
  return <icpay-tip-jar ref={ref as any} />
}

Configuration

• progressBar.enabled?: boolean default true

Tip: Style preferences can be combined with theme (e.g., primaryColor) on each widget. Other widgets can link here to centralize progress bar options.

Events

The progress bar listens to SDK events and reflects state automatically:

• icpay-sdk-transaction-created, -updated, -completed, -failed
• icpay-sdk-transaction-mismatched — treated as error; shows message “Amount mismatch. Requested X, paid Y.”

Example custom listener:

window.addEventListener('icpay-sdk-transaction-mismatched', (e: any) => {
  const { requestedAmount, paidAmount } = e.detail || {}
  console.warn('Payment amount mismatch', { requestedAmount, paidAmount })
})