vuejs2 - 在 nativescript-vue 应用程序中集成 nativescript-paytm 插件

Question

我有一个 nativescript-vue 应用程序，我想在其中集成nativescript-paytm插件，我创建了一个关于点击事件的方法：它包含Readme.md/documentation/demo 应用程序中描述的payNow()所有必要细节。Paytm

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: "[e-mail]",
            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);
           }
      });
    }
}

在执行时，我只能看到这样的屏幕：

我可以看到，在取消时，我在控制台中收到一条消息，User cancelled transaction by pressing back button这意味着这些东西也在工作，但我看不到任何屏幕，至少如果有任何错误消息可见，我可以尝试调试。帮我解决这个问题。

这是我在命令提示符中收到的消息：

JS：避免在 StackLayout 中使用没有明确设置高度的 ListView 或 ScrollView。这样做可能会导致糟糕的用户界面性能和糟糕的用户体验。铬：[INFO:library_loader_hooks.cc(36)] Chromium 日志记录已启用：级别 = 0，默认详细程度 = 0 铬：[INFO:aw_field_trial_creator.cc(54)] First-WebView-Experiment not found JS:'用户取消交易按下后退按钮的 JS：避免使用 ListView 或 ScrollView，而 StackLayout 中没有明确设置高度。这样做可能会导致糟糕的用户界面性能和糟糕的用户体验。chromium: [INFO:CONSOLE(0)] "用于从https://pguat.paytm.com加载资源的 SSL 证书将来会被不信任。一旦不信任，用户将无法加载这些资源。见https://g.co/chrome/symantecpkicerts了解更多信息。”，来源：(0) chromium: [INFO:CONSOLE(0)] “用于从https://pguat.paytm.com加载资源的 SSL 证书将来会不信任。一旦不信任，用户将无法加载这些资源。有关更多信息，请参阅https://g.co/chrome/symantecpkicerts。”，来源：https ://pguat.paytm.com/oltp-web/processTransaction?ORDER_ID=NOETIC_ORDER_0001 (0) JS：'用户通过按取消交易后退按钮的 JS：避免在 StackLayout 内使用没有明确设置高度的 ListView 或 ScrollView。这样做可能会导致糟糕的用户界面性能和糟糕的用户体验。chromium: [INFO:CONSOLE(0)] "https://pguat.paytm.com未来将不被信任。一旦不信任，用户将无法加载这些资源。有关更多信息，请参阅https://g.co/chrome/symantecpkicerts。”，来源：(0) chromium: [INFO:CONSOLE(0)] “用于从https://pguat.paytm 加载资源的 SSL 证书。 com将在未来不受信任。一旦不信任，用户将无法加载这些资源。有关更多信息，请参阅https://g.co/chrome/symantecpkicerts。”，来源：https ://pguat.paytm.com/oltp-web/processTransaction?ORDER_ID=NOETIC_ORDER_0001 (0)

有关更多信息，我提出了问题GitHub repo：https ://github.com/nstudio/nativescript-paytm/issues/5

编辑：

我尝试通过游乐场添加它，但由于它使用外部库集成是不可能的。但是我尝试在以下链接中使用

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

希望这能提供更清晰的画面。

编辑：

我的整个payment.vue文件看起来像以下链接：https ://gist.github.com/nitish1986/f23644514082efe757f132e943f2df51

谢谢

标签： vuejs2nativescriptangular2-nativescriptnativescript-vuenativescript-plugin