Pay with Card - Memecoins (React Native)

Create a fully customized embedded memecoin checkout experience for React Native that accepts credit cards

Crossmint Checkout React Native SDK Quickstart

For this quickstart we’ll be using 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.

Following Expo Tutorial + Crossmint SDK

1. Initialize a new Expo app

   npx create-expo-app@latest crossmint-checkout-quickstart
   
   cd crossmint-checkout-quickstart
   
2. Run reset-project script

   npm run reset-project
   
3. Install @crossmint/client-sdk-react-native-ui

   npm

   npm i @crossmint/client-sdk-react-native-ui expo-secure-store expo-web-browser expo-device
   

   yarn add @crossmint/client-sdk-react-native-ui expo-secure-store expo-web-browser expo-device
   

   pnpm add @crossmint/client-sdk-react-native-ui expo-secure-store expo-web-browser expo-device
   

   bun add @crossmint/client-sdk-react-native-ui expo-secure-store expo-web-browser expo-device
   
4. 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="[e-mail]"
   

   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.
5. 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>
       );
   }
   
6. Run your project

   npm

   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