Integración de Moneris Checkout con JavaScript: manejo de problemas de respuesta JSON

Integración perfecta de Moneris Checkout: solución de problemas de respuesta JSON

Moneris Checkout es un sistema de pasarela de pago de uso común que ayuda a las empresas a agilizar las transacciones en línea. Sin embargo, integrarlo en su sitio web puede resultar difícil, especialmente cuando los datos requeridos, como el número de ticket, no se devuelven desde una llamada JSON. Estos errores pueden impedir el flujo regular de transacciones, por lo que la depuración es una habilidad necesaria para los ingenieros.

Comprender cómo configurar correctamente el proceso de pago es fundamental al reemplazar una página de pago alojada (HPP) obsoleta con Moneris y utilizar su interfaz JavaScript. Para brindarles a sus clientes una experiencia perfecta, asegúrese de que la página publique los detalles de la transacción y obtenga respuestas precisas.

Muchos desarrolladores tienen problemas para seguir la documentación de integración de Moneris. La complejidad surge del manejo de devoluciones de llamadas, la carga de datos de transacciones y la lectura de resultados en tiempo real, todo lo cual es necesario para una integración exitosa. Al comenzar su viaje de integración, puede resultar beneficioso contar con una metodología clara y bien documentada.

En esta publicación, veremos cómo resolver el problema de los números de ticket faltantes en su integración de Moneris. Estará mejor preparado para lidiar con este problema si revisa los fragmentos de código y las técnicas de solución de problemas necesarios.

Comprender la integración de Moneris Checkout y el flujo de trabajo de secuencias de comandos

El script de interfaz de usuario incluido integra el sistema Moneris Checkout en un sitio web a través de JavaScript. La funcionalidad principal comienza con el establecimiento de una instancia del pago de Moneris a través del monerisRealizar pago() constructor. Esta instancia sirve como interfaz entre su sitio web y el servicio de procesamiento de pagos de Moneris. el comando establecerModo() especifica si el entorno debe configurarse en "qa" para pruebas o "en vivo" para producción, lo cual es fundamental durante las etapas de desarrollo. Al seleccionar "qa", los desarrolladores pueden replicar transacciones sin incurrir en costos reales, creando un campo de pruebas seguro.

Una vez creada la instancia de pago, el setCheckoutDiv() El comando conecta el formulario de pago de Moneris a un div HTML específico. Aquí es donde aparecerá el formulario de pago en la página. Esto garantiza que la representación visual del formulario de pago se muestre en una región específica del sitio web, lo que hace que el procedimiento sea fluido e integrado en su diseño existente. En nuestro ejemplo, el formulario Moneris se inserta en el div con el ID "monerisCheckout". Este div sirve como marcador de posición para el contenido cargado dinámicamente de Moneris, que incluye botones y campos de entrada de pago del cliente.

El script luego se ejecuta establecerDevolución de llamada(), lo que permite al desarrollador configurar el manejo de eventos específicos para el proceso de pago. Específicamente, la devolución de llamada para "page_loaded" está adjunta a la función carga de mi página, lo que garantiza que cuando la página esté completamente cargada, pueden ocurrir acciones personalizadas adicionales (como el registro de datos). Esta función permite flexibilidad en cómo se maneja la experiencia del usuario. Registro del contenido del ex objeto dentro miPáginaCarga() ayuda a los desarrolladores en la depuración proporcionando comentarios en tiempo real sobre los datos que devuelve Moneris.

Finalmente, el script de back-end maneja la recepción de datos de pago en el lado del servidor. Usando expreso.js en Node.js, la ruta aplicación.post() está definido para recibir solicitudes POST de Moneris una vez que se completa la transacción. Este punto final procesa el JSON devuelto, verificando el código_respuesta para ver si el pago fue exitoso. Si tiene éxito, los datos de la transacción (como el número de boleto) se pueden registrar o ingresar en una base de datos. Al devolver códigos de estado y mensajes adecuados, el backend permite una conexión fluida con el frontend, proporcionando información crítica al usuario, como si la transacción fue exitosa o fallida.

// Front-end integration script
// This script embeds the Moneris checkout and processes the transaction result

<script src="https://gatewayt.moneris.com/chktv2/js/chkt_v2.00.js"></script>
<div id="monerisCheckout"></div>
<script>
var myCheckout = new monerisCheckout();
myCheckout.setMode("qa"); // Set environment to QA
myCheckout.setCheckoutDiv("monerisCheckout"); // Define div for checkout
// Add callback for when the page is fully loaded
myCheckout.setCallback("page_loaded", myPageLoad);
// Start the checkout process
myCheckout.startCheckout("");

// Function that gets triggered when the page is loaded
function myPageLoad(ex) {
    console.log("Checkout page loaded", ex);
}

// Function to handle the receipt after the payment
function myPaymentReceipt(ex) {
    if(ex.response_code === '00') {
        alert("Transaction Successful: " + ex.ticket);
    } else {
        alert("Transaction Failed: " + ex.message);
    }
}
</script>

// Node.js backend script for processing payment receipt data
// This backend handles the response from Moneris and processes it for database storage

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// Endpoint to receive the payment result
app.post('/payment-receipt', (req, res) => {
    const paymentData = req.body;

    if (paymentData.response_code === '00') {
        console.log('Payment successful:', paymentData.ticket);
        // Insert into database or further process the payment
        res.status(200).send('Payment success');
    } else {
        console.error('Payment failed:', paymentData.message);
        res.status(400).send('Payment failed');
    }
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

// Unit test for the Node.js backend using Mocha and Chai
// This test checks if the backend properly handles successful and failed transactions

const chai = require('chai');
const chaiHttp = require('chai-http');
const app = require('../app'); 
const expect = chai.expect;
chai.use(chaiHttp);

describe('POST /payment-receipt', () => {
    it('should return 200 for successful payment', (done) => {
        chai.request(app)
            .post('/payment-receipt')
            .send({ response_code: '00', ticket: '123456' })
            .end((err, res) => {
                expect(res).to.have.status(200);
                expect(res.text).to.equal('Payment success');
                done();
            });
    });

    it('should return 400 for failed payment', (done) => {
        chai.request(app)
            .post('/payment-receipt')
            .send({ response_code: '01', message: 'Transaction Declined' })
            .end((err, res) => {
                expect(res).to.have.status(400);
                expect(res.text).to.equal('Payment failed');
                done();
            });
    });
});

Mejora de la integración de Moneris Checkout con opciones de personalización

Cuando trabajan con la integración de Moneris Checkout, los desarrolladores frecuentemente buscan métodos para personalizar el proceso de pago para mejorar la experiencia del usuario. El formulario de pago Componentes de la interfaz de usuario Se puede personalizar, que es una función menos conocida. Moneris permite a las empresas personalizar la apariencia y el diseño de la página de pago, permitiéndoles alinearla con su marca. Esto implica modificar el diseño de los botones, los campos del formulario e incluso la redacción para facilitar el proceso a los usuarios finales y aumentar las conversiones.

Otro factor a examinar es el uso de tipos de transacciones distintos de los pagos básicos. Moneris tiene capacidades como la autorización previa, en la que el monto de una transacción se almacena en la tarjeta pero no se carga inmediatamente. Esta funcionalidad es especialmente importante en áreas como hoteles y alquiler de automóviles, donde las tarifas finales pueden diferir. La integración puede manejar muchos tipos de transacciones usando el mismo API, lo que lo hace versátil para diversos casos de uso.

La seguridad es una prioridad absoluta en cualquier integración de pagos y Moneris Checkout incorpora tecnologías como tokenización y prevención de fraude. La tokenización sustituye la información confidencial de la tarjeta por un token, por lo que los datos del consumidor nunca quedan expuestos en sus sistemas. La implementación de medidas de seguridad, como tecnologías de detección de fraude y cumplimiento de PCI DSS, puede reducir drásticamente los riesgos relacionados con las transacciones en línea.