Error OR_BIBED_15 in Angular / Ionic

[beliven-davide-lorigliola]

Describe the bug A clear and concise description of what the bug is. When a user click on Google Pay Button in my Angular/Ionic(Capacitor app (Android version), a Chrome View is opened and in this view I get the error:

Something went wrong To make this purchase using Google Pay, open this website in a browser app, such as Chrome or Safari. [OR_BIBED_15] OR_BIBED_15

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Component information:

• Component
  • [ ] React component (@google-pay/button-react)
  • [ ] Custom element (@google-pay/button-element)
  • [X ] Angular component (@google-pay/button-angular)
• Component version (e.g. 1.0.0): 3.0.10

Environment:

• Device (e.g. iPhone6): Samsung A22
• OS (e.g. iOS8.1): Android 14
• Browser (e.g. stock browser, safari) Chrome
• Country/region: Italy

Additional context Add any other context about the problem here.

[dmengelt]

@beliven-davide-lorigliola Google Pay is currently not supported in Android WebViews. Thats why you see this error message. Please try to use a CCT or TWA in order for Google Pay to work. Sorry for the circumstances.

[beliven-davide-lorigliola]

@beliven-davide-lorigliola Google Pay is currently not supported in Android WebViews. Thats why you see this error message. Please try to use a CCT or TWA in order for Google Pay to work. Sorry for the circumstances.

Thanks! So, in the case of the custom tabs, I have to intercept the call from the button (eg: "pay.google.com") and open it an a custom tab, right?

[beliven-davide-lorigliola]

Ok, I've installed Cordova plugin (compatible with Ionic), called "browser-tab", that "provides an interface to in-app browser tabs that exist on some mobile platforms, specifically Custom Tabs on Android (including the Chrome Custom Tabs implementation), and SFSafariViewController on iOS."

This plugin was originally developed by... Google! -> https://github.com/danielsogl/awesome-cordova-plugins/tree/master/docs/plugins/browser-tab

npm i:

    "@awesome-cordova-plugins/browser-tab": "^6.6.0",
    "@awesome-cordova-plugins/core": "^6.6.0",
    "cordova-plugin-browsertab": "^0.2.0"

Then in my code I'm intercepting the calls to an external urls (like that of Google Pay) in this way:

export class AppComponent {
  constructor(private platform: Platform, private browserTab: BrowserTab) {

    this.browserTab.isAvailable().then((isAvailable) => {
      if (isAvailable) {
        (window.open as unknown as (url: string) => Promise<any>) = async (
          url: string
        ): Promise<any> => this.browserTab.openUrl(url);
      } else {
        // open URL with InAppBrowser instead or SafariViewController
      }
    });
  }

Now the in-app-browser that support Custom Tabs on Android opens pay.google.com but, unfortunately, I'm still getting the same error, screenshot attached.

[dmengelt]

Could you quickly try with this.browserTab.openUrl(url) where the url is https://gpay-live-demo.web.app. Does Google Pay work if you click the button?

[beliven-davide-lorigliola]

Could you quickly try with this.browserTab.openUrl(url) where the url is https://gpay-live-demo.web.app. Does Google Pay work if you click the button?

Thanks, just tried, it works! So what can be the problem?

[dmengelt]

What is actually the url you intercept?

[beliven-davide-lorigliola]

What is actually the url you intercept?

Something like this: https://pay.google.com/gp/p/ui/pay?ng=true#__WA__=%7B%22requestId%22%3A%22GPAY%22%2C%22returnUrl%22%3A%22http%3A%2F%2Flocalhost%3A8100%2Frecharge-wallet%22%2C%22args%22%3A%7B%22apiVersion%22%3A2%2C%22apiVersionMinor%22%3A0%2C%22allowedPaymentMethods%22%3A%5B%7B%22type%22%3A%22CARD%22%2C%22parameters%22%3A%7B%22allowedAuthMethods%22%3A%5B%22PAN_ONLY%22%2C%22CRYPTOGRAM_3DS%22%5D%2C%22allowedCardNetworks%22%3A%5B%22AMEX%22%2C%22VISA%22%2C%22MASTERCARD%22%5D%7D%2C%22tokenizationSpecification%22%3A%7B%22type%22%3A%22PAYMENT_GATEWAY%22%2C%22parameters%22%3A%7B%22gateway%22%3A%22example%22%2C%22gatewayMerchantId%22%3A%22exampleGatewayMerchantId%22%7D%7D%7D%5D%2C%22merchantInfo%22%3A%7B%22merchantId%22%3A%2212345678901234567890%22%2C%22merchantName%22%3A%22Demo%20Merchant%22%2C%22softwareInfo%22%3A%7B%22id%22%3A%22%40google-pay%2Fbutton-angular%22%2C%22version%22%3A%223.0.10%22%7D%7D%2C%22transactionInfo%22%3A%7B%22totalPriceStatus%22%3A%22FINAL%22%2C%22totalPriceLabel%22%3A%22Total%22%2C%22totalPrice%22%3A%22100.00%22%2C%22currencyCode%22%3A%22EUR%22%2C%22countryCode%22%3A%22IT%22%7D%2C%22i%22%3A%7B%22startTimeMs%22%3A1710936837817%2C%22googleTransactionId%22%3A%22E007739D-3FF0-47A3-BBC9-A7B437754100.TEST%22%2C%22usingPayJs%22%3Atrue%7D%2C%22environment%22%3A%22TEST%22%7D%7D

[dmengelt]

Yeah unfortunately it doesn't work like this. Is there a way for you to show the Google Pay button in a CCT already?

[beliven-davide-lorigliola]

Sorry, I don't understand fully the problem. In the Android - Angular app I'm showing the Google Pay Button in my UI, then at the user click it generates the url above - based of course on my settings - that I'm intercepting with browsertTab. What is the error in this flow?

[beliven-davide-lorigliola]

In Angular I'm using the official https://github.com/google-pay/google-pay-button and if I run the same app as web app it works...

[dmengelt]

What happens behind the scenes for your "Android - Angular" app is that Ionic renders your app in a WebView. Google Pay is not supported in WebViews.

Now, with you intercepting logic by using the browser-tab plugin after the Google Pay button is clicked, Google Pay gets executed in "redirect mode". We don't have any information about the "host page" anymore and therefore you see the same OR_BIBED_15 error again.

Have you tried to play around with this: https://ionic.io/products/payments https://ionic.io/docs/google-pay/install

[beliven-davide-lorigliola]

What happens behind the scenes for your "Android - Angular" app is that Ionic renders your app in a WebView. Google Pay is not supported in WebViews.

Now, with you intercepting logic by using the browser-tab plugin after the Google Pay button is clicked, Google Pay gets executed in "redirect mode". We don't have any information about the "host page" anymore and therefore you see the same OR_BIBED_15 error again.

Have you tried to play around with this: https://ionic.io/products/payments https://ionic.io/docs/google-pay/install

Ok but why launching https://gpay-live-demo.web.app/ from the same WebView is working in the same Ionic - Android app?

[dmengelt]

Because https://gpay-live-demo.web.app hosting the button was already running inside a CCT. Your "Ionic - Android" App showing the button runs within a "normal" Android WebView.

[beliven-davide-lorigliola]

Because https://gpay-live-demo.web.app hosting the button was already running inside a CCT. Your "Ionic - Android" App showing the button runs within a "normal" Android WebView.

Thanks, I will consider the Ionic solution, because it's limited to the enterprise plan. But what is the "magic" that a solution like that can add? Is mandatory that I open my url from a CCT view and not from a webview?

[dmengelt]

Ionic's solution most likely bridges to native code. By bridging to the native Google Pay Android API the experience will increase for your users.

Is mandatory that I open my url from a CCT view and not from a webview?

Not really. This is a Google Pay limitation. As of today we don't have support for Android WebViews. If you want to make it work you need to make sure that the button calling loadPaymentData() already runs in a CCT.

[beliven-davide-lorigliola]

Ionic's solution most likely bridges to native code. By bridging to the native Google Pay Android API the experience will increase for your users.

Is mandatory that I open my url from a CCT view and not from a webview?

Not really. This is a Google Pay limitation. As of today we don't have support for Android WebViews. If you want to make it work you need to make sure that the button calling loadPaymentData() already runs in a CCT.

Understood, thanks for your support!

[dmengelt]

@beliven-davide-lorigliola no problem. and sorry for the circumstances. I will update this issue once we support Android WebViews.