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

Question

I'm testing the google pay api in my localhost site. The first api (isReadyToPay) is returning "true". The second api (createButton) is not creating the button. It will not work in localhost?. For testing this we need 'https'?

Below is my code.

@{
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>

Thanks in advance. Bobbin Paulose

Answer 1

It should work on localhost with Chrome.

I found an issue with the code you provided where onGooglePaymentButtonClicked isn't defined. Replacing onGooglePaymentButtonClicked with () => {} fixes it. See https://jsfiddle.net/gj4x8rk6/