Live Preview
your-website.com
# Install
npm install @ic-pay/icpay-widget
# Usage (app/checkout/page.tsx)
'use client'
import { IcpayPayButton, IcpaySuccess } from '@ic-pay/icpay-widget/react'
export default function Checkout(){
const config = {
"publishableKey": "pk_test_key1",
"amountUsd": 12,
"buttonLabel": "Pay ${amount} with {symbol}",
"defaultSymbol": "ICP",
"showLedgerDropdown": "none",
"cryptoOptions": [
{
"symbol": "ICP",
"label": "Internet Computer"
}
],
"metadata": {
"context": "pay-button"
}
}
return <IcpayPayButton config={config} onSuccess={(detail: IcpaySuccess) => console.log('success', detail)} />
}
Next.js: import React wrappers from
@ic-pay/icpay-widget/react
. Elements are registered automatically.3. Payment tokens
Pick tokens to include. Leave empty to include all verified.
Metadata
Default fields are added automatically:
context
and senderPrincipal
.