Premium Content

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,
      priceUsd: 5,
      imageUrl: '/cover.jpg',
      onSuccess: (tx: any) => console.log('Unlocked', tx),
      theme: { primaryColor: '#0ea5e9' },
      progressBar: { enabled: true, mode: 'modal' },
    }
  }, [])
  return <icpay-premium-content ref={ref as any} />
}

Configuration

• priceUsd: number
• cryptoOptions?: { symbol: string; label: string; canisterId?: string }[]
• imageUrl?: string
• defaultSymbol?: string
• buttonLabel?: string (supports {amount} and {symbol} placeholders)
• onSuccess?: (tx) => void
• Token selector:
  • Global showLedgerDropdown?: 'buttons' | 'dropdown' | 'none' controls selector UI
• Common options: progressBar?, theme?, useOwnWallet?, plugNPlay?, debug?, disablePaymentButton?, disableAfterSuccess?

Onramp (Transak)

Offer card checkout for premium unlocks by setting onramp:

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

On success, the Transak modal closes and the widget proceeds to confirmation and completion.