Google 在本地主机中的 PaymentRequest 运行未显示创建按钮

Question

我正在我的本地主机站点上测试 google 支付 api。第一个 api (isReadyToPay) 返回“true”。第二个 api (createButton) 没有创建按钮。它在本地主机上不起作用吗？为了测试这个，我们需要 'https'?

下面是我的代码。

@{
ViewBag.Title = "GPay";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>GPay</h2>
<script async src="https://pay.google.com/gp/p/js/pay.js" onload="OnGooglePayLoaded()"></script> 
<div id="gpayButton">test</div>
<script>
function OnGooglePayLoaded() {
    const googlePayClient = new google.payments.api.PaymentsClient({
        environment: 'TEST'
    });

    const clientConfiguration = {
        apiVersion: 2,
        apiVersionMinor: 0,
        allowedPaymentMethods: ['cardPaymentMethod']
    };

    googlePayClient.isReadyToPay(clientConfiguration).then(function (response) {
        console.log(response.result);
        if (response.result) {
            console.log('response.result');
            //const button = googlePayClient.createButton({
            //    buttonColor: 'default',
            //    buttonType: 'long',
            //    onClick: onGooglePaymentsButtonClicked
            //});
            const button = googlePayClient.createButton({ onClick: onGooglePaymentButtonClicked });
            //document.getElementById('container').appendChild(button);
            console.log('button: ');
            document.getElementById('gpayButton').appendChild(button);
        }
    }).catch(function (err) {

    });
}
</script>

提前致谢。线轴保罗斯

Answer 1

它应该在 Chrome 的本地主机上工作。

我发现您提供的代码存在问题，其中 onGooglePaymentButtonClicked 未定义。用 () => {} 替换 onGooglePaymentButtonClicked 修复它。参见 https://jsfiddle.net/gj4x8rk6/

Google 在本地主机中的 PaymentRequest 运行未显示创建按钮

Google's PaymentRequest running in localhost not showing the create button

payment-gateway

google-pay

Google 在本地主机中的 PaymentRequest 运行 未显示创建按钮

Google's PaymentRequest running in localhost not showing the create button

payment-gateway

google-pay

Google 在本地主机中的 PaymentRequest 运行未显示创建按钮