Durante el desarrollo de aplicaciones móviles con React Native, es necesario mostrar contenido web dentro de una aplicación. Para lograr esto, existen varias opciones, entre las cuales se destacan el uso de Custom Tabs (para Android) y Safari View Controller (para iOS). Estas tecnologías permiten abrir páginas web en un navegador nativo integrado en la aplicación, brindando una experiencia de navegación más fluida y coherente para los usuarios.

En este paso vamos a instalar y configurar las dependencias necesarias para implementar Custom Tabs en tu proyecto desarrollado en Java o Kotlin.

Si usas Android Nativo para desarrollar tu aplicación lo primero que necesitas es instalar esta dependencia en el archivo build.gradle.

Java
Copiar
dependencies {
    ...
    implementation "androidx.browser:browser:1.4.0"
}

El siguiente paso es implementar las Custom Tabs. Para hacerlo, sólo deberás instanciarlas. A continuación, te compartimos un ejemplo de una Custom Tab simple.

El siguiente código puede ser colocado al abrir una actividad o al ejecutar una acción de la misma, en donde el valor url es igual a la init url de nuestro checkout.

          
String url = "URL-PREFERENCE";
CustomTabsIntent intent = new CustomTabsIntent.Builder()
       .build();
intent.launchUrl(MainActivity.this, Uri.parse(url));

        

          
val url = "URL-PREFERENCE"
    val intent = CustomTabsIntent.Builder()
        .build()
    intent.launchUrl(this@MainActivity, Uri.parse(url))

        

Los Deep Links, también conocidos como enlaces profundos, son una forma poderosa de permitir la navegación directa a pantallas o secciones específicas de una aplicación móvil.

Desde nuestro checkout es posible configurar Deep Links para volver a tu aplicación, ya sea haciendo click en un link de “Volver”, o de forma automática al terminar todo un flujo de pago exitoso, para luego ser redirigido a tu App. Para esto, debemos agregar en la creación de la preferencia de pago las propiedades back_urls y auto_return, según corresponda.

Para conocer más, puedes acceder a la documentación de URLs de retorno.

Para configurar un deeplink nativo en android, dirígete al archivo android /app/src/main/AndroidManifest.xml y declara cuál es la actividad que va estar disponible como deeplink. A continuación te compartimos un ejemplo de cómo es una actividad con Deep Link.

AndroidManifest.xml
Copiar
<activity
   android:name=".Congrats"
   android:exported="true"
   android:label="@string/deeplink"
   android:theme="@style/Theme.MyApplication.NoActionBar" >

   <intent-filter>
       <action android:name="android.intent.action.VIEW" />
       <category android:name="android.intent.category.DEFAULT" />
       <category android:name="android.intent.category.BROWSABLE" />
       <!-- Accepts URIs that begin with "yourapp://congrats" -->
       <data android:scheme="yourapp"
           android:host="congrats" />

   </intent-filter>
</activity>

En los valores intent deberás establecer que la actividad sea navegable por otras aplicaciones. Con los valores scheme y host podrás definir el deeplink de la app a una actividad específica.

Ten en cuenta que este deeplink es el que usarás en todas las back_url de tu preferencia. En los ciclos de la actividad que fue expuesta (por ejemplo, onCreate, onResume) podrás colocar tu lógica de negocio después del pago.