Boxo SDK

https://github.com/Appboxo/boxo-ios-spm.git

cd your-project-directory
pod init

pod 'BoxoSDK'

pod install
open your-project.xcworkspace

import BoxoSDK 

let config = Config(clientId: "client_id")
Boxo.shared.setConfig(config: config)

let miniapp = Boxo.shared.getMiniapp(appId: "app_id")
miniapp.open(viewController: self)

struct ViewControllerFinder: UIViewControllerRepresentable {
    var onViewControllerFound: (UIViewController) -> Void

    func makeUIViewController(context: Context) -> UIViewController {
        let viewController = UIViewController()
        DispatchQueue.main.async {
            self.onViewControllerFound(viewController)
        }
        return viewController
    }

    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
}
...
struct ContentView: View {
    @State private var currentViewController: UIViewController?
    
    var body: some View {
        ViewControllerFinder { viewController in
            currentViewController = viewController
        }
        Button(action: {
            guard let currentViewController = currentViewController else { return }

            let miniapp = Boxo.shared.getMiniapp(appId: "app_id")
            miniapp.open(viewController: currentViewController)
        }) {
            Text("Open miniapp")
        }
    }
}

miniapp.delegate = self
...
extension ViewController: MiniappDelegate {
    func onLaunch(miniapp: Miniapp) {
        print("onLaunchMiniapp: \(miniapp.appId)")
    }

    func onResume(miniapp: Miniapp) {
        print("onResumeMiniapp: \(miniapp.appId)")
    }

    func onPause(miniapp: Miniapp) {
        print("onPauseMiniapp: \(miniapp.appId)")
    }

    func onClose(miniapp: Miniapp) {
        print("onCloseMiniapp: \(miniapp.appId)")
    }

    func onError(miniapp: Miniapp, message: String) {
        print("onErrorMiniapp: \(miniapp.appId) message: \(message)")
    }
}

Boxo.shared.setConfig(config: Config(clientId: "client_id", theme: .Dark)) //[Dark, Light, System] System - by default

miniapp.setConfig(config: MiniappConfig(theme: .Dark))

miniapp.delegate = self
...
extension ViewController : MiniappDelegate {
  func onAuth(miniapp: Miniapp) {
    miniapp.setAuthCode(authCode: "[AUTH_CODE]")
  }
}

Boxo.shared.logout()

miniapp.delegate = self
...
extension ViewController: MiniappDelegate {
    func didChangeUrlEvent(miniapp: Miniapp, url: URL) {
        // Listen for search URL
        if url.path.components(separatedBy: "/").contains("search") {
            print("Search url: \(url)")
        }
    }
}

let miniapp = Boxo.shared.getMiniapp(appId: "app_id")
let miniappConfig = MiniappConfig(theme: .System)
// Set params that will be appended to miniapp's url
// Ex. https://google.com/?name=Orave
miniappConfig.setExtraParams(extraParams: ["name" : "Orave"])
miniapp.setConfig(config: miniappConfig)

let miniapp = Boxo.shared.getMiniapp(appId: "app_id")
let miniappConfig = MiniappConfig(theme: .System)
// Set third custom action menu item
// It is hidden by default
miniappConfig.setCustomActionMenuItemImage(image: UIImage(named: "ic_custom_action_button"))
miniapp.setConfig(config: miniappConfig)
...
extension ViewController : MiniappDelegate {
    func didSelectCustomActionMenuItemEvent(miniapp: Miniapp) {
        //show any custom dialog when custom action menu item is clicked
    }
}

Boxo.shared.getMiniapps { miniapps, error in
    miniapps.forEach { data in
        print(data.appId)
        print(data.name)
        print(data.longDescription)
        print(data.logo)
        print(data.category)
    }
}

let config = Config(clientId: "CLIENT_ID")
config.setUserId(id: "HOST_APP_USER_ID") //will be used for the consent screen
Boxo.shared.setConfig(config: config)

let miniapp = Boxo.shared.getMiniapp(appId: "app_id")
            
let miniappConfig = MiniappConfig()
miniappConfig.enableSplash(isSplashEnabled: false) // to skip splash screen. if enabled, the splash screen will be hidden when 50% of web content is loaded. Otherwise, when the web page starts loading. By default is enabled.
miniapp.setConfig(config: miniappConfig)

miniapp.open(viewController: self)

let config = Config(clientId: "CLIENT_ID")
config.sandboxMode = true //by default false
Boxo.shared.setConfig(config: config)

let config = MiniappConfig()
config.pageAnimation = PageAnimation.RIGHT_TO_LEFT

let miniapp = Boxo.shared.getMiniapp(appId: "app_id")
miniapp.setConfig(config: config)
miniapp.open(viewController: self)

input:
  - path: BoxoSDK.xcframework
    type: xcframework

obfuscation:
  enable: true
  rename:
    enable: true
    exclude:
      - 'Headers/BoxoSDK*.h'

android.enableJetifier=true

Boxo.init(this)
    .setConfig(
        Config.Builder()
            .setLanguage("en")
            .build()
    )

Boxo.setConfig(
    Config.Builder()
        .multitaskMode(false)
        .debug(BuildConfig.DEBUG)
        .build()
    )

Boxo.setConfig(
    Config.Builder()
        .permissionsPage(false)  // Hide "Settings"
        .showClearCache(false)   // Hide "Clear Cache"
        .showAboutPage(true)    // Show "About"
        .build()
    )

Boxo.setConfig(
    Config.Builder()
        .sandboxMode(true)  // Enable sandbox mode
        .build()
)

Boxo.setConfig(Config.Builder()
    ...
	.setTheme(Config.Theme.SYSTEM)  // DEFAULT: Follows system setting
    .build())

// Override theme for specific miniapp
Boxo.getMiniapp(appId)
    .setConfig(MiniappConfig.Builder()
        .setTheme(Config.Theme.LIGHT)  // Overrides global theme
        .build())
    .open()

miniapp.setAuthListener { boxoActivity, miniapp ->
	// 1. Fetch auth code from your backend
	//use boxoActivity to open dialogs or activity
    val authCode = fetchAuthCodeFromBackend()

    // 2. Provide code to Miniapp
    miniapp.setAuthCode(authCode)
}

Boxo.logout()

Boxo.getMiniapp(appId)
    .setUrlChangeListener { boxoActivity, miniapp, uri ->
        Log.e("URL Path", uri.path)
        uri.queryParameterNames.forEach {
            Log.e("URL params", "$it = ${uri.getQueryParameter(it)}")
        }
    }
    .open(this)

Boxo.getMiniapp(appId)
    .setConfig(
        MiniappConfig.Builder()
            .setExtraUrlParams(
                mapOf(
                    "user_id" to "u_12345",
                    "campaign" to "summer_sale"
                )
            )
            .build()
    )
    .open(this)

https://miniapp.example.com?user_id=u_12345&campaign=summer_sale

miniapp.setCustomEventListener { boxoActivity, miniapp, event ->
    //use boxoActivity to open dialogs or activity
    when (event.name) {
        "userAction" -> handleUserAction(event.payload)
        "requestData" -> sendResponseData(miniapp, event)
        else -> Log.w("CustomEvent", "Unhandled event: ${event.name}")
    }
}

// Send response back to miniapp
private fun sendResponseData(miniapp: Miniapp, event: CustomEvent) {
    event.payload = mapOf(
        "status" to "success",
        "code" to 200
    )
    miniapp.sendEvent(event)
}

Boxo.getMiniapp(appId)
    .setConfig(
        MiniappConfig.Builder()
            .setCustomActionMenuItem(R.drawable.ic_custom_menu)
            .build()
    )
    .setCustomActionMenuItemClickListener { boxoActivity, miniapp ->
        // do something
    }
    .open(this)

// Hide the item
miniapp.hideCustomActionMenuItem()

// Show when needed
miniapp.showCustomActionMenuItem()

Boxo.getMiniapps(object: MiniappListCallback{
            override fun onFailure(e: Exception) {
               Log.e("MiniappList", "Failed to load miniapps")
            }

            override fun onSuccess(miniapps: List<MiniappData>) {
                miniapps.forEach { data->
                  print(data.appId)
                  print(data.name)
                  print(data.description)
                  print(data.logo)
                  print(data.category)
                }
            }
        })

Boxo.getMiniapp(appId)
    .setConfig(
        MiniappConfig.Builder()
            .enableSplash(false)  // Skip splash screen entirely
            .build()
    )
    .open(this)

Boxo.getMiniapp(appId)
    .setConfig(
        MiniappConfig.Builder()
            ...
			// Set the page animation to slide from right to left
            .pageAnimation(PageAnimation.RIGHT_TO_LEFT)
            .build()
    )
    .open(requireActivity())

miniapp.setLifecycleListener(object : Miniapp.LifecycleListener {
    override fun onLaunch(miniapp: Miniapp) {
		// Triggers when miniapp begins launching via miniapp.open()
        // Ideal for analytics tracking and initial setup
    }

    override fun onResume(miniapp: Miniapp) {
		// Called when miniapp returns to foreground
        // Use to resume paused operations
    }

    override fun onPause(miniapp: Miniapp) {
		// Called when miniapp loses foreground focus
        // Pause ongoing operations
    }

    override fun onClose(miniapp: Miniapp) {
        // Triggers when:
        // - User taps close button
        // - Miniapp activity is destroyed
        // Clean up resources and finalize analytics
    }

    override fun onError(miniapp: Miniapp, message: String) {
        // Called when miniapp fails to launch due to internet connection issues
    }

    override fun onUserInteraction(miniapp: Miniapp) {
		// Called on every user touch event
        // Useful for implementing custom idle timeouts
    }
})

-keepclassmembers class io.boxo.js.jsInterfaces.BoxoJsInterface{
    public *; 
}

flutter pub add appboxo_sdk

  android.enableJetifier=true

import 'package:appboxo_sdk/boxo.dart';

Boxo.setConfig( clientId: '[client_id]');

Boxo.openMiniapp( appId );

import 'package:appboxo_sdk/boxo.dart';

Boxo.setConfig(
    clientId: '[client_id]', // your Boxo client_id
    userId: '[hostapp_user_id]',// will be used for the consent screen
    language: 'en', // use it to provide language to miniapp. by default 'en'
    multitaskMode: true, // (optional) 'multitaskMode' works only on Android. By default 'true', each miniapp appears as a task in the Recents screen.
    sandboxMode: false, // sandbox mode. By default 'false'
    theme: 'dark', // (optional) miniapp theme "dark" | "light" (by default is system theme),
    isDebug: true,  // by default 'false', enables webview debugging
    showClearCache: true,  // use it to hide "Clear cache" from Miniapp menu, by default 'true'
    showPermissionsPage: true, // use it to hide "Settings" from Miniapp menu, by default 'true'
    showAboutPage: true  // show/hide "About page" on Miniapp menu, by default 'true'
);

Boxo.openMiniapp(
    "[miniapp_id]", // your miniapp id
    data: {'key': 'value'}, // (optional) data as Map that is sent to miniapp
    theme: 'dark', // (optional) miniapp theme "dark" | "light" (by default is system theme)
    enableSplash:  false // (optional) to skip splash screen. if enabled, the splash screen will be hidden when 50% of web content is loaded. Otherwise, when the web page starts loading. By default is enabled.
);

Boxo.hideMiniapps(); //use it to close all miniapp screens

Boxo.logout(); //On logout from your app, call it to clear all miniapps data.

Boxo.miniapps().listen((result) {
  result.miniapps?.forEach((data) {
    print(data.appId);
    print(data.name);
    print(data.description);
    print(data.logo);
    print(data.category);
  });
  print('error - ${result.error}');
});

Boxo.getMiniapps();

import 'package:flutter/material.dart';
import 'package:appboxo_sdk/boxo.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Future<void> Function() subscription;

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

  @override
  void initState() {
    super.initState();
    subscription = Boxo.lifecycleHooksListener(
      onAuth: (appId) { // called when authorization flow starts
        //sample
        http.get(Uri.parse('get_auth_code_url'))
                .then((response) {
          if (response.statusCode >= 400) {
            print('Error fetching auth code: ${response.body}');
            Boxo.setAuthCode(appId, "");
          } else {
            Boxo.setAuthCode(appId, json.decode(response.body)["auth_code"]);
          }
        });
      },
      onLaunch: (appId) {
        print(appId);
        print('onLaunch');
      },
      onResume: (appId) {
        print(appId);
        print('onResume');
      },
      onPause: (appId) {
        print(appId);
        print('onPause');
      },
      onClose: (appId) {
        print(appId);
        print('onClose');
      },
      onError: (appId, error) {
        print(appId);
        print(error);
        print('onError');
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Boxo SDK Test'),
        ),
        body: Center(
          child: MaterialButton(
            onPressed: () {
              Boxo.openMiniapp("[miniapp_id]"); //launch miniapp by id
            },
            padding: const EdgeInsets.all(16),
            color: Colors.blue,
            child: const Text(
              'Run miniapp',
              style: const TextStyle(
                color: Colors.white,
                fontSize: 16,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

yarn add @appboxo/react-native-sdk

npm install @appboxo/react-native-sdk

react-native link @appboxo/react-native-sdk

  android.enableJetifier=true

cd ios && pod install

import Boxo from '@appboxo/react-native-sdk';

Boxo.setConfig( clientId );

Boxo.openMiniapp( appId );

import React from 'react';
import Boxo from '@appboxo/react-native-sdk';
import { StyleSheet, View, Button } from 'react-native';

export default function App() {

  React.useEffect(() => {
    Boxo.setConfig(
      '[client_id]', { // your Boxo client_id
        userId: [hostapp_user_id], // will be used for the consent screen
        language: 'en', // to provide language to miniapp. by default 'en'
        enableMultitaskMode: true, // (optional) 'multitaskMode' works only on Android. By default 'true', each miniapp appears as a task in the Recents screen.
        sandboxMode: false, // sandbox mode. By default 'false'
        theme: 'light', // (optional) miniapp theme "dark" | "light" (by default is "system")
        isDebug: true,  // by default 'false', enables webview debugging
        showClearCache: true,  // use it to hide "Clear cache" from Miniapp menu, by default 'true'     
        showPermissionsPage: true, // use it to hide "Settings" from Miniapp menu, by default 'true'
        showAboutPage: true  // show/hide "About page" on Miniapp menu, by default 'true'
      }
    );
  }, [])

  const handleOpenMiniapp = () => {
    const options = {
      data: {'key': 'value'},           // (optional) data as {[key: string]: any} that is passed to miniapp in `.getInitData` call
      theme: 'dark',                    // (optional) miniapp theme "dark" | "light" | "system" (by default is value of "theme" argument in setConfig function)
      extraUrlParams: {param: 'test'},  // (optional) extra query params to append to miniapp URL (like: http://miniapp-url.com/?param=test)
    }
    Boxo.openMiniapp(
      '[miniapp_id]',           // miniapp ID to be launched
      options                   // (optional) options
    );
  }

  return (
    <View style={styles.container}>
      <Button
        color="#841584"
        title="Launch miniapp"
        onPress={handleOpenMiniapp}
        accessibilityLabel="Launch miniapp"
    />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#fff',
    justifyContent: 'center',
  },
});

import React from 'react';
import Boxo from '@appboxo/react-native-sdk';
import { StyleSheet, View, Button } from 'react-native';

export default function App() {

  React.useEffect(() => {
    Boxo.setConfig('[client_id]', false); //set your Boxo client id
    
    const subscription = Boxo.lifecycleHooksListener({
      onLaunch: (appId: string) => console.log('onLaunch', appId),  // called when the miniapp will launch with openMiniapp(...)
      onResume: (appId: string) => console.log('onResume', appId),  // called when the miniapp will start interacting with the user
      onPause: (appId: string) => console.log('onPause', appId),    // called when clicked close button in miniapp or when destroyed miniapp activity
      onClose: (appId: string) => console.log('onClose', appId),    // called when the miniapp loses foreground state
      onAuth: (appId: string) => console.log('onAuth', appId),    // called when authorization flow starts
      onError: (appId: string, error: string) => console.log('onError', appId, error),  // handle error
    });

    return () => subscription();
  }, [])

  const handleOpenMiniapp = () => {
    Boxo.openMiniapp('[miniapp_id]');           // miniapp ID to be launched
  }

  return (
    <View style={styles.container}>
      <Button
        color="#841584"
        title="Launch miniapp"
        onPress={handleOpenMiniapp}
        accessibilityLabel="Launch miniapp"
    />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#fff',
    justifyContent: 'center',
  },
});

const options = {
  extraUrlParams: {param: 'test'}  // (optional) extra query params to append to miniapp URL (like: http://miniapp-url.com/?param=test)
}
Boxo.openMiniapp(
  '[miniapp_id]',           // miniapp ID to be launched
  options                   // (optional) options
);

React.useEffect(() => {
    const miniappListSubscription = Boxo.miniapps.subscribe((miniapps: MiniappData[]) => {
            setMiniapps(miniapps);
        }, (error) => {
            console.log(error)
        },
        );
    Boxo.getMiniapps();
    return () => miniappListSubscription();
  }, [])

npm install @appboxo/capacitor-boxo-sdk

npx cap sync

import { Boxo } from 'capacitor-boxo-sdk';

Boxo.setConfig({  clientId: clientId });

Boxo.openMiniapp({ appId: appId });

setConfig(options: ConfigOptions) => Promise<void>

openMiniapp(options: OpenMiniappOptions) => Promise<void>

closeMiniapp(options: { appId: string; }) => Promise<void>

hideMiniapps() => Promise<void>

 setAuthCode(options: { appId: string; authCode: string; }) => Promise<void>

logout() => Promise<void>

getMiniapps() => Promise<MiniappListResult>

addListener(eventName: 'custom_event', listenerFunc: (customEvent: CustomEvent) => void) => Promise<PluginListenerHandle>

sendCustomEvent(customEvent: CustomEvent) => Promise<void>

addListener(eventName: 'payment_event', listenerFunc: (paymentEvent: PaymentEvent) => void) => Promise<PluginListenerHandle>

sendPaymentEvent(paymentEvent: PaymentEvent) => Promise<void>

addListener(eventName: 'miniapp_lifecycle', listenerFunc: (lifecycle: LifecycleEvent) => void) => Promise<PluginListenerHandle>

npm install @appboxo/expo-boxo-sdk

{
  "expo": {
    "plugins": [
      ["@appboxo/expo-boxo-sdk"]
    ]
  }
}

import * as Boxo from 'expo-boxo-sdk';

Boxo.setConfig({  clientId: clientId });

Boxo.openMiniapp({ appId: appId });

setConfig(options: ConfigOptions)

openMiniapp(options: MiniappOptions)

closeMiniapp(appId: string)

hideMiniapps()

Boxo.addAuthListener((authEvent) => {
    Boxo.setAuthCode(authEvent.appId, authCode)
});

logout()

Boxo.addMiniappListListener((result) => {
  console.log(result.miniapps);
});

Boxo.addCustomEventListener((customEvent) => {
  ..handle custom event
  Boxo.sendCustomEvent(customEvent);
});

Boxo.addPaymentEventListener((paymentData) => {
  Boxo.hideMiniapps();
  .. show payment page
  paymentData.status = "success";
  ..confirm payment
  Boxo.sendPaymentEvent(paymentData);
  Boxo.openMiniapp({ appId: paymentData.appId })
});

Boxo.addMiniappLifecycleListener((lifecycleData) => {
  console.log(lifecycleData);
});