[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import ConsultationPage from "@/components/consultation-page" export default function Home() { return } [V0_FILE]plaintext:file="public/strategic-planning-session.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/strategic-planning-session-ox0s0RcT258OtFl1qTHRKgDsojW7WB.png" isMerged="true" [V0_FILE]plaintext:file="public/abstract-braid-payment.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-braid-payment-oOSuOVNIv2IGGV3eQUwKCovS5P6VpW.png" isMerged="true" [V0_FILE]xml:file="public/braidpay-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo-text%20copy-75e97qZdamV8HVlCkz81x9Ba3VwscI.svg" isMerged="true" [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "dependencies": { "crypto": "^1.0.1" } } [V0_FILE]typescriptreact:file="app/api/create-payment/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" export async function POST(req: Request) { try { const { email } = await req.json() if (!email) { return NextResponse.json({ message: "Email is required" }, { status: 400 }) } // In a real implementation, you might want to store this email in a database // to associate it with the payment later // Use the payment link directly without appending email const paymentUrl = process.env.NEXT_PUBLIC_PAYMENT_LINK // Make sure we have a valid payment link if (!paymentUrl) { return NextResponse.json({ message: "Payment link not configured" }, { status: 500 }) } console.log("Using payment URL:", paymentUrl) return NextResponse.json({ paymentUrl }) } catch (error) { console.error("Error creating payment:", error) return NextResponse.json({ message: "Failed to create payment" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/test-payment-url/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function GET() { const paymentUrl = process.env.NEXT_PUBLIC_PAYMENT_LINK if (!paymentUrl) { return NextResponse.json({ error: "Payment URL not configured" }, { status: 500 }) } return NextResponse.json({ paymentUrl, message: "This is the raw payment URL that will be used in the iframe", }) } [V0_FILE]typescriptreact:file="components/stablecoin-button.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import Image from "next/image" // Utility function for class names function cn(...classes: string[]) { return classes.filter(Boolean).join(" ") } // StablecoinButton component interface StablecoinButtonProps { design?: "modern" | "pill" | "minimal" size?: "small" | "medium" | "large" variant?: "default" | "alternative" className?: string children?: React.ReactNode textColor?: string backgroundColor?: string showIcons?: boolean showUSDC?: boolean showUSDT?: boolean onClick?: () => void } export default function StablecoinButton({ design = "modern", size = "large", variant = "default", className = "", children, textColor = "#FFFFFF", backgroundColor = "#3B82F6", showIcons = true, showUSDC = true, showUSDT = true, onClick, }: StablecoinButtonProps) { const buttonText = children || (variant === "alternative" ? "Pay with USDC & USDT" : "USDC / USDT Accepted Here") const sizeClasses = { small: "px-3 py-2 text-sm", medium: "px-4 py-2.5 text-base", large: "px-6 py-3 text-lg", } const logoSizes = { small: 20, medium: 24, large: 32, } // Simplified design class generation focusing on structure const getStructuralClasses = () => { let structuralClasses = "border rounded-lg" if (design === "pill") { structuralClasses = "border rounded-full" } if (design === "minimal") { structuralClasses += " shadow-sm border-gray-200" } // Add other minor structural tweaks if needed, colors are handled by inline style return structuralClasses } const buttonStyle = { color: textColor, backgroundColor: backgroundColor, } const hoverClasses = "transition-all duration-300 hover:brightness-110 hover:-translate-y-px hover:shadow-lg shadow-md" return ( ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; --radius: 0.5rem; } body { @apply bg-slate-900 text-slate-200; } .dialog-content { @apply bg-slate-800 border-slate-700 text-slate-200; } .dialog-title { @apply text-white; } .dialog-description { @apply text-slate-400; } [V0_FILE]typescriptreact:file="components/consultation-page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import { CheckCircle2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import StablecoinButton from "@/components/stablecoin-button" import PaymentForm from "@/components/payment-form" export default function ConsultationPage() { const [isPaymentOpen, setIsPaymentOpen] = useState(false) const [paymentSuccess, setPaymentSuccess] = useState(false) return (

{/* Hero Section */}

✨ Expert Business Strategy Sessions

Transform Your Business Strategy

Get personalized strategies and actionable insights in a one-on-one session with our expert consultant.

setIsPaymentOpen(true)}> Book Your Consultation with USDC & USDT

{/* Consultant Profile */}

David Chen

Senior Business Strategist

500+ consultations delivered

Former VP of Strategy at Fortune 500 companies with 15+ years of experience in business development and growth strategies.

{/* Benefits */}

What You'll Get

Strategic Planning

Custom roadmap for your goals

Quick Solutions

Immediate actionable advice

Expert Insights

Industry-specific guidance

Follow-up Notes

Detailed session summary

{/* FAQ */}

Frequently Asked Questions

How should I prepare for the consultation? Prepare a brief overview of your current situation and specific questions you'd like to address. This helps us make the most of our time together. What happens after the session? You'll receive a detailed summary of our discussion, including actionable steps and recommendations within 24 hours of our call. Can I get a recording of the session? Yes, upon request, we can provide a recording of the session for your future reference, at no additional cost.

{/* Pricing */}

Premium Consultation

30-minute focused session

Personalized action plan

Session recording included

Written summary report

$49.00

One-time consultation fee

setIsPaymentOpen(true)}> Book Your Consultation with USDC & USDT

{/* Disclaimer */}

This is a test page as a part of our BraidPay Use Case demos. This page does not actually sell any consultations.

{/* Footer */} {/* Payment Dialog */}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Consultation booking with BraidPay integration", description: "Book expert business strategy consultations with Stablecoin payments via BraidPay", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/api/check-payment/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" // In-memory storage for completed payments (in a real app, this would be a database) // This is just for demo purposes const completedPayments = new Map() // Function to mark a payment as completed (called by the webhook handler) export function markPaymentCompleted(email: string) { completedPayments.set(email.toLowerCase(), true) console.log(`Marked payment as completed for: ${email}`) } export async function POST(req: Request) { try { const { email, paymentLinkID } = await req.json() if (!email || !paymentLinkID) { return NextResponse.json({ message: "Email and paymentLinkID are required" }, { status: 400 }) } // Check if this email has a completed payment const isCompleted = completedPayments.get(email.toLowerCase()) if (isCompleted) { console.log(`Payment found as completed for: ${email}`) return NextResponse.json({ success: true, isPending: false, message: "Payment is completed", }) } // If not completed, return pending status return NextResponse.json({ success: false, isPending: true, message: "Payment is pending", }) } catch (error) { console.error("Error checking payment:", error) return NextResponse.json({ message: "Failed to check payment status" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/braidpay-webhook/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" import crypto from "crypto" import { markPaymentCompleted } from "../check-payment/route" interface WebhookPayload { paymentLinkID: string paymentID: string fromAddress: string toAddress: string hash: string network: string token: string amount: number status: "PENDING" | "COMPLETED" createdAt: string updatedAt: string Payer_Email?: string [key: string]: unknown } export async function POST(req: Request) { try { const signature = req.headers.get("x-webhook-signature") if (!signature) { return NextResponse.json({ message: "Missing webhook signature" }, { status: 400 }) } const payload: WebhookPayload = await req.json() // Verify the webhook signature const isValid = verifyWebhookSignature( process.env.BRAIDPAY_WEBHOOK_SECRET!, payload.toAddress, payload.amount, signature, ) if (!isValid) { return NextResponse.json({ message: "Invalid webhook signature" }, { status: 401 }) } // Process the webhook if (payload.status === "COMPLETED") { // In a real implementation, you would update your database console.log("Payment completed:", payload) // If you have the user's email, you can use it to update their account if (payload.Payer_Email) { // Update user's account console.log("Updating account for:", payload.Payer_Email) // Mark this payment as completed so the polling can detect it markPaymentCompleted(payload.Payer_Email) } } return NextResponse.json({ received: true }) } catch (error) { console.error("Error processing webhook:", error) return NextResponse.json({ message: "Failed to process webhook" }, { status: 500 }) } } // Verify the webhook signature function verifyWebhookSignature(webhookSecret: string, toAddress: string, amount: number, signature: string): boolean { const data = `${toAddress}${amount}` const expectedSignature = crypto.createHmac("sha256", webhookSecret).update(data).digest("hex") return crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expectedSignature)) } [V0_FILE]typescriptreact:file="components/payment-form.tsx" isEdit="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Loader2, CheckCircle2 } from "lucide-react" interface PaymentFormProps { onSuccess: () => void } export default function PaymentForm({ onSuccess }: PaymentFormProps) { const [email, setEmail] = useState("") const [emailError, setEmailError] = useState(null) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const [paymentUrl, setPaymentUrl] = useState(null) const [isPolling, setIsPolling] = useState(false) const [iframeLoaded, setIframeLoaded] = useState(false) const iframeRef = useRef(null) // Simple email validation const validateEmail = (email: string) => { const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ return re.test(email) } // Handle form submission const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() // Reset errors setEmailError(null) setError(null) // Validate email if (!email) { setEmailError("Email is required") return } if (!validateEmail(email)) { setEmailError("Please enter a valid email address") return } setIsLoading(true) try { // Create payment session const response = await fetch("/api/create-payment", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ email, paymentLinkID: process.env.NEXT_PUBLIC_PAYMENT_LINK_ID, }), }) if (!response.ok) { const errorData = await response.json() throw new Error(errorData.message || "Failed to create payment session") } const { paymentUrl: url } = await response.json() // Set the payment URL setPaymentUrl(url) setIsLoading(false) // Start polling for payment status startPolling(email) } catch (err) { console.error("Payment error:", err) setError(err instanceof Error ? err.message : "An unexpected error occurred") setIsLoading(false) } } // Start polling for payment status const startPolling = (email: string) => { setIsPolling(true) } // Poll for payment status useEffect(() => { if (!isPolling || !email) return const maxAttempts = 60 // 5 minutes (5s intervals) let attempts = 0 let intervalId: NodeJS.Timeout | null = null const checkStatus = async () => { try { if (attempts >= maxAttempts) { if (intervalId) clearInterval(intervalId) setError("Payment verification timed out. Please try again.") setIsPolling(false) return } attempts++ const response = await fetch("/api/check-payment", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ email, paymentLinkID: process.env.NEXT_PUBLIC_PAYMENT_LINK_ID, }), }) if (!response.ok) { const errorData = await response.json() throw new Error(errorData.message || "Failed to check payment status") } const data = await response.json() const { success, isPending } = data if (success) { if (intervalId) clearInterval(intervalId) setIsPolling(false) onSuccess() return } if (!isPending) { if (intervalId) clearInterval(intervalId) setError("Payment was not completed. Please try again.") setIsPolling(false) return } } catch (err) { console.error("Error checking payment status:", err) if (intervalId) clearInterval(intervalId) setError(err instanceof Error ? err.message : "An unexpected error occurred") setIsPolling(false) } } // Check immediately on start checkStatus() intervalId = setInterval(checkStatus, 5000) // Check every 5 seconds // Cleanup function return () => { if (intervalId) clearInterval(intervalId) } }, [isPolling, email, onSuccess]) // Handle iframe load event const handleIframeLoad = () => { setIframeLoaded(true) console.log("Iframe loaded successfully") } // Handle iframe error const handleIframeError = () => { console.error("Iframe failed to load") setError("Failed to load payment page. Please try opening in a new window.") } return (

{/* Left side - Booking details (always visible) */}

Premium Consultation

30-minute session with David Chen

Personalized action plan

Session recording included

Written summary report

Total $49.00

{isPolling && (

Waiting for payment...

)}

{/* Right side - Form or iframe */}

{!paymentUrl ? ( ) : (

{!iframeLoaded && (

)}