[Web Issue] Google Pay Web: method isGooglePayAvailable() throws still 'Not implemented on web.'

[mendo96]

Describe the bug The google pay in android works fine, but when i open it on the web (firefox,chrome, safari tested) i get the error message: 'Not implemented on web.'

Expected behavior A google pay button should be available on the web without any error message.

Screenshots My Code:

Error msg:

Desktop

• OS: MacBook M1
• Browser [chrome, safari,firefox]

Additional context my package json:

{ "name": "XXXX", "version": "1.0.0", "author": "XXXX", "homepage": "", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@agm/core": "^1.1.0", "@angular/animations": "^13.1.2", "@angular/cdk": "^13.1.2", "@angular/common": "^13.1.2", "@angular/core": "^13.1.2", "@angular/fire": "^6.1.5", "@angular/forms": "^13.1.2", "@angular/material": "^13.1.2", "@angular/platform-browser": "^13.1.2", "@angular/platform-browser-dynamic": "^13.1.2", "@angular/router": "^13.1.2", "@capacitor-community/apple-sign-in": "^1.0.1", "@capacitor-community/facebook-login": "^3.3.0", "@capacitor-community/http": "^1.4.1", "@capacitor-community/stripe": "^3.6.0", "@capacitor-community/twitter": "^1.0.1", "@capacitor/android": "^3.4.3", "@capacitor/app": "^1.1.1", "@capacitor/browser": "^1.0.7", "@capacitor/camera": "^1.3.1", "@capacitor/clipboard": "^1.0.8", "@capacitor/core": "^3.4.3", "@capacitor/geolocation": "^1.3.1", "@capacitor/haptics": "^1.1.4", "@capacitor/ios": "^3.4.3", "@capacitor/keyboard": "^1.2.2", "@capacitor/push-notifications": "^1.0.9", "@capacitor/share": "^1.1.2", "@capacitor/splash-screen": "^1.2.2", "@capacitor/status-bar": "^1.0.8", "@capacitor/storage": "^1.2.5", "@codetrix-studio/capacitor-google-auth": "^3.0.2", "@google-cloud/firestore": "^5.0.2", "@google-pay/button-angular": "^3.0.0", "@ionic-native/core": "^5.36.0", "@ionic-native/diagnostic": "^5.36.0", "@ionic-native/native-geocoder": "^5.36.0", "@ionic/angular": "^6.1.0", "@ionic/cli": "^6.19.0", "@ionic/pwa-elements": "^3.1.1", "@robingenz/capacitor-android-dark-mode-support": "^1.0.1", "@thetsf/geofirex": "^0.1.3", "@types/googlemaps": "^3.43.3", "capacitor-native-biometric": "^3.1.0", "cordova-plugin-nativegeocoder": "^3.4.1", "cordova.plugins.diagnostic": "^6.1.1", "cupertino-pane": "^1.2.82", "firebase": "^8.8.1", "ng-circle-progress": "^1.6.0", "ng-otp-input": "^1.8.5", "ngx-image-compress": "^13.1.5", "ngx-sortablejs": "^11.1.0", "rxjs": "^7.5.5", "scriptjs": "^2.5.9", "sortablejs": "^1.15.0", "tslib": "^2.3.1", "zone.js": "^0.11.5" }, "devDependencies": { "@angular-devkit/architect": "^0.1303.3", "@angular-devkit/build-angular": "^13.1.3", "@angular/cli": "^13.1.3", "@angular/compiler": "^13.1.2", "@angular/compiler-cli": "^13.1.2", "@angular/language-service": "^13.3.3", "@capacitor/cli": "^3.4.3", "@ionic/angular-toolkit": "^6.1.0", "@ionic/lab": "^3.2.11", "@types/jasmine": "^4.0.2", "@types/jasminewd2": "^2.0.10", "@types/node": "^17.0.24", "@types/sortablejs": "^1.10.7", "agm-overlays": "^2.0.0", "codelyzer": "^6.0.2", "firebase-tools": "^10.6.0", "fuzzy": "^0.1.3", "inquirer": "^8.2.2", "inquirer-autocomplete-prompt": "^2.0.0", "jasmine-core": "^4.1.0", "jasmine-spec-reporter": "~7.0.0", "karma": "^6.3.18", "karma-chrome-launcher": "^3.1.1", "karma-coverage-istanbul-reporter": "~3.0.3", "karma-jasmine": "^5.0.0", "karma-jasmine-html-reporter": "^1.7.0", "open": "^8.4.0", "protractor": "~7.0.0", "ts-node": "^10.7.0", "tslint": "~6.1.0", "typescript": "^4.4.4" }, }

[nxj1129]

Could you show a snippet of the code you used for google pay button? For me it doesn't work on android. I have also commented on issue #174 The isGooglePayAvailable() always throws an error on my android that Google Pay is not implemented. I have followed all the documentation and cannot see where the problem is since the code is all the same. Everything is installed and setup properly. Tested on Samsung S8, Android 9, Capacitor 3.6.0

[rdlabo]

This is same issue of https://github.com/capacitor-community/stripe/issues/174

[mendo96]

@rdlabo its not the same issue, because on android it works, but in web it does not work, i get this error with 'no implenented on web', the issue that u mentioned throws other error : 'not implemented on device'

[mendo96]

Maybe not all functions were pushed in the last version 3.6.0, because for example i don't have the possibility to enter more options than the clientsecret in createGooglePay()?

[rdlabo]

@mendo96 You are right. I should have checked more carefully. I will discuss web only in this issue.

@mendo96 @nxj1129 And I notice that I forgot to release current version🙏. Now released v3.7.0. Please try this. Thanks.

[mendo96]

Hey thank you for releasing the new version :),

Now i get a different error:

There is always a "null" error from the package and "this device can not use".

I tested that on firefox, chrome and safari.

My code:

[mendo96]

Maybe its a angular configuration problem?

I followed the docs for using that in angular changed the main.ts how it was described in the docs, do i have to do this?

When i follow this guideline, i get a different error:

[rdlabo]

Oh, I see.

https://github.com/capacitor-community/stripe/blob/master/package.json#L79

Please try

% npm i @stripe-elements/stripe-elements@1.1.0-10

It has not been merge yet: https://github.com/stripe-elements/stripe-elements/pull/27

I will check with the people concerned, but please try this first. Thanks.

[mendo96]

Still the same issue, but different logs:

[rdlabo]

Mumu... Please try https://capacitor-community-stripe.netlify.app/ . This hosted master branch, and use tested intent. Can you first check if it works properly in your environment?

[rdlabo]

OK. And I notice. Your environment is not https. Please check this: https://stripe.com/docs/stripe-js/elements/payment-request-button?platform=html-js-testing-google-pay

Google Pay is only work https environment.

[mendo96]

Ill check that later, i deploy the app as https :) your link https://capacitor-community-stripe.netlify.app/ only works in chrome, the other browsers like safari and firefox does not work, the create google pay button is disabled

[mendo96]

The button can now be displayed using https and chrome. However, this error appears when executing the payment:

My code for creating the payment to send to the server:

[rdlabo]

only works in chrome

Yes, It is an accurate behavior.

[rdlabo]

The button can now be displayed using https and chrome. However, this error appears when executing the payment:

Please search error text in Google. This error may not reason from plugin.

[mendo96]

Okay, thank you for your help, i appreciate it