# 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",
      "apiUrl": "https://api.icpay.org",
      "amountUsd": 12,
      "buttonLabel": "Pay ${amount} with crypto",
      "metadata": {
        "context": "pay-button"
      },
      "plugNPlay": {
        "enabled": true,
        "adapters": {
          "walletconnect": {
            "enabled": true,
            "config": {
              "projectId": "39ece95f2d812230831471a551ddaf3d",
              "umdUrls": [
                "/wc/index.umd.js"
              ]
            }
          },
          "coinbase": {
            "enabled": true
          }
        }
      }
    }
    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>
}