Enterprise feature. Contact us for access.

Crossmint Checkout React Native SDK Quickstart

This example sells a token. For NFTs, pass collectionLocator: "crossmint:<collectionId>" and callData: { totalPrice, quantity } in lineItems instead — see the React quickstart for the NFT variant.

This quickstart uses Expo. You can follow this tutorial to create an expo app. Only do steps 1 and 3, plus the Crossmint-specific steps below.Prerequisites: Before starting, ensure you have completed the Expo prerequisites including Node.js, Git, and your development environment setup.

To integrate without the SDK, or on a platform the SDKs do not cover, render the checkout URL in your own WebView following the Mobile WebView Integration guide.

Following Expo Tutorial + Crossmint SDK

Initialize a new Expo app

npx create-expo-app@latest crossmint-checkout-quickstart

cd crossmint-checkout-quickstart

Run reset-project script

npm run reset-project

Install @crossmint/client-sdk-react-native-ui

npx expo install @crossmint/client-sdk-react-native-ui expo-constants expo-device expo-secure-store expo-web-browser react-native-get-random-values react-native-webview

The SDK needs Expo SDK 58. npx expo install picks the versions of these packages that match your Expo SDK.

Add your .env.local environment variables

EXPO_PUBLIC_CLIENT_CROSSMINT_API_KEY="your_client_side_api_key"
EXPO_PUBLIC_RECIPIENT_WALLET_ADDRESS="your_solana_wallet_address"
EXPO_PUBLIC_RECEIPT_EMAIL="your-email@example.com"

The receiptEmail field is optional. If the buyer pays with Apple Pay or Google Pay, Crossmint obtains the email automatically. Providing it improves fraud signal quality.

Replace index.tsx with

import { CrossmintEmbeddedCheckout, CrossmintProvider } from "@crossmint/client-sdk-react-native-ui";

export default function Index() {
    return (
        <CrossmintProvider apiKey={process.env.EXPO_PUBLIC_CLIENT_CROSSMINT_API_KEY ?? ""}>
            <CrossmintEmbeddedCheckout
                recipient={{
                    walletAddress: process.env.EXPO_PUBLIC_RECIPIENT_WALLET_ADDRESS ?? "",
                }}
                payment={{
                    crypto: {
                        enabled: false,
                    },
                    fiat: {
                        enabled: true,
                    },
                    receiptEmail: process.env.EXPO_PUBLIC_RECEIPT_EMAIL ?? "",
                }}
                lineItems={{
                    tokenLocator: "solana:7EivYFyNfgGj8xbUymR7J4LuxUHLKRzpLaERHLvi7Dgu", // XMEME token (staging)
                    executionParameters: {
                        mode: "exact-in", // Specifies exact USD amount to spend (vs exact-out for NFTs)
                        amount: "1", // USD amount to spend
                        maxSlippageBps: "500", // Maximum slippage tolerance in basis points (500 = 5%, default if not specified)
                    },
                }}
            />
        </CrossmintProvider>
    );
}

Run your project

npm run ios
# For Android:
npm run android

yarn ios
# For Android:
yarn android

pnpm ios
# For Android:
pnpm android

bun ios
# For Android:
bun android

Result

Testing Your App

Test purchases in staging using test credit cards, like 4242424242424242 (Visa). More information on testing can be found here. This demo is built on staging — to launch on production, check the production checklist.

Introduction

Quickstarts ⚡

Concepts

Guides

API Reference

React Native - Webview

Crossmint Checkout React Native SDK Quickstart

Following Expo Tutorial + Crossmint SDK

Result

Testing Your App

Next Steps

Mobile WebView Integration

React Native SDK Reference

​Crossmint Checkout React Native SDK Quickstart

​Following Expo Tutorial + Crossmint SDK

​Result

​Testing Your App

​Next Steps

Mobile WebView Integration

React Native SDK Reference

Crossmint Checkout React Native SDK Quickstart

Following Expo Tutorial + Crossmint SDK

Result

Testing Your App

Next Steps