How to navigate to the app from an embedded WebView in Capacitor in Android

Question

We are integrating a payments system with our app. It works perfectly on iOS, but navigating back to the app in Android doesn't work. We would like to open the payment system web page inside our app. To do that we have set this configuration in capacitor.config.json:

{
  "server": {
    "allowNavigation": ["sis-t.redsys.es", "*.redsys.es"]
  }
}

Now, to integrate system is a bit tricky. We need a form component that triggers a post:

<form ngNoForm #myFormPost action="https://sis-t.redsys.es:25443/sis/realizarPago" method="post">
  <input type="hidden" name="Ds_SignatureVersion" [value]="dsSignatureVersion" />
  <input type="hidden" name="Ds_MerchantParameters" [value]="dsMerchantParameters" />
  <input type="hidden" name="Ds_Signature" [value]="dsSignature" />
</form>

In our app.component.ts we have the following code:

import { Component } from '@angular/core'
import { Router } from '@angular/router'
import { Capacitor, Plugins } from '@capacitor/core'

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  private url = new URL(window.location.href)

  constructor(private readonly router: Router) {}

  async ngOnInit() {
    if (this.url.searchParams.has('r')) {
      if (Capacitor.isNative) {
        await Plugins.App.openUrl({ url: this.url.href })
        await this.getLaunchUrl()
      } else {
        await this.router.navigateByUrl(this.url.href.split('.com').pop()!)
      }
    }
  }

  async getLaunchUrl() {
    const urlOpen = await Plugins.App.getLaunchUrl()
    if (urlOpen && urlOpen.url) {
      await this.router.navigateByUrl(this.url.href.split('://localhost').pop()!)
    }
  }
}

All of this works, as it opens the payment systems app. Now, this system allows us to set a redirect page in order to navigate back to our app. We have set capacitor://localhost/store?r=ko. As stated in the documentation the scheme for iOS is capacitor:// and in Android is http://. So when we finish the operation and try to go back to app by clicking on the button on iOS it goes back to the app perfectly but with Android no.

We tried setting the url when we are in iOS to capacitor://localhost/store?r=ko and in Android to http://localhost/store?r=ko, however in Android, it tries to open the browser, which we don't want.

We have tried setting the androidScheme to capacitor, but it breaks the http requests. We also tried changing the AndroidManifest.xml property android:launchMode to singleTop as stated in this issue. We tried changing the strings.xml as stated in the documentation to the following:

<?xml version='1.0' encoding='utf-8'?>
<resources>
    <string name="app_name">app</string>
    <string name="title_activity_main">app</string>
    <string name="package_name">com.app</string>
    <string name="custom_url_scheme">com.app</string>
</resources>

And set the callback url to com.app://localhost/store?r=ko but nothing.

We have tried some configuration with Deep links, but because we are inside the app it does not navigate to the app, as we are not coming from an external site.

Precipitancy

Try using just /store?r=ko for redirecting to an app's page (obviously store has to be a known path for the router module) – Karissakarita

No @Karissakarita it doesn't work, as it must be an absolute url, since we are in Web page inside de Webview and there is no notion of Angular or the app itself. – Aureliaaurelian

Did you try this in order to use Redsys redirection method in your native apps? Was you finally successfull? – Malti

Answer 1

Maybe you can create a proxy GET backend endpoint that receives dsSignature, dsMerchantData and dsSignatureVersion as query params. Then you should redirect your request to Redsys from backend.

Using this method the Deep Link works because the initial URL is a external GET site.

Lindsylindy