Web 視圖中的支付網關集成 ionic

Question

我是 ionic 的新手，我想在 web 視圖中集成支付網關。就像如果客戶點擊支付按鈕然后它在瀏覽器中打開，但我不知道我不知道如何在 web 視圖中集成

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

控制器.支付

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

請幫助我如何在 ionic 和 angular 的 web 視圖中制作。 提前謝謝。

Answer 1

最后我得到了答案，只是你需要在你的 ionic 項目中添加 InAppBrowswer 的 Cordova 插件

和支付功能后打開

$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...')
    }
}

就是這樣。 它將在瀏覽器中打開。