Crossmint Checkout Expo Demo

Introduction

A React Native Expo demo app showcasing Crossmint's embedded checkout functionality. This quickstart demonstrates how to integrate Crossmint's React Native SDK (@crossmint/client-sdk-react-native-ui) into mobile applications.

Key Features

• Accept fiat payments via credit card, Apple Pay, and Google Pay
• Memecoin purchase integration on Solana
• Cross-platform support (iOS, Android, Web)
• Embedded checkout component with customizable UI

Prerequisites

• Create a developer account in the Crossmint Console
• Get your client-side API key from the console

Setup

1. Clone and navigate to the project:

   git clone <repository-url>
   cd checkout-expo-demo

2. Install dependencies:

   pnpm install

3. Set up environment variables:

   EXPO_PUBLIC_CLIENT_CROSSMINT_API_KEY=your_api_key_here

4. Start the development server:

   pnpm start

Code Sample

Here's how the Crossmint React Native SDK is integrated:

Note: The crypto property needs to be disabled for the checkout to work. Currently, crypto payments are only available if using a custom payer (this limitation is for the mobile SDK only).

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

export default function App() {
  return (
    <CrossmintProvider apiKey="your_client_side_api_key">
      <CrossmintEmbeddedCheckout
        recipient={{
          walletAddress: "EbXL4e6XgbcC7s33cD5EZtyn5nixRDsieBjPQB7zf448",
        }}
        payment={{
          crypto: {
            enabled: false,
          },
          fiat: {
            enabled: true,
            allowedMethods: {
              card: true,
              applePay: true,
              googlePay: true,
            },
          },
        }}
        lineItems={{
          tokenLocator: "solana:6p6xgHyF7AeE6TZkSmFsko444wqoP15icUSqi2jfGiPN",
          executionParameters: {
            mode: "exact-in",
            amount: "1",
            maxSlippageBps: "500",
          },
        }}
      />
    </CrossmintProvider>
  );
}

Available Scripts

• pnpm start - Start Expo development server
• pnpm ios - Run on iOS simulator
• pnpm android - Run on Android emulator
• pnpm web - Run in web browser

Advanced Usage

For advanced usage, refer to the Crossmint documentation:

• Payment Methods
• UI Customization