Skip to main content

​
Overview

CheckoutScreen is a StatefulWidget that provides the main checkout interface for processing payments. It handles the initialization of payment channels and displays the checkout UI with business information.

​
Constructor

CheckoutScreen({
  Key? key,
  required PurchaseInfo purchaseInfo,
  required HubtelCheckoutConfiguration configuration,
  List<BankCardData>? savedBankCards,
  ThemeConfig? themeConfig,
})

​
Parameters

​
purchaseInfo
PurchaseInfo
required
The purchase information including amount, customer phone number, description, and client reference.
​
configuration
HubtelCheckoutConfiguration
required
The checkout configuration containing merchant credentials and callback URL.
​
savedBankCards
List<BankCardData>?
Optional list of previously saved bank cards for quick checkout.
​
themeConfig
ThemeConfig?
Optional theme configuration to customize the checkout UI appearance.
​
key
Key?
Optional widget key for Flutter’s widget tree.

​
Properties

​
purchaseInfo
PurchaseInfo
The purchase information for the current checkout session.
​
configuration
HubtelCheckoutConfiguration
The merchant configuration for the checkout.
​
savedBankCards
List<BankCardData>?
List of saved bank cards that can be used for payment.
​
themeConfig
ThemeConfig?
The theme configuration for customizing the UI.
​
viewModel
CheckoutViewModel
The view model that manages checkout business logic and state.

​
Usage Example

import 'package:flutter/material.dart';
import 'package:hubtel_merchant_checkout_sdk/hubtel_merchant_checkout_sdk.dart';

class PaymentPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CheckoutScreen(
      purchaseInfo: PurchaseInfo(
        amount: 100.0,
        customerPhoneNumber: '0241234567',
        purchaseDescription: 'Payment for services',
        clientReference: 'ref-12345',
      ),
      configuration: HubtelCheckoutConfiguration(
        merchantID: 'your-merchant-id',
        merchantApiKey: 'your-api-key',
        callbackUrl: 'https://your-callback-url.com',
      ),
      themeConfig: ThemeConfig(
        primaryColor: Colors.blue,
      ),
    );
  }
}

​
Notes

  • The CheckoutScreen automatically fetches available payment channels on initialization
  • A loading indicator is displayed while payment channels are being fetched
  • The checkout screen internally manages the payment flow state using CheckoutViewModel
  • If no themeConfig is provided, the default Hubtel teal color is used

Build docs developers (and LLMs) love

Get started for freeTalk to us