Cómo aceptar pagos QR en tu app móvil (Flutter o React Native)

Integrar pagos QR app móvil Flutter o React Native es una de las decisiones más inteligentes para cualquier comercio electrónico peruano en 2026. Con la interoperabilidad del BCRP ya consolidada, aceptar pagos con Yape, Plin y cualquier billetera interoperable directamente desde tu aplicación nativa no solo reduce fricciones, sino que elimina los contracargos y la validación manual de capturas. En este artículo aprenderás cómo implementarlo con un backend propio, sin depender de SDK móviles oficiales, usando la API REST de una pasarela peruana como TAYPI.

¿Por qué incluir pagos QR app móvil Flutter en tu negocio peruano?

El comercio móvil en Perú crece de forma acelerada, y los usuarios esperan pagar sin salir de la app. Con la infraestructura de pagos interoperables del BCRP, el cobro por QR dejó de ser exclusivo de terminales físicos. Ahora puedes embeber un QR dinámico dentro de tu propia app y ofrecer una experiencia de pago de bajo roce.

Las ventajas de integrar pagos QR en tu app son claras:

Cero contracargos, porque no usas tarjetas de crédito ni débito.
Cobro confirmado en tiempo real, validado contra la entidad financiera, no contra una captura de pantalla.
Liquidación al día siguiente (T+1) en tu cuenta bancaria, sin fondos atrapados en una billetera virtual.
Montos bajos sin penalización: puedes cobrar desde S/ 1.00, ideal para e-commerce de ticket medio y bajo.

Si desarrollas con Flutter o React Native, la integración se basa en consumir una API REST y escuchar notificaciones mediante webhooks, lo que te da control total sin depender de librerías de terceros que se vuelvan obsoletas.

¿Cómo funciona el cobro con QR interoperable desde una app?

Antes de escribir código, es fundamental entender el flujo de un cobro QR dinámico en una app móvil peruana. A diferencia de un QR estático reutilizable, el QR que usarás es único por cada transacción y tiene un tiempo de vida limitado.

El proceso general es este:

Desde tu app (Flutter o React Native), haces una petición al backend de tu comercio.
Tu backend se autentica contra la API REST de la pasarela de pagos y crea un cobro (endpoint POST /api/v1/payments).
La pasarela responde con un QR dinámico (en base64 o como imagen PNG) y una URL de checkout (checkout_url).
Tu app muestra el QR al cliente para que escanee con Yape, Plin o cualquier billetera interoperable de la CCE.
El cliente paga y la pasarela recibe la confirmación directamente desde la cámara de compensación.
La pasarela dispara un webhook firmado con HMAC-SHA256 hacia tu backend notificando el cobro confirmado.
Tu backend valida la firma, registra el pago y libera el producto o servicio al instante.

Todo esto ocurre sin que el cliente tenga que ingresar datos de tarjeta, crear una cuenta adicional o compartir información sensible con tu app. Es el mismo principio de seguridad que usa la interoperabilidad QR del BCRP.

Preparación del backend para crear cobros QR desde Flutter o React Native

Ni Flutter ni React Native tienen un SDK oficial de la pasarela peruana TAYPI. Esto no es una limitación: significa que integrarás directamente la API REST desde el backend de tu comercio, que es la práctica más segura y escalable.

Estructura recomendada

Tu app móvil nunca debe exponer las claves de API ni firmar peticiones HMAC directamente. En su lugar, sigue esta arquitectura:

App móvil (cliente): solicita crear un cobro enviando el monto y la referencia de pedido a tu backend.
Backend de tu comercio (servidor): recibe la solicitud, calcula la firma HMAC-SHA256, construye la petición idempotente y llama a la API REST de la pasarela.
Pasarela de pagos: devuelve el QR y la URL de checkout, que tu backend reenvía a la app para mostrarlos.

Creación del cobro: datos esenciales

Cuando llames al endpoint POST /api/v1/payments desde tu backend, deberás incluir al menos:

Monto (en soles, ej. 59.90).
Moneda (PEN).
Referencia única (tu ID de pedido, para conciliación automática).
Idempotency-Key (un UUID generado por tu backend para evitar cobros duplicados).

La respuesta incluirá el qr_image (que puedes mostrar directamente en un widget Image.memory de Flutter o un componente Image de React Native) y el checkout_url, que sirve como respaldo si el QR falla al escanear. Para entender mejor cómo los webhooks cierran este ciclo, consulta nuestra guía completa de webhooks de pagos en tiempo real.

¿Por qué el backend y no la app?

Centralizar la lógica de pago en el backend te protege de:

Robo de claves API si la app es descompilada.
Falsificación de firmas desde el lado del cliente.
Duplicidad de cobros por reintentos no controlados en el frontend.

Además, cumplir con la idempotencia en APIs de pago es mucho más sencillo desde el servidor.

Confirmación del pago con webhooks: el paso más crítico

El verdadero poder de los pagos QR en tiempo real está en la confirmación instantánea mediante webhooks. Cuando el cliente completa el pago desde su billetera, la CCE valida la transacción y la pasarela te notifica de inmediato.

Configuración del webhook

Tu backend debe exponer un endpoint HTTPS (por ejemplo, POST /api/webhooks/taypi) que reciba un JSON con el estado del cobro. La pasarela de pagos, como TAYPI, usa firma HMAC-SHA256 para que puedas verificar que la notificación es auténtica y no ha sido manipulada.

El proceso de verificación es:

Obtienes el cuerpo del webhook en crudo (raw body).
Calculas un hash HMAC-SHA256 usando tu clave secreta.
Comparas el hash calculado con la firma que viene en el header X-Taypi-Signature.
Si coinciden, el webhook es legítimo; si no, lo rechazas.

Puedes profundizar en este tema en nuestro artículo sobre cómo verificar firmas HMAC-SHA256 en tu backend.

Estados del cobro que debes manejar

Tu backend debe estar preparado para recibir al menos estos eventos:

pay.confirmed: pago confirmado irreversiblente. El dinero se liquidará T+1.
pay.expired: el QR alcanzó su tiempo de vida (15 minutos) sin recibir pago.
pay.failed: la transacción fue rechazada por la entidad financiera (saldo insuficiente, cuenta bloqueada, etc.).

Cuando recibes pay.confirmed, tu app puede reflejar el éxito del pago al instante sin que el usuario tenga que reintentar nada. La experiencia de compra se vuelve fluida y confiable.

Flutter vs React Native: ¿cuál elegir para integrar pagos QR app móvil Flutter y React Native?

Ambos frameworks te permiten crear una app nativa de alta calidad. Como la integración de pagos QR ocurre del lado del backend, no hay diferencia técnica entre ellos para consumir el QR o escuchar el webhook. Sin embargo, ciertos factores pueden inclinar tu decisión.

Aspecto	Flutter	React Native
Lenguaje	Dart	JavaScript / TypeScript
Renderizado de QR	Widget `Image.memory` a partir de base64	Componente `Image` con URI base64
Conexión con backend	HTTP (dart:convert + http)	Fetch API o Axios
Manejo de estado de pago	Provider, Riverpod, Bloc	Context API, Redux, Zustand
Curva de aprendizaje	Moderada (widget tree)	Baja si ya dominas React
Ecosistema fintech	Comunidad en crecimiento	Amplio, con librerías maduras para HTTP

La elección depende más de las habilidades de tu equipo y de la experiencia de usuario que quieras construir. En ambos casos, la clave está en diseñar correctamente el backend que se comunica con la pasarela de pagos QR interoperable. Los pagos QR interoperables en Perú funcionan exactamente igual sin importar el framework del frontend.

Yape On File: suscripciones y pagos en un clic desde tu app

Una de las capacidades más potentes que puedes añadir a tu app móvil es Yape On File, disponible para comercios peruanos que quieran llevar la conversión al siguiente nivel. Con esta funcionalidad reduces la fricción de pago y habilitas cobros recurrentes automáticos.

Cómo funciona Yape On File en una app móvil

Afiliación única (expira en 15 minutos): desde tu app, muestras al cliente una solicitud de afiliación cifrada. Él la acepta directamente en su app Yape sin compartir credenciales contigo.
Pago en un clic: una vez afiliado, el cliente paga desde tu app sin escanear QR, sin reingresar datos y sin salir del flujo. Solo toca un botón y el cobro se ejecuta.
Cobros on-demand y recurrentes: puedes lanzar un cobro puntual a un cliente afiliado (on-demand) o programar suscripciones que la pasarela ejecuta automáticamente. El cliente no participa en los cobros ni reintentos; ya autorizó al afiliarse.

Cobro inteligente para suscripciones

La pasarela gestiona los reintentos de forma inteligente. Si una suscripción falla por saldo insuficiente, el sistema puede reintentar por partes (por ejemplo, 50% + 50%) según las reglas que tú configures. Tú decides si cobrar solo el 100% o recuperar al menos el 50% fraccionado, y cuántos reintentos permitir.

Todo esto sin que el cliente haga nada adicional y sin que la pasarela consulte o verifique su saldo (solo intenta el cobro). La desafiliación es inmediata y el cliente mantiene el control total desde su Yape.

Este tipo de integración es ideal para apps de membresías, plataformas de cursos, SaaS, delivery recurrente y cualquier negocio por suscripción que quiera eliminar el abandono de carrito por fricción de pago. Si ya tienes clara la integración técnica, puedes crear tu cuenta gratis en TAYPI y solicitar la activación de Yape On File para tu comercio.

Buenas prácticas de seguridad y cumplimiento normativo

Al integrar pagos en una app móvil, la seguridad no es negociable. Estás manejando transacciones financieras respaldadas por la infraestructura del BCRP y supervisadas por la SBS mediante una EEDE regulada. Tu implementación debe estar a la altura.

Seguridad técnica en tu integración

Autenticación HMAC-SHA256: firma cada petición a la API de pagos desde tu backend. Nunca expongas las claves en la app.
Idempotencia obligatoria: cada cobro debe llevar una Idempotency-Key única para evitar duplicados por reintentos de red.
Cifrado TLS 1.3: todas las comunicaciones entre tu app, tu backend y la pasarela deben viajar cifradas.
Validación estricta de webhooks: verifica la firma HMAC de cada notificación antes de cualquier acción (liberar producto, enviar confirmación, etc.).

Cumplimiento normativo peruano

La pasarela que elijas debe cumplir con el marco regulatorio peruano:

PLAFT (Prevención de Lavado de Activos y Financiamiento del Terrorismo), exigido por la SBS y la UIF-Perú.
Certificaciones ISO 27001:2022 (seguridad de la información) e ISO 9001:2015 (gestión de calidad).
Operación sobre la CCE (Cámara de Compensación Electrónica) del BCRP, lo que garantiza que las transacciones se liquiden correctamente.

Si quieres profundizar en estos requisitos, te recomendamos leer seguridad en pagos digitales: lo que todo comercio debe saber y qué es PLAFT y por qué tu pasarela debe cumplirla.

Preguntas frecuentes

¿Necesito un SDK de Flutter o React Native para aceptar pagos QR?

No. La integración se hace mediante la API REST de la pasarela, que consumes desde el backend de tu comercio. No existe un SDK móvil oficial de TAYPI ni es necesario para implementar pagos QR en Flutter o React Native. El QR se muestra como imagen base64 usando widgets estándar, y los webhooks confirman el pago por el lado del servidor.

¿Cuánto tiempo demora en confirmarse un pago QR?

La confirmación es inmediata (menos de 2 segundos en la mayoría de casos). La pasarela verifica la transacción contra la entidad financiera y dispara el webhook en tiempo real. El QR expira en 15 minutos si no se paga.

¿Es seguro mostrar el QR directamente en la app sin un SDK oficial?

Sí, porque el QR es una imagen inerte; no expone información sensible del comercio ni del cliente. Toda la lógica de seguridad (autenticación, firma HMAC, idempotencia, validación) ocurre en tu backend y en la comunicación server-to-server con la pasarela.

¿Puedo aceptar suscripciones con pagos QR desde Flutter?

Sí, usando Yape On File. El cliente afilia su Yape una sola vez y luego puede pagar suscripciones recurrentes en un clic, sin escanear QR cada vez. La pasarela gestiona los cobros automáticos y los reintentos inteligentes según las reglas que definas.

¿Qué comisión pago por cada transacción QR?

La comisión es del 2.50% + S/ 0.20 + IGV por cada cobro confirmado. En una transacción de S/ 100, la comisión total es de aproximadamente S/ 3.19, y recibes S/ 96.81 en tu cuenta bancaria al día siguiente. No hay costos de instalación, mensualidades ni permanencia.

Conclusión: los pagos QR en apps móviles ya son una realidad accesible

Integrar pagos QR app móvil Flutter o React Native no requiere magia negra ni SDK especializados. Con una arquitectura backend sólida, consumo de API REST, un buen manejo de webhooks y la infraestructura de pagos interoperables del BCRP, puedes ofrecer una experiencia de pago instantánea, sin tarjetas y sin contracargos.

La fórmula es simple: tu backend crea el cobro y recibe la confirmación; tu app solo muestra el QR o activa el pago en un clic si usas Yape On File. El resto lo maneja la pasarela, que verifica la transacción contra el sistema financiero y te liquida al día siguiente.

Si estás desarrollando una app de delivery, un marketplace, una plataforma educativa o cualquier comercio móvil en Perú, los pagos QR son la ruta más limpia para aumentar la conversión y reducir la fricción. Revisa la documentación para developers, explora cómo funciona el pago con QR interoperable, y comienza a probar en sandbox.

¿Listo para integrar pagos QR en tu app Flutter o React Native? Crea tu cuenta gratis en TAYPI y accede a las claves de prueba para empezar a desarrollar hoy mismo.

¿Listo para cobrar con QR?

Crea tu cuenta gratis y genera tu primer QR en minutos.

Abrir cuenta gratis