HomeGuidesAPI ReferenceChangelog
Log In
Guides

QR

Suggest Edits

Crear un pago en Perú con QR consiste en capturar los datos necesarios del cliente para el pago y hacer una solicitud a través de nuestra API con un bearer token y una firma secreta. De esta forma, las transacciones se autentican y se realizan de forma segura.

Además, todas tus transacciones cuentan con la herramienta automatizada Decision Manager (DM) del motor de gestión de riesgos y prevención de fraude de Cybersource (A Visa Solution).

¿Cómo funciona?

El proceso de pago con QR en Perú consta de cuatro etapas principales:

  1. Selección de método. El cliente elige pagar con QR en tu sitio web o aplicación.
  2. Generación del QR. ProntoPaga le entrega un QR único al cliente, el cual podrá escanear con la aplicación de la wallet con la que pagará.
  3. Pago en aplicación. El cliente abre la aplicación de su wallet, escanea el código QR y hace el pago. El dinero se mueve desde la wallet del cliente hacia la cuenta de tu comercio.
  4. Confirmación. El cliente recibe una confirmación de pago exitoso en su correo electrónico. A su vez, tu comercio recibe la confirmación del pago a través de los webhooks que hayas configurado.

Crea un nuevo pago (estándar)

Tu front-end será el encargado de recopilar los datos necesarios de tu cliente para procesar el pago, mientras que tu back-end estará integrado con nuestra API, procesando el pago.

De este modo, para crear una solicitud de nuevo pago deberás usar este endpoint y colocar pe_qr_payment como método de pago en el body de la solicitud.

La solicitud se envía con tu bearer token, así como con tu firma secreta. Además, debes incluir los datos necesarios del cliente para hacer el pago, como: nombre, correo electrónico, teléfono, país, moneda, monto, entre otros.

🚧

Firma de la transacción

Puedes ver el detalle de cómo firmar los parámetros de la transacción con tu secretKey en este artículo.

También deberás incluir la URL de retorno en caso de que la transacción sea exitosa, así como una URL en caso de que el pago sea rechazado.

📘

Notificación del estado de la transacción

Para configurar el webhook que irá en el campo confirmationURL y recibir notificaciones con el estado de tu transacción, revisa este artículo.

Personalización del formulario

Puedes ajustar la apariencia de tu formulario con el parámetro theme cambiando el color de fondo o creando versiones modo claro y modo oscuro.

Body de la solicitud

A continuación puedes ver un ejemplo del body que se envía en la solicitud:

{
  "currency": "PEN",
  "country": "PE",
  "amount": 100,
  "clientName": "John Doe",
  "clientEmail": "[email protected]",
  "clientPhone": "999999999",
  "clientDocument": "12345678912",
  "paymentMethod": "pe_qr_payment",
  "urlConfirmation": "Webhook",
  "urlFinal": "example.com/successful",
  "urlRejected": "example.com/declined",
  "order": "1234",
  "theme": "[{\"bgColor\": \"transparent\", \"mode\": \"dark\"}]",
  "sign": "Signature of the parameters"
}

Respuesta

Como respuesta a una solicitud de pago exitosa, recibirás un enlace para procesar el pago, así como un identificador de pago del sistema.

Confirmación de un pago

Una vez que el usuario haya completado el proceso de pago en el formulario, ProntoPaga le mostrará una ventana con el resultado final de su transacción. Al mismo tiempo, devolverá los datos de la transacción a la URL que especificaste en urlConfirmation.

Para confirmar si una transacción fue exitosa, debes verificar que en tu webhook el valor del campo status sea success.

Conoce todos los estados posibles de un pago en el siguiente enlace: Estados de los pay ins.

Cancelar un pago con QR

Si un cliente generó un QR y le tomó captura de pantalla, pero no realizó el pago al momento, puedes cancelar ese QR para evitar que el cliente intente pagar más tarde con la imagen del QR.

Para cancelarlo, deberás consultar este endpoint con tu Bearer Token y mandar el uid del pago en la URL de la solicitud.

Crea un nuevo pago (recibe directamente el QR)

En esta modalidad, al hacer una solicitud de pago y mandar dentro del "theme" el parámetro "type": "qr", los comercios recibirán en la respuesta de la solicitud el código QR, el cual podrán presentar directamente en su página web o aplicación, dentro de una etiqueta IMG.

De este modo, para crear una solicitud de nuevo pago con este formato, deberás usar este endpoint y colocar pe_qr_payment como método de pago en el body de la solicitud.

La solicitud se envía con tu bearer token, así como con tu firma secreta. Además, debes incluir los datos necesarios del cliente para hacer el pago, como: nombre, correo electrónico, teléfono, país, moneda, monto, entre otros.

🚧

Firma de la transacción

Puedes ver el detalle de cómo firmar los parámetros de la transacción con tu secretKey en este artículo.

También deberás incluir la URL de retorno en caso de que la transacción sea exitosa, así como una URL en caso de que el pago sea rechazado.

📘

Notificación del estado de la transacción

Para configurar el webhook que irá en el campo confirmationURL y recibir notificaciones con el estado de tu transacción, revisa este artículo.

Solicitar el QR

Para recibir el código QR en la respuesta, deberás usar el parámetro de personalización "theme" y mandar el parámetro "type": "qr", tal como se muestra en el ejemplo del body de la solicitud.

Body de la solicitud

A continuación puedes ver un ejemplo del body que se envía en la solicitud:

{
  "currency": "PEN",
  "country": "PE",
  "amount": 100,
  "clientName": "John Doe",
  "clientEmail": "[email protected]",
  "clientPhone": "999999999",
  "clientDocument": "12345678912",
  "paymentMethod": "pe_qr_payment",
  "urlConfirmation": "https://www.webhook.com",
  "urlFinal": "example.com/successful",
  "urlRejected": "example.com/declined",
  "order": "12345678",
  "theme": "{\"type\":\"qr\"}",
  "sign": "Signature of the parameters"
}

Respuesta

Como respuesta a una solicitud de pago exitosa recibirás el enlace para procesar el pago, un identificador de pago del sistema y el código QR, el cual podrás insertar directamente en tu página web o aplicación, usando una etiqueta IMG.

Ejemplo de respuesta para pago exitoso

{
    "urlPay": "https://prontopaga.com/payment/rest/01JRAZYTH4A55JB5R9GQ",
    "uid": "01JRAZYTH4A55JB59GQ",
    "reference": "1743461",
    "height": {
        "desktop": {
            "width": "500px",
            "height": "730px"
        },
        "mobile": {
            "width": "100%",
            "height": "730px"
        }
    },
    "qrCode": "data:image/png;base64,code"
}

Confirmación de un pago

Una vez que el usuario haya completado el proceso de pago en el formulario, ProntoPaga le mostrará una ventana con el resultado final de su transacción. Al mismo tiempo, devolverá los datos de la transacción a la URL que especificaste en urlConfirmation.

Para confirmar si una transacción fue exitosa, debes verificar que en tu webhook el valor del campo status sea success.

Conoce todos los estados posibles de un pago en el siguiente enlace: Estados de los pay ins.

Cancelar un pago con QR

Si un cliente generó un QR y le tomó captura de pantalla, pero no realizó el pago al momento, puedes cancelar ese QR para evitar que el cliente intente pagar más tarde con la imagen del QR.

Para cancelarlo, deberás consultar este endpoint con tu Bearer Token y mandar el uid del pago en la URL de la solicitud.

Listado de wallets

Este es un listado de las wallets disponibles para hacer pagos con QR en Perú:

  • Yape
  • Plin
  • OhPay
  • Bim
  • Ligo
  • Edenred
  • Caja Arequipa
  • Tebca
  • Diners Club
  • Wayki
  • F Efectiva
  • Walli
  • Billetera W
  • Prex
  • Panda
  • Maximo
  • Global 66
  • B89
  • Inspira
  • Interbank
  • Banbif
  • IzipayYa (Tunki)

Prueba tu integración

Contamos con un catálogo de datos de prueba que puedes usar para comprobar que tu integración está lista, así como para ver el flujo de pago que seguirá tu cliente. Además, también puedes hacer pruebas con nuestros demos.

Antes de finalizar tu integración

Estos son algunos puntos importantes a tomar en cuenta, antes de finalizar tu integración con nosotros:

  • No almacenar datos sensibles del cliente en tu base de datos.
  • Enviar todos los datos requeridos en el body request del endpoint de creación de pago.
  • Agregar los logotipos de los diferentes métodos de pago de ProntoPaga a tu front-end. Puedes descargarlos aquí.

Updated 13 days ago