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?