CrossmintEmbeddedCheckout
Props
EmbeddedCheckoutV3Appearance
Show properties
Show properties
EmbeddedCheckoutV3AppearanceRules
Show properties
Show properties
object
Show properties
Show properties
string
{ background?: string; border?: string; boxShadow?: string; placeholder?: string; text?: string }
{ colors?: { background?: string; border?: string; boxShadow?: string } }
{ family?: string; size?: string; weight?: string }
{ colors?: { background?: string; border?: string; boxShadow?: string; text?: string } }
{ colors?: { text?: string }; font?: { family?: string; size?: string; weight?: string } }
object
object
Show properties
Show properties
string
{ background?: string; border?: string; boxShadow?: string; text?: string }
{ family?: string; size?: string; weight?: string }
{ colors?: { background?: string; border?: string; boxShadow?: string; text?: string } }
{ colors?: { background?: string; border?: string; boxShadow?: string; text?: string } }
string
string
string
EmbeddedCheckoutV3Payment
required
Show properties
Show properties
EmbeddedCheckoutV3CryptoPayment
required
"fiat" | "crypto"
EmbeddedCheckoutV3FiatPayment
required
string
EmbeddedCheckoutV3LineItem | EmbeddedCheckoutV3LineItem[]
Locale
JSONObject
EmbeddedCheckoutV3Recipient
Usage
import { CrossmintEmbeddedCheckout } from "@crossmint/client-sdk-react-native-ui";
function CheckoutScreen() {
return (
<CrossmintEmbeddedCheckout
lineItems={{
collectionLocator: "crossmint:YOUR_COLLECTION_ID",
callData: {
totalPrice: "0.001",
},
}}
payment={{
crypto: {
enabled: true,
defaultChain: "base-sepolia",
defaultCurrency: "usdc",
payer: {
address: "0x...",
initialChain: "base-sepolia",
handleChainSwitch: async (chain) => {
// Switch your wallet to the requested chain
},
handleSignAndSendTransaction: async (serializedTransaction) => {
const txId = await sendTransaction(serializedTransaction);
return { success: true, txId };
},
},
},
fiat: {
enabled: true,
defaultCurrency: "usd",
allowedMethods: {
card: true,
applePay: true,
googlePay: true,
},
},
receiptEmail: "buyer@example.com",
}}
recipient={{ email: "buyer@example.com" }}
locale="en-US"
/>
);
}
Note: In React Native, when payment.crypto.enabled is true, you must provide a payment.crypto.payer object with the required callback handlers for signing transactions and switching chains.