Question

我正在使用网络google pay api将google pay集成到Ionic应用程序中。为此我正在运行脚本。脚本的链接在浏览器中运行正常，但是当我通过IN-APP Browser在我的应用程序中打开此链接时，它给了我意外的开发人员错误。我非常疲惫，但没有通过应用了解问题的原因。请帮助我。 这里是我的打字稿应用内浏览器代码：

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

链接正在后面运行，而我正在使用应用内浏览器打开链接：（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

您正在使用的Google Pay Web API只能在网络上使用-不支持混合应用程序，也不支持从本机应用程序内的WebView调用它。

如果您想在混合应用程序中使用Google Pay，则必须使用本地Java代码调用Google Pay。在Ionic中执行此操作的方法是先build a Cordova plugin，然后通过Ionic Native进行调用。按照Google Pay Android tutorial获取要在插件中使用的实际Java代码。

Google支付：Ionic 2应用程序中出现意外的开发人员错误

1 个答案: