Article Paywall

Usage

Article Paywall

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

export default function Page() {
  const config = {
    publishableKey: process.env.NEXT_PUBLIC_ICPAY_PK,
    priceUsd: 2,
    title: 'Premium Article',
    preview: 'This is a short preview...',
    lockedContent: 'Full content goes here...',
    progressBar: { enabled: true, mode: 'modal' },
  }
  return (
    <IcpayArticlePaywall
      config={config}
      onSuccess={(detail: IcpaySuccess) => console.log('Unlocked', detail)}
    />
  )
}

Configuration

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

Was this page helpful?