Pagos con Qropay
En la presente guía se muestra cómo generar códigos QR, desde el API de Openpay, con los cuales tus clientes podrán realizar pagos desde una aplicación móvil.
Nota: Mediante el uso de este método de pago podrás recibir una notificación instantes despues de que tu cliente realice el pago.
Flujo para realizar cargos con Qropay
Pasos:
- Al realizar una compra desde tu sitio web se muestran los distintos medios de pago, entre ellos se ofrece pagar por medio de Qropay.
- El cliente selecciona Qropay como medio de pago.
- Desde tu servidor se lanza una petición al API de Openpay para crear un cargo pendiente.
- Nuestro servidor creará el cargo pendiente y responderá con los datos del mismo junto con una URL del código QR en formato PNG.
- Openpay ofrece un documento HTML que puede ser incrustado en tu sitio web para monitorear el estatus del cargo con este medio de pago.
- El cliente realiza el pago desde la aplicación móvil para Qropay.
- Openpay valida y recibe el pago
- Openpay notifica la recepción del pago a tu servidor
Nota: El código QR estará disponible mientras no se exceda su tiempo de expiración. Para el paso número 8 consulta la sección de notificaciones
Crear cargo Pendiente
Para poder recibir un pago desde un dispositivo móvil con un código QR es necesario realizar una llamada a nuestra API indicando en el campo
method
el tipo qropay
de la siguiente manera:
curl -u sk_e568c42a6c384b7ab02cd47d2e407cab \
-H "Content-type: application/json" \
-X POST -d '{
"method" : "qropay",
"amount" : 949.00,
"description" : "Cargo qropay"
}' https://sandbox-api.openpay.mx/v1/mzdtln0bmtms6o3kck8f/charges
Si la petición es correcta recibirás una respuesta con la información del cargo pendiente generado. La respuesta incluye una URL de la imagen PNG del código QR.
Respuesta:
{
"id": "trfu5m6xzn6hiyn9jkzm",
"authorization": null,
"operation_type": "in",
"method": "qropay",
"transaction_type": "charge",
"status": "charge_pending",
"conciliated": false,
"creation_date": "2018-04-25T18:45:16-05:00",
"operation_date": "2018-04-25T18:45:16-05:00",
"description": "Cargo qropay",
"error_message": null,
"order_id": null,
"due_date": "2018-04-26T23:59:59-05:00",
"payment_method": {
"type": "qropay",
"qr_code": "https://sandbox-api.openpay.mx/qropay/mc2mzbvwpmnps8q0on6q/trfu5m6xzn6hiyn9jkzm/qrcode"
},
"amount": 949,
"currency": "MXN",
"fee": {
"amount": 11.49,
"tax": 0,
"currency": "MXN"
}
}
Sandbox: Openpay ofrece un simulador de pagos para Qropay
Producción: La notificación de pago se realiza en tiempo real, es decir en el momento que tu cliente realice el pago podrás recibir un Webhook y el saldo en tu cuenta se verá incrementado.
Estado del pago
Openpay ofrece la librería JavaScript https://js.openpay.mx/openpay-qropay.v1.js
para insertar un documento HTML con el estatus del cargo con código QR vía una etiqueta iframe
. Para usarla simplemente deberás importarla a tu sitio web.
Hecho lo anterior podrás insertar en el body
una etiqueta div
en la cual se insertará un iframe
que mostrará un documento HTML con el estatus del cargo.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
...
<script type="text/javascript" src="https://js.openpay.mx/openpay-qropay.v1.js"></script>
...
<script type="text/javascript">
//merchantId = Tu id de comerciante
//transactionId = Valor del campo id del objeto transacción regresado al crearse el cargo pendiente
function showIframeQR(merchantId, transactionId) {
QroPay.setSandboxMode(true); // Omitir línea si se desea lanzar la petición al ambiente productivo de Openpay
QroPay.setupIframe("iframeQR", merchantId, transactionId);
}
</script>
</head>
<body>
...
<div id="iframeQR" />
...
</body>
</html>
Sandbox:
QroPay.setSandboxMode(true);
Se usa para lanzar la petición al ambiente de pruebas de Openpay, debe colocarse antes de lanzar el métodoQroPay.setupIframe