Google pay: непредвиденная ошибка разработчика в приложении Ionic 2

Question

Я интегрирую Google Pay в приложение Ionic с помощью веб-приложения Google Pay Api. Я запускаю скрипт для этого. Ссылка скрипта отлично работает в браузере, но когда я открываю эту ссылку в моем приложении через браузер IN-APP, она дает меня ОЖИДАЕТ ОШИБКА РАЗРАБОТЧИКА. Я очень устал, но не могу понять причину проблемы через приложение. Пожалуйста, помогите мне. ЗДЕСЬ МОЙ TYPESCRIPT КОД БРАУЗЕРА В ПРИЛОЖЕНИИ:

 var url = "https://mypaymenturl/googlepay/googlepay.html?price=0.01"
    var a: any; var b: any; var c: any;
    var target = '_self'
    var options = {location: 'no'};
    var browser = this.iab.create(url, '_blank', {location: 'no'});
            browser.on('loadstart').subscribe((e) => {
        console.log(e);
        let url = e.url;
        console.log(e.url);

    }, err => {
        console.log("InAppBrowser loadstart Event Error: " + err);
    });

ЗДЕСЬ РАСКРЫВАЕТСЯ СЦЕНАРИЙ ЗА ССЫЛКОЙ, КОТОРУЮ Я ОТКРЫВАЮСЯ С ИСПОЛЬЗОВАНИЕМ БРАУЗЕРА IN-APP:(URL-скрипт: https://mypaymenturl/googlepay/googlepay.html?price=0.01)

<div id="container">
</div>`<script>
var allowedPaymentMethods = ['CARD', 'TOKENIZED_CARD'];
var allowedCardNetworks = ['AMEX', 'DISCOVER', 'JCB', 'MASTERCARD', 'VISA'];
var tokenizationParameters = {
    tokenizationType: 'PAYMENT_GATEWAY',
    parameters: {
        'gateway': 'stripe',
        'stripe:version': "5.1.0",
        'stripe:publishableKey': 'pk_test_b2gp9tSHK9iP****'

    }
}
function getGooglePaymentsClient() {
    return (new google.payments.api.PaymentsClient({environment: 'TEST'}));
}
function onGooglePayLoaded() {
    var paymentsClient = getGooglePaymentsClient();
    paymentsClient.isReadyToPay({allowedPaymentMethods: allowedPaymentMethods})
            .then(function (response) {
                if (response.result) {
                    prefetchGooglePaymentData();
                }
            })
            .catch(function (err) {
                console.error(err);
            });
}
function addGooglePayButton() {
    var button = document.createElement('button');
    button.className = 'google-pay';
    button.appendChild(document.createTextNode('Google Pay'));
    button.addEventListener('click', onGooglePaymentButtonClicked);
    document.getElementById('container').appendChild(button);
}
function getGooglePaymentDataConfiguration() {
    return {
        paymentMethodTokenizationParameters: tokenizationParameters,
        allowedPaymentMethods: allowedPaymentMethods,
        cardRequirements: {
            allowedCardNetworks: allowedCardNetworks
        }
    };
}
function getGoogleTransactionInfo() {
    var url = new URL(window.location.href);
    var price = url.searchParams.get("price");
    console.log(price);
    return {
        currencyCode: 'USD',
        totalPriceStatus: 'FINAL',
        totalPrice: price
    };
}
function prefetchGooglePaymentData() {
    var paymentDataRequest = getGooglePaymentDataConfiguration();
    console.log(paymentDataRequest);
    var url = new URL(window.location.href);
    var price = url.searchParams.get("price");
    console.log(price);
    paymentDataRequest.transactionInfo = {
        totalPriceStatus: 'FINAL',
        currencyCode: 'USD',
        totalPrice: price
    };
    var paymentsClient = getGooglePaymentsClient();
    paymentsClient.prefetchPaymentData(paymentDataRequest);
    onGooglePaymentButtonClicked();
}
function onGooglePaymentButtonClicked() {
    console.log("vikrant");
    var paymentDataRequest = getGooglePaymentDataConfiguration();
    console.log(paymentDataRequest);
    paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
    var paymentsClient = getGooglePaymentsClient();
    console.log(paymentsClient);
    console.log("paymentsClient");
    paymentsClient.prefetchPaymentData(paymentDataRequest);
    paymentsClient.loadPaymentData(paymentDataRequest)
            .then(function (paymentData) {
                console.log("Handle the response");
                console.log(paymentData);
                processPayment(paymentData);
            })
            .catch(function (err) {
                console.log("show error in developer console for debugging");
                console.error(err);
                window.history.replaceState(null, null, "?param=error");
            });
}
function processPayment(paymentData) {
    var data = JSON.parse(paymentData.paymentMethodToken.token)
    window.history.replaceState(null, null, "?param=success&token=" + data.id + "&card=" + data.card.id);}</script>`
<script async   src="https://pay.google.com/gp/p/js/pay.js"onload="onGooglePayLoaded()"></script>

Answer 1

Используемый вами веб-API Google Pay можно использовать только в веб-приложениях - гибридные приложения или его вызов из WebView внутри собственного приложения не поддерживается.

Если вы хотите использовать Google Pay в гибридном приложении, вам нужно позвонить в Google Pay из нативного кода Java. Способ сделать это в Ionic - создать плагин Cordova, а затем вызвать его через Ionic Native. Следуйте учебному пособию по Google Pay Android для фактического кода Java для использования в плагине.