angularjs - Web View ionic 中的支付网关集成

Question

我是 ionic 新手，我想在 Web View 中集成支付网关。就像如果客户点击支付按钮，那么它会在浏览器中打开，但我不明白，我不知道如何集成到 Web View 中

付款.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 .付款

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});
};

请帮助我如何在 WebView 中制作 ionic 和 Angular 。预先致谢。

Answer 1

终于得到答案了，只需要在你的ionic项目中添加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...')
    }
}

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