Integrar con Java o Kotlin
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.
Android
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.
Javadependencies { ... 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 = "YOUR-checkout_url";
CustomTabsIntent intent = new CustomTabsIntent.Builder()
.build();
intent.launchUrl(MainActivity.this, Uri.parse(url));
val url = "YOUR-checkout_url"
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.
Crear un Deep Link
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 configurar las URLs de retorno en el objeto config.online al crear la order (success_url, failure_url, pending_url y auto_return), según corresponda.
Para conocer más, puedes acceder a la documentación de URLs de retorno.
success_url, failure_url, pending_url), tales como 'localhost/' o '127.0.0.1'. Recomendamos usar un servidor con dominio nombrado (DNS) o IPs de desarrollo para poder regresar al sitio después del pago.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<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 las URLs de retorno de tu order de pago. 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.