Widget with API Customization

// app/api/OZZOBiT/quote/route.ts
import { NextRequest } from 'next/server'

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url)
  const cryptoCurrency = searchParams.get('crypto') || 'ETH'
  const fiatAmount = searchParams.get('amount') || '100'
  const countryCode = searchParams.get('country') || 'US'

  // Call OZZOBiT Lookup API for quote
  const quoteResponse = await fetch(
    `https://OZZOBiT.com/api/api/v2/lookup/quote?${new URLSearchParams({
      partnerApiKey: process.env.OZZOBiT_PUBLIC_KEY!,
      fiatCurrency: 'USD',
      cryptoCurrency,
      fiatAmount,
      network: 'ethereum',
      quoteCountryCode: countryCode,
    })}`
  )

  const quote = await quoteResponse.json()

  // Apply your custom business logic
  const adjustedQuote = {
    ...quote,
    // Add your markup or discount
    yourFee: calculateYourFee(quote.fiatAmount),
    displayPrice: applyPricingRules(quote),
  }

  return Response.json(adjustedQuote)
}

// components/BuyCryptoSection.tsx
'use client'

import { useState, useEffect } from 'react'
import dynamic from 'next/dynamic'

const OZZOBiTWidget = dynamic(() => import('./OZZOBiTWidget'), { ssr: false })

interface BuyCryptoProps {
  walletAddress: string
}

export default function BuyCryptoSection({ walletAddress }: BuyCryptoProps) {
  const [quote, setQuote] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    async function fetchQuote() {
      try {
        const res = await fetch('/api/OZZOBiT/quote?crypto=ETH&amount=100')
        const data = await res.json()
        setQuote(data)
      } finally {
        setLoading(false)
      }
    }
    fetchQuote()
  }, [])

  if (loading) return <div>Loading pricing...</div>

  return (
    <div>
      {/* Your custom UI showing quote info */}
      {quote && (
        <div className="quote-display">
          <p>1 ETH = ${quote.responseValue?.toFixed(2)} USD</p>
          <p>Your price includes a small platform fee</p>
        </div>
      )}

      {/* Launch OZZOBiT Widget with pre-filled values */}
      <OZZOBiTWidget
        config={{
          apiKey: process.env.NEXT_PUBLIC_OZZOBiT_API_KEY!,
          productsAvailed: 'BUY',
          network: 'ethereum',
          defaultCryptoCurrency: 'ETH',
          defaultFiatCurrency: 'USD',
          walletAddress,
          fiatAmount: quote?.fiatAmount || 100,
          partnerOrderId: generatePartnerOrderId(),
        }}
        onSuccess={handleSuccess}
        onFailure={handleFailure}
      />
    </div>
  )
}

function generatePartnerOrderId(): string {
  return `ORDER-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
}

// After widget success/failure:
async function handleSuccess(orderData: any) {
  // 1. Show success state to user
  showSuccessUI(orderData)
  
  // 2. Sync order status with your backend
  await fetch('/api/orders/sync', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      OZZOBiTOrderId: orderData.id,
      partnerOrderId: orderData.partnerOrderId,
      status: 'COMPLETED',
      cryptoAmount: orderData.cryptoAmount,
      fiatAmount: orderData.fiatAmount,
    }),
  })
  
  // 3. Trigger any post-purchase actions
  await triggerPostPurchaseHooks(orderData)
}