CrossmintEmbeddedCheckout
Props
Show properties
Show properties
Show properties
Show properties
Show properties
Show properties
colors
{ background?: string; border?: string; boxShadow?: string; placeholder?: string; text?: string }
Show properties
Show properties
Show properties
Show properties
Show properties
Show properties
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.