Flutter SDK

dependencies:
  lite_flutter: ^0.0.2

curl https://api.lite.sa/checkout-sessions \
  -H "x-api-key: $LITE_API_KEY" \
  -H "x-idempotency-key: $(uuidgen)" \
  -H "Content-Type: application/json" \
  -d '{
    "channel_id": "<active channel_id>",
    "amount": 4999,
    "currency": "SAR",
    "customer": {
      "email": "john.doe@email.com",
      "first_name": "John",
      "last_name": "Doe"
    },
    "order": { "reference": "ORD-123456" },
    "redirect_urls": {
      "success": "https://example.com/return?session_id={SESSION_ID}",
      "failure": "https://example.com/checkout"
    },
    "expiry": 1800
  }'

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

class CardCheckout extends StatefulWidget {
  const CardCheckout({super.key, required this.sessionSecret});

  final String sessionSecret;

  @override
  State<CardCheckout> createState() => _CardCheckoutState();
}

class _CardCheckoutState extends State<CardCheckout> {
  late final LiteCheckout _checkout = LiteCheckout(clientSecret: widget.sessionSecret);
  bool _saveCard = false;

  @override
  void initState() {
    super.initState();
    _checkout.addListener(_rebuild);
    _checkout.onPayResult = handlePaymentResult;
    _open();
  }

  Future<void> _open() async {
    try {
      await _checkout.start();
    } on LiteCheckoutException catch (error) {
      // error.message says the secret was rejected. Call start() again to retry.
    } on StateError {
      // The checkout was disposed before the session loaded.
    }
  }

  @override
  void dispose() {
    _checkout.removeListener(_rebuild);
    _checkout.dispose();
    super.dispose();
  }

  void _rebuild() {
    if (mounted) setState(() {});
  }

  void _onFieldChange(LiteCardFieldChange change) {
    // Each field reports its own change. The payload is change.field, change.valid,
    // change.brand, change.error, change.focused, and change.message.
  }

  VoidCallback? _payPressed() {
    if (!_checkout.isReadyToPay) return null;
    return _pay;
  }

  Future<void> _pay() async {
    await _checkout.pay(storeForFuture: _saveCard);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        LiteCardNumberField(checkout: _checkout, onChange: _onFieldChange),
        LiteExpiryField(checkout: _checkout, onChange: _onFieldChange),
        LiteCvvField(checkout: _checkout, onChange: _onFieldChange),
        LiteCardholderNameField(checkout: _checkout, onChange: _onFieldChange),
        Row(
          children: <Widget>[
            const Expanded(child: Text('Save card for future purchase')),
            Switch(
              value: _saveCard,
              onChanged: (bool value) {
                setState(() {
                  _saveCard = value;
                });
              },
            ),
          ],
        ),
        FilledButton(
          onPressed: _payPressed(),
          child: const Text('Pay'),
        ),
      ],
    );
  }
}

const LiteFieldStyle fieldStyle = LiteFieldStyle(
  textColor: Color(0xFF161616),
  placeholderColor: Color(0xFFA2A2A2),
  backgroundColor: Color(0xFFFFFFFF),
  borderColor: Color(0xFFDEDEDE),
  // Border only. The text stays textColor, and message is not drawn.
  errorColor: Color(0xFFCD0202),
  // Border only, while the field is focused and has no error.
  focusedBorderColor: Color(0xFF6335EA),
  // 0 removes the border, so errorColor and focusedBorderColor are not drawn.
  borderWidth: 1,
  cornerRadius: 8,
  // Left and right inset on both iOS and Android.
  horizontalPadding: 12,
  // Top and bottom inset on both iOS and Android.
  verticalPadding: 0,
  // Shortest height. Default 48. The field grows with the system text size
  // and will not draw shorter than 48.
  minHeight: 48,
  // Scales with the system text size.
  fontSize: 17,
);

LiteCardNumberField(
  checkout: checkout,
  style: fieldStyle,
  onChange: onFieldChange,
)

class PayResult {
  final LitePaymentStatus status;
  final String? paymentId;
  final String? error;
  final String? errorCode;
}

void handlePaymentResult(PayResult result) {
  switch (result.status) {
    case LitePaymentStatus.success:
      // Show success, then confirm result.paymentId from your server.
      break;
    case LitePaymentStatus.failure:
      // Show result.error and allow the customer to retry when appropriate.
      break;
    case LitePaymentStatus.processing:
      // Keep the order pending and confirm the result from your server.
      break;
    case LitePaymentStatus.cancelled:
      // The customer dismissed checkout or cancelled authentication.
      break;
    case LitePaymentStatus.alreadyCompleted:
      // This session had already completed. Confirm it from your server.
      break;
  }
}