Pay with Card - Memecoins (Flutter)

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

For this quickstart, you will create a minimal Flutter app. Make sure you have Flutter installed.

Create a New Flutter Project + Crossmint SDK

1. Create a new Flutter app

   flutter create crossmint_checkout_quickstart
   
   cd crossmint_checkout_quickstart
   
2. Install crossmint_flutter

   Flutter

   flutter pub add crossmint_flutter
   

   # Add to your pubspec.yaml dependencies:
   dependencies:
     crossmint_flutter: ^0.1.0
   
3. Set your environment variables

   Pass your API key and configuration via Dart defines:

   flutter run \
     --dart-define=CROSSMINT_API_KEY=YOUR_CLIENT_SIDE_API_KEY \
     --dart-define=RECIPIENT_WALLET=YOUR_SOLANA_WALLET_ADDRESS \
     --dart-define=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.
4. Replace lib/main.dart with

   import 'package:flutter/material.dart';
   import 'package:crossmint_flutter/crossmint_flutter_ui.dart';
   
   const apiKey = String.fromEnvironment('CROSSMINT_API_KEY');
   const recipientWallet = String.fromEnvironment('RECIPIENT_WALLET');
   const receiptEmail = String.fromEnvironment('RECEIPT_EMAIL');
   
   void main() {
     runApp(const MaterialApp(home: CheckoutScreen()));
   }
   
   class CheckoutScreen extends StatelessWidget {
     const CheckoutScreen({super.key});
   
     @override
     Widget build(BuildContext context) {
       final checkoutController = CrossmintCheckoutController();
   
       return Scaffold(
         body: SafeArea(
           child: CrossmintEmbeddedCheckout(
             apiKey: apiKey,
             config: CrossmintCheckoutConfig(
               order: CrossmintCheckoutNewOrder.typed(
                 lineItems: [
                   CrossmintCheckoutLineItem.tokenWithExecutionParameters(
                     tokenLocator:
                         'solana:7EivYFyNfgGj8xbUymR7J4LuxUHLKRzpLaERHLvi7Dgu', // XMEME token (staging)
                     executionParameters: {
                       'mode': 'exact-in',
                       'amount': '1',
                       'maxSlippageBps': '500',
                     },
                   ),
                 ],
                 recipient: CrossmintCheckoutWalletRecipient(
                   walletAddress: recipientWallet,
                 ),
               ),
               payment: CrossmintCheckoutPayment(
                 fiat: CrossmintCheckoutFiatPayment(enabled: true),
                 crypto: CrossmintCheckoutCryptoPayment(enabled: false),
                 receiptEmail: receiptEmail,
               ),
             ),
             checkoutController: checkoutController,
             onOrderUpdated: (order) =>
                 debugPrint('Order updated: ${order['status']}'),
             onOrderCreationFailed: (error) =>
                 debugPrint('Error: $error'),
           ),
         ),
       );
     }
   }
   
5. Run your project

   Run with the same --dart-define flags from step 3:

   iOS

   flutter run -d ios \
     --dart-define=CROSSMINT_API_KEY=YOUR_CLIENT_SIDE_API_KEY \
     --dart-define=RECIPIENT_WALLET=YOUR_SOLANA_WALLET_ADDRESS \
     --dart-define=RECEIPT_EMAIL=[e-mail]
   

   flutter run -d android \
     --dart-define=CROSSMINT_API_KEY=YOUR_CLIENT_SIDE_API_KEY \
     --dart-define=RECIPIENT_WALLET=YOUR_SOLANA_WALLET_ADDRESS \
     --dart-define=RECEIPT_EMAIL=[e-mail]
   

   flutter run -d chrome \
     --dart-define=CROSSMINT_API_KEY=YOUR_CLIENT_SIDE_API_KEY \
     --dart-define=RECIPIENT_WALLET=YOUR_SOLANA_WALLET_ADDRESS \
     --dart-define=RECEIPT_EMAIL=[e-mail]