React & Next.js UI SDK

"use client"
 
import { KkhayPayButton } from "@kkhay/react"
 
export default function CheckoutPage() {
  return (
    <div className="p-8">
      <h2 className="text-xl font-bold">Complete Your Purchase</h2>
      
      <KkhayPayButton
        apiKey="kkhay_live_YOUR_PUBLIC_KEY"
        amount={49.99}
        currency="USD"
        orderId="ORDER-4401"
        title="1-Year Premium Pass"
        payNetwork="bsc"        // Optional: preselect BSC, Polygon, Solana...
        payToken="USDT"         // Optional: preselect USDT, USDC, BTC...
        onSuccess={(invoice) => {
          console.log("Payment confirmed on-chain!", invoice.id)
          window.location.href = "/checkout/thank-you"
        }}
        onCancel={() => {
          console.log("Modal closed by user")
        }}
      />
    </div>
  )
}

"use client"
 
import { useKkhayPayment } from "@kkhay/react"
 
export function CustomCheckout() {
  const {
    openModal,
    status,        // "idle" | "waiting" | "paid" | "expired"
    amountPaid,
    depositAddress,
    timeRemaining,
  } = useKkhayPayment({
    apiKey: "kkhay_live_YOUR_KEY",
    amount: 100,
    currency: "USD",
  })
 
  return (
    <button
      onClick={openModal}
      className="bg-emerald-500 text-white font-bold py-2 px-4 rounded"
    >
      Pay with 500+ Cryptos ({status})
    </button>
  )
}