One-Tap Pay - Tokens (React)

NEXT_PUBLIC_CROSSMINT_CLIENT_API_KEY="_YOUR_CLIENT_API_KEY_"
SERVER_API_KEY="_YOUR_SERVER_API_KEY_"

"use server";

const serverApiKey = process.env.SERVER_API_KEY ?? "";

const baseUrl = serverApiKey.startsWith("sk_production")
  ? "https://www.crossmint.com"
  : "https://staging.crossmint.com";

// XMEME test token on Solana (staging only)
const TOKEN_LOCATOR = "solana:7EivYFyNfgGj8xbUymR7J4LuxUHLKRzpLaERHLvi7Dgu";

export async function createOrder(
  amountUsd: string,
  email: string,
  walletAddress: string,
) {
  const res = await fetch(`${baseUrl}/api/2022-06-09/orders`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-api-key": serverApiKey,
    },
    body: JSON.stringify({
      lineItems: {
        tokenLocator: TOKEN_LOCATOR,
        executionParameters: {
          mode: "exact-in", // amount is the exact USD to spend
          amount: amountUsd,
          maxSlippageBps: "500",
        },
      },
      payment: {
        method: "card", // wallet payments ride the card rail at creation time
        receiptEmail: email,
      },
      recipient: {
        walletAddress,
      },
    }),
  });

  const data = await res.json();
  if (!res.ok) {
    throw new Error(data.message ?? "Failed to create order");
  }
  return {
    orderId: data.order.orderId as string,
    clientSecret: data.clientSecret as string,
  };
}

"use client";

import { useEffect, useState } from "react";
import {
  CrossmintProvider,
  CrossmintCheckoutProvider,
  CrossmintEmbeddedCheckout,
  useCrossmintCheckout,
} from "@crossmint/client-sdk-react-ui";

import { createOrder } from "./actions";

const RECIPIENT_WALLET = "_YOUR_SOLANA_WALLET_ADDRESS_";
const RECEIPT_EMAIL = "_YOUR_EMAIL_";
const AMOUNTS = ["1", "5", "10"];

function Checkout() {
  const [amount, setAmount] = useState("1");
  const [order, setOrder] = useState<{
    orderId: string;
    clientSecret: string;
  } | null>(null);
  const [ready, setReady] = useState(false);
  const { order: checkoutOrder } = useCrossmintCheckout();

  // create the order as soon as the user picks an amount, so the Apple Pay
  // button is already loading by the time they look at it. The cleanup flag
  // discards responses from amounts the user has already moved past.
  useEffect(() => {
    let current = true;
    setOrder(null);
    setReady(false);
    void createOrder(amount, RECEIPT_EMAIL, RECIPIENT_WALLET).then((created) => {
      if (current) {
        setOrder(created);
      }
    });
    return () => {
      current = false;
    };
  }, [amount]);

  // reveal the button once the iframe has content (ui:height.changed)
  useEffect(() => {
    const onMessage = (e: MessageEvent) => {
      if (!e.origin.endsWith(".crossmint.com")) return;
      const event = (e.data as { event?: string } | null)?.event;
      if (event === "ui:height.changed" || event === "ui:express-checkout.ready") {
        setReady(true);
      }
    };
    window.addEventListener("message", onMessage);
    return () => window.removeEventListener("message", onMessage);
  }, []);

  // success = the order reaches the delivery phase
  const succeeded =
    checkoutOrder?.phase === "delivery" || checkoutOrder?.phase === "completed";

  if (succeeded) {
    return <p className="text-xl font-semibold">Payment complete. Tokens on the way!</p>;
  }

  return (
    <div className="w-full max-w-sm">
      <div className="mb-6 flex gap-2">
        {AMOUNTS.map((a) => (
          <button
            key={a}
            onClick={() => setAmount(a)}
            className={`flex-1 rounded-xl border px-4 py-2 font-medium ${
              amount === a ? "border-black bg-black text-white" : "border-gray-300"
            }`}
          >
            ${a}
          </button>
        ))}
      </div>

      {!ready && <p className="py-4 text-center text-gray-500">Loading…</p>}
      <div className={ready ? "" : "invisible absolute h-0 overflow-hidden"}>
        {order && (
          <CrossmintEmbeddedCheckout
            key={order.orderId}
            orderId={order.orderId}
            clientSecret={order.clientSecret}
            payment={{
              receiptEmail: RECEIPT_EMAIL,
              crypto: { enabled: false },
              fiat: {
                enabled: true,
                allowedMethods: { applePay: true, card: false, googlePay: false },
              },
            }}
            appearance={{
              rules: {
                DestinationInput: { display: "hidden" },
                ReceiptEmailInput: { display: "hidden" },
                GlobalMessage: { display: "visible" },
              },
            }}
          />
        )}
      </div>
    </div>
  );
}

export default function CheckoutPage() {
  return (
    <CrossmintProvider apiKey={process.env.NEXT_PUBLIC_CROSSMINT_CLIENT_API_KEY!}>
      <CrossmintCheckoutProvider>
        <main className="flex min-h-screen flex-col items-center justify-center bg-white p-6">
          <h1 className="mb-6 text-2xl font-bold">Buy XMEME</h1>
          <Checkout />
        </main>
      </CrossmintCheckoutProvider>
    </CrossmintProvider>
  );
}

allowedMethods: { applePay: false, card: true, googlePay: false }