Skip to main content
This guide walks you through processing a payment using the Lite SDK (LiteCheckout) for Flutter. The Lite SDK gives you complete control over your payment UI while handling all the secure payment processing logic.

​
Prerequisites

Before you can process payments with the Tonder Flutter Lite SDK, ensure you have completed the necessary setup and have the required components in place.
  • You have successfully installed and configured the Tonder Flutter Lite SDK.
  • You have a widget in your app ready to display your custom payment form.

​
Payment Integration Steps

Follow these steps to integrate payment processing into your Flutter application with the Lite SDK. This process involves initializing the SDK, building your custom UI, and processing payments securely.

​
Step 1: Initialize the SDK

Create an instance of the LiteCheckout class to establish a secure connection with Tonder’s payment services.
custom_payment_widget.dart

import 'package:tonder_sdk_lite/lite_checkout.dart';

class CustomPaymentWidget extends StatefulWidget {
  @override
  _CustomPaymentWidgetState createState() => _CustomPaymentWidgetState();
}

class _CustomPaymentWidgetState extends State<CustomPaymentWidget> {
  late LiteCheckout _liteCheckout;
  
  @override
  void initState() {
    super.initState();
    
    _liteCheckout = LiteCheckout(
      apiKey: "YOUR_API_KEY",
      returnUrl: "YOUR_RETURN_URL",
    );
  }
  
  // ... rest of your widget
}

​
Step 2: Build Your Custom Payment Form

Create your own payment form using standard Flutter widgets. You have complete control over the design and layout. 

class _CustomPaymentWidgetState extends State<CustomPaymentWidget> {
  late LiteCheckout _liteCheckout;
  
  // Controllers for your custom input fields
  final _cardNumberController = TextEditingController();
  final _cardHolderController = TextEditingController();
  final _expiryMonthController = TextEditingController();
  final _expiryYearController = TextEditingController();
  final _cvvController = TextEditingController();
  final _emailController = TextEditingController();
  final _firstNameController = TextEditingController();
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: _firstNameController,
          decoration: InputDecoration(labelText: 'First Name'),
        ),
        TextField(
          controller: _emailController,
          decoration: InputDecoration(labelText: 'Email'),
        ),
        TextField(
          controller: _cardHolderController,
          decoration: InputDecoration(labelText: 'Cardholder Name'),
        ),
        TextField(
          controller: _cardNumberController,
          decoration: InputDecoration(labelText: 'Card Number'),
          keyboardType: TextInputType.number,
        ),
        Row(
          children: [
            Expanded(
              child: TextField(
                controller: _expiryMonthController,
                decoration: InputDecoration(labelText: 'MM'),
                keyboardType: TextInputType.number,
              ),
            ),
            SizedBox(width: 16),
            Expanded(
              child: TextField(
                controller: _expiryYearController,
                decoration: InputDecoration(labelText: 'YY'),
                keyboardType: TextInputType.number,
              ),
            ),
          ],
        ),
        TextField(
          controller: _cvvController,
          decoration: InputDecoration(labelText: 'CVV'),
          keyboardType: TextInputType.number,
          obscureText: true,
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _processPayment,
          child: Text('Pay Now'),
        ),
      ],
    );
  }
}

​
Step 3: Configure Payment Data and Process Payment

Collect the data from your custom form and process the payment using the Lite SDK methods. 

void _processPayment() async {
  // Set customer data
  final customerData = {
    'first_name': _firstNameController.text,
    'email': _emailController.text,
  };
  _liteCheckout.setPaymentData(customerData);
  
  // Set cart total
  _liteCheckout.setCartTotal(399); // Amount in cents
  
  // Set card data collected from your custom form
  final cardData = {
    'card_number': _cardNumberController.text,
    'cardholder_name': _cardHolderController.text,
    'expiration_month': _expiryMonthController.text,
    'expiration_year': _expiryYearController.text,
    'cvv': _cvvController.text,
  };
  
  try {
    // Process payment using SDK methods
    final response = await _liteCheckout.payment(cardData);
    print('Payment successful: $response');
    // Handle successful payment
  } catch (error) {
    print('Payment failed: $error');
    // Handle payment error
  }
}

​
Next Steps

Now that you’ve successfully integrated payment processing into your Flutter app with the Lite SDK, explore these advanced features to enhance your payment experience: