Progress Bar

Every widget can render a progress indicator and it is turned on by default. You can choose the visual mode and toggle it per widget via the progressBar 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,
      progressBar: { enabled: true, mode: 'modal' },
    }
  }, [])
  return <icpay-tip-jar ref={ref as any} />
}

Configuration

• progressBar.enabled?: boolean default true
• progressBar.mode?: 'modal' | 'horizontal' | 'vertical' | 'inline'

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 })
})