Kwikpass SDK Integration Guide for Flutter

Introduction

This guide provides instructions for integrating the Kwikpass SDK into your Flutter application, enabling seamless Phone + OTP login and analytics event tracking. The Flutter implementation mirrors the functionality of the React Native version while following Flutter best practices.

Features

• Phone + OTP single login experience
• Analytics integration (page view and structured events)
• Guest login support
• Customizable UI components

Integration Steps

1. Add Dependency

Add the Kwikpass Flutter SDK to your pubspec.yaml:

dependencies:
  gokwik: ^1.0.0

Then run:

flutter pub get

2. Initialize the SDK

In your main app file (typically main.dart):

import 'package:kwikpass_flutter/kwikpass_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await GoKwikClient.instance.initializeSDK(InitializeSdkProps(
    mid: '<your-merchant-id>',
    environment: Environment.production,
    merchantType: MerchantType.shopify,
  )
  );

  runApp(MyApp());
}

3. Implement the Login Form

Create a login screen with the GoKwikLoginAndSignUpFlow form:

import 'package:kwikpass_flutter/kwikpass_flutter.dart';

class LoginScreen extends StatelessWidget {
  final void Function(Map<String, dynamic>) onSuccess;
  final void Function(dynamic error) onError;
  final void Function() onGuestLogin;

  const LoginScreen({
    required this.onSuccess,
    required this.onError,
    required this.onGuestLogin,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return GoKwikLoginAndSignUpFlow(
      bannerImage: NetworkImage('https://...'),
      logo: AssetImage('assets/logo.png'),
      onSuccess: onSuccess,
      onError: onError,
      enableGuestLogin: true,
      guestLoginButtonLabel: 'Skip',
      onGuestLoginPress: onGuestLogin,
       createUserConfig: CreateUserConfig(
              isEmailRequired: true,
              isNameRequired: true,
              showEmail: true,
              showUserName: true),
      footerUrls: [
        FooterUrl(label: 'Privacy Policy', url: '<https://yourdomain.com/privacy>'),
        FooterUrl(label: 'Terms of Service', url: '<https://yourdomain.com/terms>'),
      ],
    );
  }
}