Hooks

React hooks for React SDK reference for Crossmint checkout

useCrossmintCheckout()

Returns

order · object

Show parameters

lineItems · object[]

Show parameters

callData · Record<string, any>

chain · "solana" | "sui" | "aptos" | "ethereum" | "polygon" | "bsc" | "optimism" | "arbitrum" | "base" | "zora" | ...

delivery · { recipient?: object | object; status: "completed"; tokens: ... | ...[]; txId: string } | ...

Show parameters

recipient · { locator: string; physicalAddress?: object; walletAddress: string } | ...

status · "completed"

tokens · object | object[]

txId · string

metadata · object

Show parameters

collection · { description?: string; imageUrl?: string; name?: string }

description · string

imageUrl · string

name · string

quantity · number

quote · object

Show parameters

charges · { gas?: object; unit: object }

status · "valid" | "expired" | "requires-recipient" | "item-unavailable"

totalPrice · object

unavailabilityReason · { code: "to" | "do"; message: string }

slippageBps · number

locale · "en-US" | "es-ES" | "fr-FR" | "it-IT" | "ja-JP" | "ko-KR" | "pt-PT" | "zh-CN" | "zh-TW" | "de-DE" | "ru-RU" | ...

orderId · string

payment · object

Show parameters

currency · "usd" | "eur" | "gbp" | "aud" | "sgd" | "hkd" | "krw" | "inr" | "vnd" | "jpy" | "eth" | "matic" | "usdc" | ...

failureReason · { code: string; message?: string } | { code: "unknown" | "tx-id-not-found" | "insufficient-funds"; message?: string }

Show parameters

code · string

message · string

method · "solana" | "ethereum" | "polygon" | "bsc" | "optimism" | "arbitrum" | "base" | "zora" | "arbitrumnova" | ...

preparation · object | object

Show parameters

chain · "solana" | "sui" | "aptos" | "ethereum" | "polygon" | "bsc" | "optimism" | "arbitrum" | "base" | "zora" | ...

payerAddress · string

serializedTransaction · string

stripeClientSecret · string

stripeEphemeralKeySecret · string

stripePublishableKey · string

stripeSubscriptionId · string

receiptEmail · string

received · object | object

Show parameters

amount · string

currency · "usd" | "eur" | "gbp" | "aud" | "sgd" | "hkd" | "krw" | "inr" | "vnd" | "jpy" | "eth" | "matic" | "usdc" | ...

chain · "solana" | "sui" | "aptos" | "ethereum" | "polygon" | "bsc" | "optimism" | "arbitrum" | "base" | "zora" | ...

txId · string

refunded · object | object

Show parameters

amount · string

currency · "usd" | "eur" | "gbp" | "aud" | "sgd" | "hkd" | "krw" | "inr" | "vnd" | "jpy" | "eth" | "matic" | "usdc" | ...

chain · "solana" | "sui" | "aptos" | "ethereum" | "polygon" | "bsc" | "optimism" | "arbitrum" | "base" | "zora" | ...

txId · string

status · "completed" | "awaiting-payment" | "in-progress" | "requires-quote" | "requires-crypto-payer-address" | ...

phase · "completed" | "quote" | "delivery" | "payment"

quote · object

Show parameters

expiresAt · string

quotedAt · string

status · "valid" | "expired" | "requires-recipient" | "requires-physical-address" | "all-line-items-unavailable"

totalPrice · object

Show parameters

amount · string

currency · "usd" | "eur" | "gbp" | "aud" | "sgd" | "hkd" | "krw" | "inr" | "vnd" | "jpy" | "eth" | "matic" | "usdc" | ...

orderClientSecret · string

Usage

import { useCrossmintCheckout } from "@crossmint/client-sdk-react-ui";

function OrderStatus() {
    const { order } = useCrossmintCheckout();

    if (!order) return <p>No active order</p>;

    return (
        <div>
            <p>Order ID: {order.orderId}</p>
            <p>Phase: {order.phase}</p>
        </div>
    );
}