The custom events system is a powerful feature that enables two sided data communication between a miniapp and a host app. The miniapp can send any data that can be recognised by the host app. Further, certain operations can be implemented on the native app level.

One possible scenario is when the user pays for the miniapp product on the level of the host app by using a host app’s payment system. The possible flow would be:

Here’s a revised version of the flow for clarity:

  1. User opens host app and launches miniapp: The user initiates the miniapp from within the host app.
  2. User proceeds with miniapp flow: The user navigates through the miniapp as intended.
  3. User selects products and clicks on BUY: The user chooses items and confirms their purchase.
  4. Miniapp sends custom event with product details, order, and amount: The miniapp sends the order details, including the products and total amount, through a custom event.
  5. Host app receives custom event and shows a confirmation screen for purchase: The host app processes the custom event and displays a purchase confirmation screen on top of the active miniapp.
  6. Host app performs purchasing operation and sends back a custom event to the miniapp: The host app completes the purchase and sends a custom event back to the miniapp, containing either transaction details and a success message or a failure message.
  7. Miniapp receives the custom event and shows confirmation/failure screen: The miniapp processes the response and displays either a success or failure screen based on the transaction outcome.
  8. If the transaction is successful, the miniapp saves the transaction details: For future reference and monthly reconciliation, the miniapp saves the successful transaction details.

This flow ensures that the interaction between the miniapp and host app is smooth and that purchase transactions are accurately tracked.

​
Examples

Calling custom event from miniapp:

appboxo.send('AppBoxoWebAppCustomEvent', {
  type: 'any_string_identifier',  // Any string identifier to be handled by host app
  payload: {                      // Any payload data to be send to host app
    // Your data
  }
})

Calling custom event from miniapp with promise:


const dataDTO = {
  type: 'custom_event_type', // custom event type
  payload: {data: 'data'}, // your data
}

appboxo.sendPromise('AppBoxoWebAppCustomEvent', dataDTO)
  .then(() => console.log('success'))  // success callback
  .catch(() => console.log('rejected'))  // reject callback

Receiving custom event sent from host app:

appboxo.subscribe(event => {
  if (!event.detail) {
    return;
  }

  const { type, data } = event.detail;

  if (type === 'AppBoxoWebAppCustomEvent') {
    // Reading result of the Code Reader
    console.log(data.type);       // Custom event string identifier
    console.log(data.payload);    // Payload data
  }
});