React Integration

Learn how to integrate ZynPay into your React application with a complete example.

Live Demo

Try out the payment flow below. This is a simulated demo running on Testnet mode.

Live Demo

Testnet

Connect Wallet

Connect your MetaMask wallet to try the payment flow on Testnet.

Implementation

The following code shows how to build the checkout component on the left.

tsx
import { useState } from 'react'
import { ZynPayClient } from '@zynpay/sdk'
import { BrowserProvider } from 'ethers'

export function Checkout() {
  const [loading, setLoading] = useState(false)

  async function handlePay() {
    setLoading(true)
    try {
      // 1. Connect Wallet
      const provider = new BrowserProvider(window.ethereum)
      const signer = await provider.getSigner()

      // 2. Initialize Client
      const client = new ZynPayClient({
        chainId: 84532, // Base Sepolia
        merchantAddress: "YOUR_WALLET_ADDRESS"
      })

      // 3. Create Payment
      const tx = await client.createPayment({
        signer,
        amount: "10.00",
        orderId: "order_123"
      })
      
      await tx.wait()
      alert("Payment Successful!")
      
    } catch (err) {
      console.error(err)
    } finally {
      setLoading(false)
    }
  }

  return (
    <button onClick={handlePay} disabled={loading}>
      {loading ? "Processing..." : "Pay 10 USDC"}
    </button>
  )
}