React Integration

Yeld can be integrated with any React application, including React SPA, Next.js, Remix, and other frameworks.

**Integration Options:**
- Client-side components with checkout links
- Server-side actions (Next.js)
- Direct API calls
- Webhook handlers

**Basic Payment Button:**

```tsx
import { useState } from "react";
import { Button } from "@/components/ui/button";

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

  async function handlePayment() {
    setLoading(true);
    
    // Redirect to checkout link
    window.location.href = "https://pay.yeld.app/plan_abc123";
    
    setLoading(false);
  }

  return (
    <Button onClick={handlePayment} disabled={loading}>
      {loading ? "Processing..." : "Pay Now"}
    </Button>
  );
}
```

**Using QR Code:**

```tsx
import { QRCodeSVG } from "react-qr-code";

function PaymentQR() {
  return (
    <div className="flex flex-col items-center">
      <QRCodeSVG
        value="https://pay.yeld.app/plan_abc123"
        size={200}
      />
      <p>Scan to pay</p>
    </div>
  );
}
```

**Install SDK:**
```bash
npm install @yeld/sdk
```

**Initialize Client:**
```tsx
import { YeldClient } from "@yeld/sdk";

const yeld = new YeldClient({
  apiKey: process.env.REACT_APP_YELD_API_KEY,
});

// Create checkout link
const link = await yeld.checkoutLinks.create({
  bizId: "biz_abc123",
  planName: "Premium Plan",
  price: "50.00",
});
```

**Note:** For API keys, use environment variables and only expose public keys to the client.

**In a React App with Backend:**

```tsx
// pages/api/webhooks.ts (Next.js example)
import { NextRequest, NextResponse } from "next/server";
import { createHmac } from "crypto";

export async function POST(request: NextRequest) {
  const signature = request.headers.get("x-yeld-signature");
  const payload = await request.text();

  // Verify signature
  const expected = createHmac("sha256", process.env.YELD_WEBHOOK_SECRET!)
    .update(payload)
    .digest("hex");

  if (signature !== expected) {
    return NextResponse.json({ error: "Invalid signature" }, { status: 400 });
  }

  const event = JSON.parse(payload);

  // Handle event
  switch (event.type) {
    case "payment.confirmed":
      // Update database, send email, etc.
      break;
  }

  return NextResponse.json({ received: true });
}
```

**Using React Context:**

```tsx
// YeldContext.tsx
import { createContext, useContext, useState, useEffect } from "react";

interface YeldContextType {
  balance: number;
  loading: boolean;
  refreshBalance: () => Promise<void>;
}

const YeldContext = createContext<YeldContextType | null>(null);

export function YeldProvider({ children }: { children: React.ReactNode }) {
  const [balance, setBalance] = useState(0);
  const [loading, setLoading] = useState(false);

  const refreshBalance = async () => {
    setLoading(true);
    const data = await fetchBalance();
    setBalance(data);
    setLoading(false);
  };

  return (
    <YeldContext.Provider value={{ balance, loading, refreshBalance }}>
      {children}
    </YeldContext.Provider>
  );
}

export function useYeld() {
  const context = useContext(YeldContext);
  if (!context) throw new Error("useYeld must be used within YeldProvider");
  return context;
}
```

**Usage:**
```tsx
function Dashboard() {
  const { balance, refreshBalance, loading } = useYeld();

  return (
    <div>
      <h1>Balance: ${balance}</h1>
      <button onClick={refreshBalance} disabled={loading}>
        Refresh
      </button>
    </div>
  );
}
```