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 | | 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.

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 |