Integrating nativescript-paytm plugin in nativescript-vue application

Question

I'm having a nativescript-vue application where I want to integrate nativescript-paytm plugin, I created a method on click event: payNow() which contains all the necessary details of Paytm as described in Readme.md/documentation/demo app.

import {
    Paytm,
    Order,
    TransactionCallback,
    IOSCallback
} from "@nstudio/nativescript-paytm";

const paytm = new Paytm()
methods: {
    payNow() {
        paytm.setIOSCallbacks({
            didFinishedResponse: function(response) {
                console.log(response);
            },
            didCancelTransaction: function() {
                console.log("User cancelled transaction");
            },
            errorMissingParameterError: function(error) {
                console.log(error);
            }
        });
        // Sample order
        const order  = {
            // This will fail saying duplicate order id
            // generate your own order to test this.
            MID: "rzqfRq*******83",
            ORDER_ID: "NOETIC_ORDER_0001",
            CUST_ID: "CUST_6483",
            INDUSTRY_TYPE_ID: "Retail",
            CHANNEL_ID: "WAP",
            TXN_AMOUNT: "10.00",
            WEBSITE: "WEBSTAGING",
            CALLBACK_URL: "https://pguat.paytm.com/paytmchecksum/paytmCallback.jsp",
            EMAIL: "rubal@example.com",
            MOBILE_NO: "9876543210",
            CHECKSUMHASH: "NDspZhvSHbq44K3A9Y4daf9En3l2Ndu9fmOdLG+bIwugQ6682Q3JiNprqmhiWAgGUnNcxta3LT2Vtk3EPwDww8o87A8tyn7/jAS2UAS9m+c="
        };

        paytm.initialize("STAGING"); 

        paytm.createOrder(order);

        paytm.startPaymentTransaction({
            someUIErrorOccurred: function(inErrorMessage) {
                console.log(inErrorMessage);
            },
            onTransactionResponse: function(inResponse) {
                console.log(inResponse);
            },
            networkNotAvailable: function() {
                console.log("Network not available");
            },
            clientAuthenticationFailed: function(inErrorMessage) {
                console.log(inErrorMessage);
            },
            onErrorLoadingWebPage: function(
                iniErrorCode,
                inErrorMessage,
                inFailingUrl
            ) {
                console.log(iniErrorCode, inErrorMessage, inFailingUrl);
            },
           onBackPressedCancelTransaction: function() {
                console.log("User cancelled transaction by pressing back button");
           },
           onTransactionCancel: function(inErrorMessage, inResponse) {
               console.log(inErrorMessage, inResponse);
           }
      });
    }
}

While executing so I only get to see screens like this:

I can see that while cancelling I get a message in my console User cancelled transaction by pressing back button that means these things are also working but I am unable to see any screen, atleast if any error message is visible I can try to debug. Help me out with this.

Here's the message which I get in my command prompt:

JS: Avoid using ListView or ScrollView with no explicit height set inside StackLayout. Doing so might results in poor user interface performance and a poor user experience. chromium: [INFO:library_loader_hooks.cc(36)] Chromium logging enabled: level = 0, default verbosity = 0 chromium: [INFO:aw_field_trial_creator.cc(54)] First-WebView-Experiment not found JS: 'User cancelled transaction by pressing back button' JS: Avoid using ListView or ScrollView with no explicit height set inside StackLayout. Doing so might results in poor user interface performance and a poor user experience. chromium: [INFO:CONSOLE(0)] "The SSL certificate used to load resources from https://pguat.paytm.com will be distrusted in the future. Once distrusted, users will be prevented from loading these resources. See https://g.co/chrome/symantecpkicerts for more information.", source: (0) chromium: [INFO:CONSOLE(0)] "The SSL certificate used to load resources from https://pguat.paytm.com will be distrusted in the future. Once distrusted, users will be prevented from loading these resources. See https://g.co/chrome/symantecpkicerts for more information.", source: https://pguat.paytm.com/oltp-web/processTransaction?ORDER_ID=NOETIC_ORDER_0001 (0) JS: 'User cancelled transaction by pressing back button' JS: Avoid using ListView or ScrollView with no explicit height set inside StackLayout. Doing so might results in poor user interface performance and a poor user experience. chromium: [INFO:CONSOLE(0)] "The SSL certificate used to load resources from https://pguat.paytm.com will be distrusted in the future. Once distrusted, users will be prevented from loading these resources. See https://g.co/chrome/symantecpkicerts for more information.", source: (0) chromium: [INFO:CONSOLE(0)] "The SSL certificate used to load resources from https://pguat.paytm.com will be distrusted in the future. Once distrusted, users will be prevented from loading these resources. See https://g.co/chrome/symantecpkicerts for more information.", source: https://pguat.paytm.com/oltp-web/processTransaction?ORDER_ID=NOETIC_ORDER_0001 (0)

For more info I raised issue on GitHub repo: https://github.com/nstudio/nativescript-paytm/issues/5

Edit:

I tried adding it through playground, but since it uses external library integration is not possible. However I tried using in following link

https://play.nativescript.org/?template=play-vue&id=CpqoNA&v=2

Hope this gives more clear picture about it.

Edit:

My whole payment.vue file looks like following link: https://gist.github.com/nitish1986/f23644514082efe757f132e943f2df51

Thanks