Onramp & Add Funds

NEXT_PUBLIC_CROSSMINT_CLIENT_SIDE_API_KEY="_YOUR_CLIENT_API_KEY_"
CROSSMINT_SERVER_SIDE_API_KEY="_YOUR_SERVER_API_KEY_"

"use server";

const USDC_TOKEN_LOCATORS = {
    solanaDevnet: "solana:4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU",
    baseSepolia: "base-sepolia:0x036CbD53842c5426634e7929541eC2318f3dCF7e",
    stellarTestnet: "stellar:CBIELTK6YBZJU5UP2WWQEUCYKLPU6AUNZ2BQ4WWFEIE3USCIHMXQDAMA",
};

interface CreateOrderParams {
    walletAddress: string;
    receiptEmail: string;
    amount: string;
    chain: "solanaDevnet" | "baseSepolia" | "stellarTestnet";
}

export async function createOrder({ walletAddress, receiptEmail, amount, chain }: CreateOrderParams) {
    const serverApiKey = process.env.CROSSMINT_SERVER_SIDE_API_KEY;
    if (serverApiKey == null) {
        throw new Error("CROSSMINT_SERVER_SIDE_API_KEY is not set");
    }

    const response = await fetch("https://staging.crossmint.com/api/2022-06-09/orders", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "x-api-key": serverApiKey,
        },
        body: JSON.stringify({
            lineItems: [
                {
                    tokenLocator: USDC_TOKEN_LOCATORS[chain],
                    executionParameters: {
                        mode: "exact-in",
                        amount,
                    },
                },
            ],
            payment: {
                method: "card",
                receiptEmail,
            },
            recipient: {
                walletAddress,
            },
        }),
    });

    if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message || "Failed to create order");
    }

    return response.json();
}

"use client";

import { useState } from "react";
import {
    CrossmintEmbeddedCheckout,
    useCrossmintAuth,
    useWallet,
} from "@crossmint/client-sdk-react-ui";
import { createOrder } from "../actions/createOrder";

export default function OnrampCheckout() {
    const { wallet } = useWallet();
    const { user } = useCrossmintAuth();
    const [order, setOrder] = useState<{ orderId: string; clientSecret: string } | null>(null);
    const [amount, setAmount] = useState("5");
    const [isLoading, setIsLoading] = useState(false);

    async function handleSubmit() {
        if (!wallet || !user?.email) return;
        setIsLoading(true);
        try {
            const result = await createOrder({
                walletAddress: wallet.address,
                receiptEmail: user.email,
                amount,
                chain: "baseSepolia",
            });
            setOrder({ orderId: result.order.orderId, clientSecret: result.clientSecret });
        } catch (error) {
            console.error("Failed to create order:", error);
        } finally {
            setIsLoading(false);
        }
    }

    if (order != null) {
        return (
            <div className="max-w-[450px] w-full mx-auto p-6 rounded-xl bg-white">
                <CrossmintEmbeddedCheckout
                    orderId={order.orderId}
                    clientSecret={order.clientSecret}
                    payment={{
                        receiptEmail: user?.email,
                        crypto: { enabled: false },
                        fiat: { enabled: true },
                        defaultMethod: "fiat",
                    }}
                />
            </div>
        );
    }

    return (
        <div className="max-w-md mx-auto p-8 rounded-xl border border-gray-300 bg-white shadow-sm space-y-6">
            <h2 className="text-2xl font-semibold text-gray-900">Add funds to your wallet</h2>

            <div className="space-y-2">
                <label className="text-sm font-medium text-gray-900">Recipient Wallet</label>
                <div className="w-full px-3 py-2 rounded-lg border border-gray-300 bg-gray-50 text-gray-900 text-sm font-mono break-all">
                    {wallet?.address ?? "Connect a wallet…"}
                </div>
            </div>

            <div className="space-y-2">
                <label className="text-sm font-medium text-gray-900">Amount (USD)</label>
                <input
                    type="number"
                    value={amount}
                    onChange={(e) => setAmount(e.target.value)}
                    className="w-full px-3 py-2 rounded-lg border border-gray-300 bg-white text-gray-900 text-sm"
                />
            </div>

            <button
                onClick={handleSubmit}
                disabled={isLoading || !wallet || !user?.email}
                className="w-full py-3 rounded-lg bg-black text-white font-medium hover:bg-gray-800 disabled:opacity-50 transition-colors"
            >
                {isLoading ? "Creating Order…" : "Continue to Checkout"}
            </button>
        </div>
    );
}

import OnrampCheckout from "./components/OnrampCheckout";

export default function FundPage() {
    return (
        <main className="min-h-screen flex items-center justify-center">
            <OnrampCheckout />
        </main>
    );
}