Inicio
Documentación
Recursos
Certificaciones
Comunidad

Comunidad

Recibe las últimas novedades, pide ayuda a otros integradores y comparte tus conocimientos.

Integrar con React Native Expo Go - iOS - Mercado Pago Developers

Búsqueda inteligente powered by OpenAI 

Integrar con React Native Expo Go

En el desarrollo de aplicaciones móviles con React Native, a menudo surge la necesidad de mostrar contenido web dentro de la 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.

Importante
Antes de comenzar a integrar Checkout Pro para Mobile, deberás contar con una preferencia creada en tu backend. Si aún no lo has hecho, ve a Creación de preferencia.

En este paso vamos a instalar y configurar las dependencias necesarias para implementar Safari View Controller en tu proyecto desarrollado en React Native.

Uso de Expo-Web-Browser

Client-Side

Esta dependencia provee el acceso al navegador, en este caso Safari View Controller para iOS. También realiza el manejo del redireccionamiento.

Para instalarla, ejecuta el siguiente comando en tu terminal

yarn

yarn add expo-web-browser

Implementación de Expo-Web-Browser

Client-Side

Para implementar la dependencia Expo-Web-Browser, sigue el ejemplo que mostramos a continuación.

JavaScript

import {
	StatusBar
} from "expo-status-bar";
import {
	StyleSheet,
	Button,
	View
} from "react-native";
import {
	openBrowserAsync
} from "expo-web-browser";
export default function ExpoWebBrowserExample(url) {
	return ( <
		View style = {
			styles.container
		} > < Button title = "Open Browser"
		onPress = {
			() => openBrowserAsync('https://url-to-open.com')
		}
		/> <StatusBar style="auto" / >
		<
		/View> );
	}
	const styles = StyleSheet.create({
		container: {
			flex: 1,
			backgroundColor: "#fff",
			alignItems: "center",
			justifyContent: "center",
		},
	});

Cómo volver a tu App

Client-Side

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.

Client-Side

Para poder recibir y gestionar el Deep Link es necesario configurar en nuestro proyecto de React Native el scheme y path que componen los Deep Links que recibimos para redireccionar a alguna parte de tu aplicación. Para ello, verifica que tu archivo app.json contenga el nombre del scheme:

app.json

"expo": {
	"scheme": "myapp"
}

Al ejecutar npx expo prebuild su archivo ios/appname/Info.plist debería contener algo similar al siguiente código.

info.plist

<key>CFBundleURLTypes</key>
    <array>
        <dict> <key>CFBundleURLSchemes
            </key>
            <array>
                <string>myapp</string>
                <string>com.test.TestExpoBrowser</string>
            </array>
        </dict> 
    </array>

Client-Side

Por último, veremos cómo podemos configurar nuestra aplicación de React Native para recibir y gestionar los Deep Links. Esto se abordará usando la dependencia react-native-inappbrowser.

En el caso de iOS es necesario cerrar la Safari View Controller de manera manual. Para esto, deberás escuchar el evento de cuando cambia la url desde el componente que abre la ventana o el punto de entrada de la aplicación, y luego llamar el método para cerrar la Safari View Controller.

Uso de Expo-Web-Browser

Sigue el ejemplo a continuación para cerrar manualmente Safari View Controller usando Expo-Web-Browser.

JavaScript

import {
	StatusBar
} from "expo-status-bar";
import {
	StyleSheet,
	Button,
	View,
	Linking,
	Platform
} from "react-native";
import {
	openBrowserAsync
} from "expo-web-browser";
import * as WebBrowser from "expo-web-browser";
import {
	useEffect
} from "react";
export default function App() {
	useEffect(() => {
		Linking.addEventListener("url", (event) => {
			const {
				url
			} = event;
			if (url !== null && url.includes("myapp://")) {
				Platform.OS === "ios" && WebBrowser.dismissBrowser();
			}
		});
	}, []);
	const url = "https://url-to-open.com";
	return ( <
		View style = {
			styles.container
		} >
		<
		Button title = "Open Browser"
		onPress = {
			() => openBrowserAsync(url)
		}
		/> <
		StatusBar style = "auto" / > < /View>
	);
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: "#fff",
		alignItems: "center",
		justifyContent: "center",
	},
});