Capturing SDK Events on Mobile

React Native

Install WebView:
yarn add react-native-webview
or
npm i react-native-webview

Import in code:
import { WebView } from 'react-native-webview';

Use in a view:

<WebView  
    source={{ uri: 'https://sdk.mealme.ai/store?api=YOUR_NAME' }}  
    onMessage={(event) => {  
      const data = JSON.parse(event.nativeEvent.data);  
      if (data.id === "mealme-checkout-success") {  
        // use data  
      }  
    }}  
/>

Change mealme-checkout-success to the event you want to listen for or add multiple if statements.

You might also have to add a style property and set the height and width depending on how you want it to work
style={{height: "..", width: ".."}}

IOS

let config = WKWebViewConfiguration()
let source = "window.onmessage = (event) => {if (event.data.id === "event-name") {window.webkit.messageHandlers.iosListener.postMessage(event.data)}};"
let script = WKUserScript(source: source, injectionTime: .atDocumentEnd, forMainFrameOnly: false)
config.userContentController.addUserScript(script)
config.userContentController.add(self, name: "iosListener")
webView = WKWebView(frame: UIScreen.main.bounds, configuration: config)

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    print("message: \(message.body)")
    // and whatever other actions you want to take
}

Android

The example is showing loading product details SDK and listening for events.

webView = (WebView) findViewById(R.id.webview);
webView.setWebViewClient(new WebViewClient());

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);

class JsObject {
@JavascriptInterface
    public void receiveMessage(String data) {
        Log.i("JsObject", "postMessage data="+data);
        //handle data here
    }
}
webView.addJavascriptInterface(new JsObject(), "Android");

String productId = "gAAAAAAAAAAAvcAsFofXR7XlzNv5B6-g-keD0Ml6ZOFGjTcoMQPE2h0H3sEEwRwzs-DAVDzr1NugDYUHyUe2gAxZH6aL_WienyP4TBaoBvefXAX-7PnRSfDciPkCb-FdFdP-sSrBWbpvlmiok3vlBB34ErwH-BSvPmeGZu9ZaHlGwNDeuYoQYheaP-HE46VzC6JH2Rl1jryNcElIKbLufw-412IzisK9-kUBc1ldR4Zm76Y8iQ9emp7nuCWyjZVej2IMmvgdf6q8JnXLBouY3XUDwE2ED2cvzzcHd0PcAwtbYlF1XqLYhkBxur3XRbBVr_7B5UuKjy9a2ies_nebrjc1-7KR-H04RHjf3oul3rNULTX8fxvd5glvRRLcGCwLHIYxxlMK8IBU5RBvFZ8KtGefZanKfExYECxlE-YmPUyWrnnnpwB1HS3eBz1KmUKo8o_M65V4FybL0umisAjM6LqpgEVJtVsUmXNze31EKyZozufuGubjQLUkmd2tS6D5FoyYMNZ5DpZ5F9_wKa_UbpESIcRoR9-9BCflffPyci2OOhLeRXtwhWoArcERWHcwyWJVbt0TsfSJwJx8vwg-LyMbpr4Jc-1SPESC6pkD8_Wiy93KNgVvIWk_bdTcg3fQsQW8OVYLWIMDYt4BqAfaVWWAIz4vHKadBr-H8bRLalU5VCytRgheawVhzE4i6Bt0fVdvWFWiO6MVaea2ihdL9sZxtBGR5QzAMT2XsAtnNqkulmHiXCTjW7q07A-dhECiR3r_bWLGddGxhLBQmiflSLOYvIBwaadZUjWbrDzqUONH9q1ssP5jiJRYtdcfYbFIgYYsnMpJ3FDQNCCujJ_fMKQmubz4lkFE_w==";

String htmlData = "<iframe \n" +
    "    src=\"https://sdk.mealme.ai/product-details?api=YOUR-NAME&productId=" + productId +
    "    allow=\"geolocation\" \n" +
    "    title=\"Mealme Web SDK\" \n" +
    "    style=\"border: none;height: 100vh;margin-bottom: 0px;position: relative;z-index: 100;margin-top: 40px;width: 100%;\">\n" +
    "</iframe>" +
    "<script>" +
    "    window.addEventListener('message', ()=>{Android.receiveMessage(JSON.stringify(event.data));}, false);"+
    "</script>";
webView.loadData(htmlData, "text/html", "UTF-8");