Hubble's SDK for flutter

Getting Started

Please contact us at myhubble.money/support for more information.

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  hubble_sdk: {current_latest_version}

Usage example

import 'package:hubble_sdk/hubble_sdk.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class _SampleApp extends StatefulWidget {
  const _SampleApp();

  @override
  State<_SampleApp> createState() => _SampleAppState();
}

class _SampleAppState extends State<_SampleApp> {
  void openSDK(BuildContext context) {
    HubbleSDKController.open(
      context,
      clientSecret: _clientSecret,
      clientId: _clientId,
      authToken: _token,
      pageLoadingIndicatorBuilder: (context, color, scale) {
        return Center(
          child: SizedBox(
            width: 50,
            height: 50,
            child: CircularProgressIndicator(
              color: color,
            ),
          ),
        );
      },
    );
  }

  var _token = 'somethigfn';
  var _clientId = 'something';
  var _clientSecret = 'secretGivenByHubble';

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: <String, WidgetBuilder>{
        '/': (BuildContext context) {
          return Scaffold(
            backgroundColor: Colors.white,
            appBar: AppBar(
              title: const Text('Hubble SDK Example'),
            ),
            body: Center(
                child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  margin: const EdgeInsets.all(8),
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                    ),
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: TextFormField(
                    initialValue: _token,
                    onChanged: (value) {
                      _token = value;
                    },
                    decoration: const InputDecoration(
                      border: InputBorder.none,
                      hintText: 'Enter token',
                    ),
                  ),
                ),
                Container(
                  margin: const EdgeInsets.all(8),
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                    ),
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: TextFormField(
                    initialValue: _clientId,
                    onChanged: (value) {
                      _clientId = value;
                    },
                    decoration: const InputDecoration(
                      border: InputBorder.none,
                      hintText: 'Enter client id',
                    ),
                  ),
                ),
                Container(
                  margin: const EdgeInsets.all(8),
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                    ),
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: TextFormField(
                    initialValue: _clientSecret,
                    onChanged: (value) {
                      _clientSecret = value;
                    },
                    decoration: const InputDecoration(
                      border: InputBorder.none,
                      hintText: 'Enter client secret',
                    ),
                  ),
                ),
                ElevatedButton(
                  onPressed: () {
                    openSDK(context);
                  },
                  child: const Text('Launch SDK (material page)'),
                ),
                ElevatedButton(
                  onPressed: () async {
                    openSDK(context);
                  },
                  child: const Text('Launch SDK (Page builder)'),
                ),
              ],
            )),
          );
        },
      },
    );
  }
}

UPI Intent

To enable UPI Intent, add the following to your AndroidManifest.xml file:

<manifest ... > 
    ...
    <queries>
        <package android:name="com.phonepe.app" />
        <package android:name="net.one97.paytm" />
        <package android:name="com.google.android.apps.nbu.paisa.user" />
        <package android:name="in.org.npci.upiapp" />
        <package android:name="in.amazon.mShop.android.shopping" />
        <package android:name="com.dreamplug.androidapp" />
        ...

in iOS, add the following to your Info.plist file:

	<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>phonepe</string>
		<string>paytm</string>
		<string>paytmmp</string>
		<string>tez</string>
		<string>credpay</string>
		<string>upi</string>
		<string>BHIM</string>
		<string>ppesim</string>
	</array>

custom wrapping for your app

You might want to wrap the SDK with your own custom UI. You can do this by using the HubbleSDKController class.

Example:

class MyCustomWrapOverSDK extends StatefulWidget {
  const MyCustomWrapOverSDK({super.key});
  @override
  State<MyCustomWrapOverSDK> createState() => _MyCustomWrapOverSDKState();
}
class _MyCustomWrapOverSDKState extends State<MyCustomWrapOverSDK> {
  bool isHubbleVisible = false;
  void toggleSDK() {
    setState(() {
      isHubbleVisible = !isHubbleVisible;
    });
  }
  late final controller = HubbleSDKController(
    appPackageName: 'package.sdk.web',
    authToken: 'authToken',
    setCookie: (String cookies) async {},
    getCookie: () async => '',
    appVersion: '1.0.0',
    appBuildNumber: '1',
    clientId: 'clientId',
    clientSecret: 'clientSecret',
    onEvent: (String eventName, Map<String, dynamic> eventProperties) {},
    appFlavor: 'prod',
    env: 'prod', // or debug, better use kDebugMode ? 'debug': 'prod'
    popHostView: () {
      toggleSDK();
    },
  );
  @override
  Widget build(BuildContext context) {
    if (isHubbleVisible) {
      return HubbleSDK(
        controller: controller,
      );
    }
    return Material(
        child: OutlinedButton(
      onPressed: toggleSDK,
      child: Text("Show app"),
    ));
  }
}

Fonts and Icons from hubble

Add following assets to your bundle

flutter:
  uses-material-design: true

  # ....
  # ....
  # ....

  assets:
    - packages/hubble_sdk/fonts/inter/OFL.txt
    - packages/hubble_sdk/fonts/Sofia/OFL.txt

  fonts:
    # Sofia
    - family: Sofia
      fonts:
        - asset: packages/hubble_sdk/fonts/Sofia/Sofia-Regular.ttf
          weight: 400
    # Phosphor
    - family: PhosphorBold
      fonts:
        - asset: packages/hubble_sdk/fonts/phosphor/Phosphor-Bold.ttf
          weight: 400
    - family: PhosphorDuotone
      fonts:
        - asset: packages/hubble_sdk/fonts/phosphor/Phosphor-Duotone.ttf
          weight: 400
    - family: PhosphorFill
      fonts:
        - asset: packages/hubble_sdk/fonts/phosphor/Phosphor-Fill.ttf
          weight: 400
    - family: PhosphorLight
      fonts:
        - asset: packages/hubble_sdk/fonts/phosphor/Phosphor-Light.ttf
          weight: 400
    - family: PhosphorThin
      fonts:
        - asset: packages/hubble_sdk/fonts/phosphor/Phosphor-Thin.ttf
          weight: 400
    - family: Phosphor
      fonts:
        - asset: packages/hubble_sdk/fonts/phosphor/Phosphor.ttf
          weight: 400
    # LookScoutIcons
    - family: LookScoutIcons
      fonts:
        - asset: packages/hubble_sdk/fonts/look-scout/look-scout.ttf

    # Inter
    - family: Inter
      fonts:
        - asset: packages/hubble_sdk/fonts/inter/Inter-Thin.ttf
          weight: 100
        - asset: packages/hubble_sdk/fonts/inter/Inter-ExtraLight.ttf
          weight: 200
        - asset: packages/hubble_sdk/fonts/inter/Inter-Light.ttf
          weight: 300
        - asset: packages/hubble_sdk/fonts/inter/Inter-Regular.ttf
          weight: 400
        - asset: packages/hubble_sdk/fonts/inter/Inter-Medium.ttf
          weight: 500
        - asset: packages/hubble_sdk/fonts/inter/Inter-SemiBold.ttf
          weight: 600
        - asset: packages/hubble_sdk/fonts/inter/Inter-Bold.ttf
          weight: 700
        - asset: packages/hubble_sdk/fonts/inter/Inter-ExtraBold.ttf
          weight: 800
        - asset: packages/hubble_sdk/fonts/inter/Inter-Black.ttf
          weight: 900