Google Pay with iOS WKWebview

Question

We developed Native iOS application. Now trying to integrate Google pay with iOS app. Our apps exists in 11 countries. Initially we want to do a POC for any of listed countries but do not want to start with India.

We are trying to follow Tutorial for integrating Google Pay API on website. So trying to load the Html code given at tutorial inside iOS WKWebView ( Tutorial link : https://developers.google.com/pay/api/web/guides/tutorial )

The html code given at above link works inside mac desktop Safari browser on my Mac laptop. It shows 'Buy with G Pay' button in browser . Also tapping on it, I could see visa test card. But when same Html is loaded inside WKWebView, it initially failed to show GPay button.

It initially failed at Step-6 of above tutorial ( Determine readiness to pay with the Google Pay API )

I debugged and found that paymentsClient.isReadyToPay returns false. Documentation says that above function i.e., isReadyToPay() determines if the Google Pay API is supported by the current device and browser ( in our case WKWebView) for specified payment methods.

To overcome this, We used user agent string of Safari browser listed at https://myip.ms/view/comp_browsers/13092/Safari_14.html

We used applicationNameForUserAgent property of WKWebViewConfiguration. Referring the table at above link, we used user agent string in this configuration for WKWebView.

The button started appearing but its text is still not turning to 'Buy With G Pay '. It is just showing 'GPay .....' In Safari browser, the button text immediately changes.

Query :

What JS code must be failing in iOS WKWebview while changing button text?

user3106871 user3106871 · Accepted Answer · 2021-08-02T14:15:25

UPDATE :

Above issues got resolved.

With iOS WKWebView, I am able to see test cards when signed with my gmail id which added to user group https://groups.google.com/forum/#!forum/googlepay-test-mode-stub-data which is specified at Test card suite (https://developers.google.com/pay/api/android/guides/resources/test-card-suite).

But now it is failing to generate token. Hence I decided to test it on Safari browser. I opened HTML file in Safari and chrome browsers for testing.

HTML code worked in chrome browser and generated payment token. But when the same Html is tried in Safari browser, it is not able to generate payment token data.

Some of the log statements in code below are not getting printed in Safari :

function onGooglePaymentButtonClicked() 
{
  const paymentDataRequest = getGooglePaymentDataRequest();
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();

  const paymentsClient = getGooglePaymentsClient();
  console.log("loadPaymentData here came");
  paymentsClient.loadPaymentData(paymentDataRequest)
      .then(function(paymentData)
 {
        // handle the response
        console.log("here came");
        processPayment(paymentData);
      })
      .catch(function(err) {
        // show error in developer console for debugging
        console.log("here came exception");
        console.error(err);
      });
}

console.log("here came") is not getting printed.

console.log("here came exception") is also not getting printed.

Not able to find problem with loadPaymentData JS function in Safari browser. Once it succeeds in Safari browser, I will try in iOS WKWebView.

Google Pay with iOS WKWebview

1 Answers