Tengo una aplicación que tiene una zona de pruebas de pago. Estoy usando "expo-linking" Linking.openURL(sandboxURL) para abrir el enlace de pago único en un navegador cada vez que el usuario quiere comprar el producto.
Si se cancela el pago, el sandbox redirige a "https://mywebsitedomain/pago/cancel" Si el pago se realiza correctamente, el sandbox redirige a "https://mywebsitedomain/pago/successful"
Lo que quiero lograr es que el navegador redirija a la página de cancelación de pago y pago exitoso de mi aplicación siempre que se activen los enlaces "https://mywebsitedomain/payment/cancel" y "https://mywebsitedomain/payment/successful" en el navegador.
¿Cómo puedo hacer eso? Recibí sugerencias como usar enlaces profundos. en tal caso, no necesariamente necesito crear ningún enlace, solo necesito que el enlace del sitio web existente sea redirigido a mi aplicación. En ese caso, ¿cuál sería la configuración ideal?
Gracias.
En este caso, recomendaría usar WebView en lugar de vincular, porque vincular realmente no le brinda ningún tipo de control para el flujo después de que el usuario abre una URL en el navegador, DeepLinking teóricamente funcionaría, pero abriría la aplicación desde el inicio. pantalla y luego tendría que navegar al usuario manualmente a la pantalla que desea que sea, aunque no creo que esta sea la solución adecuada ... En su lugar, sugeriría abrir una URL en Webview e inyectar el código javascript personalizado. De esta manera, mantendría al usuario en su aplicación y mantendría el control del flujo. react-native-webview que es un módulo obsoleto y debe agregarse a través del administrador de paquetes, tiene onMessage y accesorios de JavaScript injectedJavaScript , y usarlos podría resolver este problema. Como ejemplo :
Cree una pantalla separada que contenga solo una vista web, estirada a pantalla completa.
Importe la pantalla en su stacknavigator con el nombre apropiado.
Al navegar hacia él, pase accesorios de vista web como parámetros de navegación.
Después:
const jsCode = ` document.addEventListener("click", () => { window.ReactNativeWebView.postMessage(JSON.stringify({type: "click", message : "goBack"})) })`; const onMsg = (event) => { const res = JSON.parse(event.nativeEvent.data); if (res.message === "goBack") { navigation.goBack(); } } <WebView source={{ uri: params.uri, html: params?.html }} androidHardwareAccelerationDisabled javaScriptEnabled injectedJavaScript={jsCode} javaScriptCanOpenWindowsAutomatically collapsable onMessage={onMsg} /> este es un código de ejemplo que cierra la vista web cada vez que el usuario hace clic en algo allí, en su lugar, puede verificar window.location.href , publicarlo como un mensaje en su aplicación y si es igual a https://mywebsitedomain/payment/cancel do algo que quieras hacer :)
ACTUALIZAR
como se menciona en los comentarios, para esta tarea concreta, webview ofrece onNavigationStateChange prop, que está destinado a determinar las actualizaciones de navegación en la vista web. Esta podría ser una mejor opción, ya que algunos de los sitios web podrían no permitirle inyectar código javascript personalizado. Pero, sin embargo, la inyección de JavaScript también es posible y también sería una de las soluciones aquí. Como es un poco difícil de explicar aquí, configuré una aplicación de ejemplo aquí, que utiliza los dos enfoques descritos anteriormente: https://github.com/RocKer004/webview-example-app
La aplicación abre los documentos de navegación nativos de React, si hace clic en React Native Express (primera opción), lo llevará de regreso y cerrará la vista web (esto se maneja con el accesorio onNavigationStateChange ), si hace clic en la última opción, la vista web también va a estar cerrado, pero esta vez esto se maneja mediante la inyección de javascript. De lo contrario, eres libre de navegar por la web.
Para obtener más información, consulte: https://github.com/react-native-webview/react-native-webview