expo-boxo-sdk

Expo wrapper over Appboxo SDK for IOS and Android.

Install

npm install @appboxo/expo-boxo-sdk

Configuration in app.json/app.config.js

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

API

• setConfig(...)
• openMiniapp(...)
• setAuthCode(...)
• closeMiniapp(...)
• sendCustomEvent(...)
• sendPaymentEvent(...)
• getMiniapps()
• hideMiniapps()
• logout()
• addAuthListener( ...)
• addCustomEventListener()
• addPaymentEventListener()
• addMiniappLifecycleListener()
• addMiniappListListener()

setConfig(...)

setConfig(options: ConfigOptions)

Set global configs

| Prop | Type | Description | |---------------------------| ------------------------------------------ | ---------------------------------------------------------------------------------------- | | clientId | string | your client id from dashboard | | userId | string | hostapp userId, will be used for the Consent Management | | sandboxMode | boolean | switch to sandbox mode | | multitaskMode | boolean | Each miniapp appears as a task in the Recents screen. !It works only on android devices. | | theme | 'light' | 'dark' | 'system' | theme for splash screen and other native components used inside miniapp. | | isDebug | boolean | enables webview debugging | | showPermissionsPage | boolean | use it to hide "Settings" from Miniapp menu | | showClearCache | boolean | use it to hide "Clear cache" from Miniapp menu |

openMiniapp(...)

openMiniapp(options: MiniappOptions)

Open miniapp with options

| Prop | Type | Description | | -------------------- |--------------------------------------------| ------------------------------------------------------------------------------------------------- | | appId | string | miniapp id | | data | Record<string, any> | (optional) data as Map that is sent to miniapp | | theme | 'light' | 'dark' | 'system' | (optional) miniapp theme "dark" | "light" (by default is system theme) | | extraUrlParams | Record<string, string> | (optional) extra query params to append to miniapp URL (like: http://miniapp-url.com/?param=test) | | urlSuffix | string | (optional) suffix to append to miniapp URL (like: http://miniapp-url.com/?param=test) | | colors | Record<string, string> | (optional) provide colors to miniapp if miniapp supports | | enableSplash | boolean | (optional) use to skip miniapp splash screen |

Color options

| Prop | Type | | -------------------- | ------------------- | | primaryColor | string | | secondaryColor | string | | tertiaryColor | string |

setAuthCode(...)

setAuthCode(appId: string, authCode: string)

get AuthCode from hostapp backend and send it to miniapp

closeMiniapp(...)

closeMiniapp(appId: string)

close miniapp by appId

sendCustomEvent(...)

sendCustomEvent(customEventData: CustomEventData)

send custom event to miniapp

| Prop | Type | | --------------- | ------------------- | | appId | string | | requestId | number | | type | string | | errorType | string | | payload | object |

sendPaymentEvent(...)

sendPaymentEvent(paymentData: PaymentData)

send payment data to miniapp

| Prop | Type | | ---------------------- | ------------------- | | appId | string | | transactionToken | string | | miniappOrderId | string | | amount | number | | currency | string | | status | string | | hostappOrderId | string | | extraParams | object |

getMiniapps()

getMiniapps()

Get list of miniapps. To get results subscribe to

• addMiniappListListener()

hideMiniapps()

hideMiniapps()

Miniapp opens on a native screen. To show payment processing page need to hide miniapp screen. To use this function need to enable 'enableMultitaskMode: true' in Appboxo.setConfigs()

logout()

logout()

When host app user logs out, it is highly important to clear all miniapp storage data.

AuthListener

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

CustomEventListener

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

PaymentEventListener

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

MiniappLifecycleListener

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

| Prop | Type | Description | | --------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | appId | string | | | lifecycle | string | onLaunch - Called when the miniapp will launch with Appboxo.open(...) onResume - Called when the miniapp will start interacting with the user onPause - Called when the miniapp loses foreground state onClose - Called when clicked close button in miniapp or when destroyed miniapp page onError - Called when miniapp fails to launch due to internet connection issues onUserInteraction - Called whenever touch event is dispatched to the miniapp page. onAuth - Called when the miniapp starts login and user allows it | | error | string | |

MiniappListListener

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

Get miniapp list

| Prop | Type | | -------------- | -------------------------- | | miniapps | [MiniappData] | | error | string |

MiniappData

| Prop | Type | | ----------------- | ------------------- | | appId | string | | name | string | | category | string | | description | string | | logo | string |