Integrar con Flutter
Para integrar el Checkout Pro de Mercado Pago en una aplicación para dispositivos móviles, es necesario mostrar el flujo de pago web dentro de la aplicación. Para esto, utiliza Custom Tabs para Android y Safari View Controller para iOS.
En esta documentación, encontrarás instrucciones detalladas sobre cómo realizar esta integración utilizando Flutter y Custom Tabs. Se presentarán los pasos para instalar las bibliotecas necesarias, configurar las dependencias y se proporcionarán ejemplos prácticos de cómo abrir páginas web usando Custom Tabs.
A continuación, selecciona el sistema operativo y sigue el paso a paso correspondiente.
En esta etapa, instalarás y configurarás las dependencias necesarias para implementar Custom Tabs en tu proyecto desarrollado en Flutter.
Retorno a la aplicación con Deep Links
Para que el usuario pueda volver a tu aplicación después de completar el pago, necesitarás configurar Deep Links. Esto permite que el usuario sea redirigido automáticamente a una pantalla específica de tu aplicación al finalizar el flujo de pago o al hacer clic en un botón de retorno.
1. Configurar las URLs de retorno en la order de pago
Al crear la order de pago en tu backend, configura las URLs de retorno en el objeto config.online al crear la order (success_url, failure_url, pending_url y auto_return). Para más información, consulta la documentación sobre cómo Crear y configurar una order de pago.
json
"config": { "online": { "success_url": "tuapp://success", "failure_url": "tuapp://failure", "pending_url": "tuapp://pending", "auto_return": "approved" } }
2. Configurar la recepción y gestión de Deep Links en Flutter
Flutter te permite gestionar Deep Links tanto en Android como en iOS. Para esto, utiliza paquetes como uni_links o go_router para detectar y gestionar la navegación interna cuando la aplicación es abierta mediante un Deep Link.
