W3C Google Chrome Payment Request API error: The payment method "basic-card" is not supported

Question

I'm trying to implement Google Chrome Payment in my Magento 2 project. Here is the code,

 browserpay: function () {

                    const supportedPaymentMethods = [
                        {
                            supportedMethods: 'basic-card',
                        }
                    ];
                    const paymentDetails = {
                        total: {
                            label: 'Total',
                            amount: {
                                currency: 'USD',
                                value: 12
                            }
                        }
                    };
                    // Options isn't required.
                    const options = {};

                    var paymentRequest = new PaymentRequest(supportedPaymentMethods, paymentDetails, options);
                    console.log('got it');
                    paymentRequest.show();
                },

I'm getting error in paymentRequest.show() like DOMException: The payment method "basic-card" is not supported

I have tried with "https://google.com/pay" instead of "basic-card" and tried both, but still I'm getting same error (payment method not supported)

I followed this tutorial

It is working fine if I try with separate html page in my localhost. I have checked the parameters in console.log, the parameters are same. But it is not working with magento with Knockout js.

I'm trying in my local only, so is that causing issue ? And initially it was not even showing, then I made changes in chrome settings to make work. In settings I have added my local ip address to Insecure origins treated as secure then it was started working, Likewise do I need to do some settings changes in chrome ?

Answer 1

Error caused because of local host name miss configuration. I was using IP address (http://10.150.242.57/magento2ee/) for Magento 2, since localhost (http://localhost/magento2ee) causing issue in login and adding product to cart in Magento 2. So I configured virtual host in my local server then it started working. So chrome pay will not work if you are using IP address. You have to use localhost (http://localhost/your-project) or configure v-host (http://payment.localhost).