Web视图中的支付网关集成离子

Question

我是离子的新手，我想在网络视图中集成支付网关。如果客户点击付款按钮然后在浏览器中打开但我没有得到我不知道如何在网络视图中集成

payment.html

<ion-view title="Payment">
    <ion-content padding="'true'" class="has-header">
        <form class="list">
            <ion-radio>Credit Card</ion-radio>
            <ion-radio>Net banking</ion-radio>
            <ion-radio>COD</ion-radio>
        </form>
        <!--  <button class="button button-calm button-block ">PAY</button> -->
        <button id="btnSubmit" ng-click="paymentOpen()">Make a Payment</button>

    </ion-content>
</ion-view>

controller.payment

function handleResponse(res) {
    if (typeof res != 'undefined'
        && typeof res.paymentMethod != 'undefined'
        && typeof res.paymentMethod.paymentTransaction != 'undefined'
        && typeof res.paymentMethod.paymentTransaction.statusCode != 'undefined'
        && res.paymentMethod.paymentTransaction.statusCode == '0300') {
        // success code
    } else {
        // error code
    }
};
$scope.paymentOpen = function() {
        //e.preventDefault();
        var configJson = {
            'tarCall': false,
            'features': {
                'showPGResponseMsg': true
            },
            'consumerData': {
                'deviceId': 'WEBSH10', //, '
                'token': '',
                'returnUrl': 'https://www.tekprocess.co',
                'responseHandler': handleResponse,
                'paymentMode': 'all',
                'merchantId': 'T1',
                'consumerId': 'c',
                'consumerMobileNo': '9876543210',
                'consumerEmailId': 'test@test.com',
                'txnId': '148xxxxxxxxx', //Unique merchant transaction ID
                'items': [{
                    'itemId': 'test',
                    'amount': '10',
                    'comAmt': '0'
                }]
            }
        };
        new Card(configJson).init();
    }
    // $scope.paymentOpen2 = window.open($scope.paymentOpen, {openExternal: true});
};

请帮助我如何在离子和角度的网页视图中制作。 提前谢谢。

Answer 1

最后我得到了答案，你需要在离子项目中添加InAppBrowswer的Cordova插件

以及paymentOpen的功能

$scope.paymentOpen = function() {

    var url = 'http://www.xxxx.xxx/payment.html';
    var target = '_blank';
    var options = "location=yes"
    var ref = cordova.InAppBrowser.open(url, target, options);
    ref.addEventListener('loadstart', loadstartCallback);
    ref.addEventListener('loadstop', loadstopCallback);
    ref.addEventListener('loadloaderror', loaderrorCallback);
    ref.addEventListener('exit', exitCallback);

    function loadstartCallback(event) {

        console.log('Loading started: ' + event.url)
    }

    function loadstopCallback(event) {

        console.log('Loading finished: ' + event.url);
        if (event.url.match("/orderResponse.php")) {
            ref.close();
        }
    }

    function loaderrorCallback(error) {

        console.log('Loading error: ' + error.message)
    }

    function exitCallback() {

        console.log('Browser is closed...')
    }
}

就是这样。它将在浏览器中打开。