JavaScript SDK

This package is used to communicate with the native SDKs. It’s a set of functions for requesting and receiving data. To get started, run the install command below:

npm install web-jsbridge

Basic Usage

// Common JS
const { callHandler, registerHandler, $bridge } = require("web-jsbridge");

// ES Module
import { callHandler, registerHandler, $bridge } from 'web-jsbridge';

Call Handler

This is used to request the resource from the Native Host application.

closeApp

This functions trigger the native app to close the current running Mini App.

await callHandler("closeApp", {})

getProfile

Get current profile of the user. After, the payment is made, the getStatus event will be called.

const profile = await callHandler("getProfile", {});

getDefaultAcc

Get the default account of the user.

const account = await callHandler("getDefaultAcc", {
  currency: "USD",
  amount: "1.42"
});

doPayment

Trigger the payment on the native app

await callHandler("doPayment", {
  amount: "1.42",
  currency: "USD",
  account: "12341234",
  useDefault: false, 
});

getConfig

Get information about the mini app config. Such as merchant ID or Mini App ID.

const cfg = await callHandler("getConfig", {});

openMap

Open Google Maps or Apple Maps by providing the Latitude or Longitude

await callHandler("openMap", { 
  lat: "2.1", 
  lng: "1.4"
});

share

Share content via the platform default share intent.

await callHandler("share", {
  fileName: "file.png",
  content: "base64",
  type: "image/png",
  message: "",
  trxId: "1234",
})

requestCurrentLocation

Request current location of the user. Once it’s resolved, it will trigger the requestCurrentLocation event listener.

await callHandler("requestCurrentLocation", {});

openApp

Open native application or deep link.

// open the default email app.
await callHandler('openApp', {
  name: "email",
  value: "[email protected]",
})

// phone dial
await callHandler('openApp', {
  name: "phone",
  value: "85511223344",
})

// web
await callHandler('openApp', {
  name: "website",
  value: "http://google.com",
})

// deep link
await callHandler('openApp', {
  name: "website",
  value: "tg://resolve?t=example",
})

viewAppInfo

Trigger the mini app information dialog.

await callHandler("viewAppInfo", {});

Register Handler

Listen for an event invoked by the Native Host application.

Payment Status getStatus

Once the payment is completed or failed, it will trigger to this event listener.

registerHandler('getStatus', data => {
  console.log(data)
});

Current Location requestCurrentLocation

After the current location is requested, the user might reject or grant the permission. If the permission is granted, the location information will be passed into this event listener.

registerHandler('requstCurrentLocation',  data => {
  console.log(data)
  // => { latitude: "0.0", longitude: "0.0" }
})

Close Mini App Prompt closeApp

Once the close button on the top right corner of the mini app is clicked, this listener will be invoked to show the soft closing dialog asking if user wants to leave.

registerHandler("closeApp", (data, callback) => {
  if (confirm("Are you sure") {
    callback()
  }
})