typescript - 谷歌支付 : Unexpected Developer Error in Ionic 2 app

Question

我正在使用 web google pay api 在 Ionic 应用程序中集成 google pay。我正在为此运行脚本。脚本的链接在浏览器中运行良好，但是当我通过 IN-APP 浏览器在我的应用程序中打开此链接时，它给出了我意外的开发人员错误。我非常筋疲力尽，但没有通过应用程序找到问题的原因。请帮帮我。
这是我的应用程序内浏览器代码:

 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 只能在 Web 上使用 - 不支持混合应用程序或从 native 应用程序内的 WebView 调用它。

如果您想在混合应用程序中使用 Google Pay，则必须从 native Java 代码调用 Google Pay。在 Ionic 中执行此操作的方法是 build a Cordova plugin然后通过 Ionic Native 调用它.关注 Google Pay Android tutorial用于插件中使用的实际 Java 代码。