Firefox - ReferenceError: PaymentRequest is not defined

Question

I am trying to implement google pay on a website. The external library for google pay is loaded from pay.google.com. In this google script, they call the browser api PaymentRequest(). This api is built in popular browsers like Safari, Chrome, etc.

I have google pay working, but it does not work on Firefox. When the external script is loaded, it calls PaymentRequest and in the console the following error is shown: ReferenceError: PaymentRequest is not defined

Link to google pay script https://pay.google.com/gp/p/js/pay.js

Mozilla Firefox official webpage states that PaymentRequest is supported in secure context. https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API

I copy and paste only the same code provided from the official source

From my perspective, PaymentRequest is not supported in Firefox and does not work. What am I missing?

Check out the console for both chrome and safari.

Answer 1

Google Pay is working for me on Firefox 78.0.1 on macOS using the following: https://jsfiddle.net/fw5t6caL/

Yes, it does log an error in the console at the following bit of code:

  google.payments.api.UseCanMakePaymentResultFromPayjs && (new PaymentRequest([{
    supportedMethods: [
      'https://google.com/pay'
    ]
  }
  ], {
    total: {
      label: 'Estimated Total Price',
      amount: {
        currency: 'USD',
        value: '10'
      }
    }
  })).canMakePayment().then(function (a) {
    return ef = a
  }).catch (function () {
    return ef = !1
  });

...but it does work. Are you able to try with the JSFiddle linked above?

Also, as an FYI, we've recently released a React and Web Component to simplify the Google Pay integration process. Consider using it as an alternative as it should make it easier to integrate.

Screenshot of JSFiddle output: