# Complete Examples Copy-paste ready examples for different frameworks and use cases. ## 🎯 Framework-Specific Examples ### Next.js App Router Example ```tsx // app/providers.tsx "use client"; import { getDefaultConfig, RozoPayProvider } from "@rozoai/intent-pay"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { createConfig, WagmiProvider } from "wagmi"; const wagmiConfig = createConfig(getDefaultConfig({ appName: "Demo" })); const queryClient = new QueryClient(); export function Providers({ children }: { children: React.ReactNode }) { return ( {children} ); } // app/layout.tsx import { Providers } from "./providers"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } // app/page.tsx ("use client"); import { RozoPayButton } from "@rozoai/intent-pay"; import { baseUSDC } from "@rozoai/intent-common"; import { getAddress } from "viem"; export default function HomePage() { return ( alert("Payment successful! 🎉")} /> ); } ``` ### Vite/CRA Example ```tsx // src/providers.tsx import { getDefaultConfig, RozoPayProvider } from "@rozoai/intent-pay"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { createConfig, WagmiProvider } from "wagmi"; const wagmiConfig = createConfig(getDefaultConfig({ appName: "Demo" })); const queryClient = new QueryClient(); export function Providers({ children }: { children: React.ReactNode }) { return ( {children} ); } // src/App.tsx import { RozoPayButton } from "@rozoai/intent-pay"; import { baseUSDC } from "@rozoai/intent-common"; import { getAddress } from "viem"; import { Providers } from "./providers"; function PaymentApp() { return (

Crypto Payment Demo

console.log("Payment completed! 🎉")} />
); } export default function App() { return ( ); } ``` ## 🎯 Use Case Examples ### E-commerce Checkout ```tsx "use client"; import { RozoPayButton, useRozoPayUI } from "@rozoai/intent-pay"; import { baseUSDC } from "@rozoai/intent-common"; import { getAddress } from "viem"; import { useState, useEffect } from "react"; const PRODUCTS = [ { id: 1, name: "Basic Plan", price: "5", description: "Essential features" }, { id: 2, name: "Pro Plan", price: "25", description: "Advanced features" }, { id: 3, name: "Enterprise", price: "100", description: "Full features" }, ]; function EcommerceCheckout() { const { resetPayment } = useRozoPayUI(); const [selectedProduct, setSelectedProduct] = useState(PRODUCTS[0]); // Reset payment when selected product changes useEffect(() => { resetPayment({ toChain: baseUSDC.chainId, toAddress: getAddress("0x742d35Cc6634C0532925a3b8D454A3fE1C11C4e2"), toToken: getAddress(baseUSDC.token), toUnits: selectedProduct.price, }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedProduct]); return (

Choose Your Plan

{PRODUCTS.map((product) => (
setSelectedProduct(product)} >

{product.name}

{product.description}

${product.price}

))}
{ console.log("Purchase completed!", event); alert(`${selectedProduct.name} purchased successfully! 🎉`); }} />
); } ``` ### Donation Component ```tsx "use client"; import { RozoPayButton, useRozoPayUI } from "@rozoai/intent-pay"; import { baseUSDC, TokenSymbol } from "@rozoai/intent-common"; import { getAddress } from "viem"; import { useState, useEffect } from "react"; const DONATION_AMOUNTS = ["5", "10", "25", "50", "100"]; function DonationComponent() { const { resetPayment } = useRozoPayUI(); const [customAmount, setCustomAmount] = useState(""); const [selectedAmount, setSelectedAmount] = useState("10"); const finalAmount = customAmount || selectedAmount; // Reset payment when donation amount changes useEffect(() => { if (finalAmount && parseFloat(finalAmount) > 0) { resetPayment({ toChain: baseUSDC.chainId, toAddress: getAddress("0x742d35Cc6634C0532925a3b8D454A3fE1C11C4e2"), toToken: getAddress(baseUSDC.token), toUnits: finalAmount, }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [finalAmount]); return (

Support Our Project

Choose donation amount:

{DONATION_AMOUNTS.map((amount) => ( ))}
setCustomAmount(e.target.value)} />
{finalAmount && parseFloat(finalAmount) > 0 && ( { alert(`Thank you for your $${finalAmount} donation! 🙏`); }} /> )} {(!finalAmount || parseFloat(finalAmount) <= 0) && (
Please select or enter a donation amount
)}
); } ``` ### Stellar Payout Example ```tsx "use client"; import { RozoPayButton } from "@rozoai/intent-pay"; import { rozoStellarUSDC } from "@rozoai/intent-common"; export default function StellarPayment() { return ( { console.log("Stellar payment completed!", event.txHash); alert("Payment successful! 🎉"); }} /> ); } ``` ### Token Symbol Preference Example ```tsx "use client"; import { RozoPayButton } from "@rozoai/intent-pay"; import { baseUSDC, TokenSymbol } from "@rozoai/intent-common"; import { getAddress } from "viem"; // Default behavior (no prop needed) - prioritizes USDC and USDT export default function DefaultPayment() { return ( ); } // Prioritize USDC and USDT across all chains export function PreferredSymbolsPayment() { return ( ); } // Prioritize EURC only // Note: EURC can only be sent to EURC - ensure toToken is an EURC token address export function EURCPayment() { return ( ); } ``` ## 📖 Next Steps * [Check API reference](https://docs.rozo.ai/integration/rozointentpay/api-reference) for all available props * [See troubleshooting guide](https://docs.rozo.ai/integration/rozointentpay/troubleshooting) for common issues * [Use AI prompts](https://docs.rozo.ai/integration/rozointentpay/ai-prompts) for code generation --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.rozo.ai/integration/rozointentpay/examples.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.