Coffee Shop

Usage

Coffee Shop

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

export default function Page() {
  const config = {
    publishableKey: process.env.NEXT_PUBLIC_ICPAY_PK,
    items: [
      { name: 'Espresso', priceUsd: 3 },
      { name: 'Latte', priceUsd: 5 },
    ],
    defaultItemIndex: 0,
    progressBar: { enabled: true },
  }
  return (
    <IcpayCoffeeShop
      config={config}
      onSuccess={(detail: IcpayCoffeeSuccess) => console.log('Purchased', detail)}
    />
  )
}

Configuration

items: Array<{ name: string; priceUsd: number }>
defaultItemIndex?: number
buttonLabel?: string (supports {amount} and {symbol} placeholders)
onSuccess?: (tx) => void
Common options: tokenShortcodes?: string[], chainShortcodes?: string[], chainTypes?: Array<'ic' | 'evm'>, progressBar?, theme?, useOwnWallet?, plugNPlay?, debug?, disablePaymentButton?, disableAfterSuccess?

Onramp (Transak)

Let buyers pay by card using Transak. Add the onramp block to enable the “Pay with credit card” action.

'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,
      items: [{ name: 'Espresso', priceUsd: 3 }, { name: 'Latte', priceUsd: 5 }],
      onramp: {
        environment: 'STAGING',
        apiKey: process.env.NEXT_PUBLIC_TRANSAK_PK,
        creditCardLabel: 'Pay with credit card',
        enabled: true,
      },
      progressBar: { enabled: true },
    }
  }, [])
  return <icpay-coffee-shop ref={ref as any} />
}

Progress updates match other widgets (wallet step set to “Transak Started”).