# Install
npm install @ic-pay/icpay-widget

# Usage (app/checkout/page.tsx)
'use client'
import { useEffect, useRef } from 'react'
import '@ic-pay/icpay-widget'

export default function Checkout(){
  const elRef = useRef<any>(null)
  useEffect(() => {
    const el = elRef.current as any
    if (!el) return
    el.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"
      }
    }
    const onSuccess = (e: any) => console.log('success', e.detail)
    const onError = (e: any) => console.error('error', e.detail)
    el.addEventListener('icpay-pay', onSuccess)
    el.addEventListener('icpay-error', onError)
    return () => {
      el.removeEventListener('icpay-pay', onSuccess)
      el.removeEventListener('icpay-error', onError)
    }
  }, [])
  return <icpay-pay-button ref={elRef}></icpay-pay-button>
}