Integrando Moneris Checkout com JavaScript: Lidando com Problemas de Resposta JSON

Integração perfeita do Moneris Checkout: solução de problemas de resposta JSON

Moneris Checkout é um sistema de gateway de pagamento comumente usado que ajuda as empresas a agilizar as transações online. No entanto, integrá-lo ao seu site pode ser difícil, especialmente quando os dados necessários, como o número do ticket, não são retornados por uma chamada JSON. Tais erros podem impedir o fluxo regular de transações, portanto a depuração é uma habilidade necessária para engenheiros.

Compreender como configurar corretamente o checkout é fundamental ao substituir uma Hosted Payment Page (HPP) desatualizada por Moneris e usar sua interface JavaScript. Para fornecer aos seus clientes uma experiência perfeita, certifique-se de que a página publique detalhes da transação e recupere respostas precisas.

Muitos desenvolvedores têm dificuldade em seguir a documentação de integração do Moneris. A complexidade decorre do tratamento de retornos de chamada, do upload de dados de transações e da leitura de resultados em tempo real, todos necessários para uma integração bem-sucedida. Ao iniciar sua jornada de integração, pode ser benéfico ter uma metodologia clara e bem documentada.

Neste post, veremos como resolver o problema de falta de números de tickets em sua integração Moneris. Você estará mais bem preparado para lidar com esse problema se revisar os trechos de código e as técnicas de solução de problemas necessários.

Compreendendo a integração do Moneris Checkout e o fluxo de trabalho de script

O script front-end incluído integra o sistema Moneris Checkout em um site via JavaScript. A funcionalidade principal começa com o estabelecimento de uma instância do checkout Moneris através do monerisCheckout() construtor. Esta instância serve como interface entre o seu site e o serviço de processamento de pagamentos da Moneris. O comando setMode() especifica se o ambiente deve ser definido como "qa" para teste ou "live" para produção, o que é crítico durante os estágios de desenvolvimento. Ao selecionar “qa”, os desenvolvedores podem replicar transações sem incorrer em custos reais, criando um campo de testes seguro.

Depois que a instância de checkout for construída, o setCheckoutDiv() O comando conecta o formulário de checkout do Moneris a uma div HTML específica. É aqui que o formulário de pagamento aparecerá na página. Isso garante que a representação visual do formulário de pagamento apareça em uma região específica do site, tornando o procedimento simples e integrado ao design existente. No nosso exemplo, o formulário Moneris é inserido na div com o ID “monerisCheckout”. Este div serve como espaço reservado para o conteúdo carregado dinamicamente do Moneris, que inclui campos e botões de entrada de pagamento do cliente.

O script então executa setCallback(), permitindo que o desenvolvedor configure o tratamento de eventos específico para o processo de checkout. Especificamente, o retorno de chamada para "page_loaded" está anexado à função myPageLoad, garantindo que quando a página estiver totalmente carregada, ações personalizadas extras (como registro de dados) possam ocorrer. Esta função permite flexibilidade na forma como a experiência do usuário é tratada. Registrando o conteúdo do ex objeto dentro minhaPageLoad() auxilia os desenvolvedores na depuração, fornecendo feedback em tempo real sobre os dados retornados pelo Moneris.

Por fim, o script de back-end lida com o recebimento de dados de pagamento no servidor. Usando Expresso.js em Node.js, a rota aplicativo.post() está definido para receber solicitações POST do Moneris assim que a transação for concluída. Este endpoint processa o JSON retornado, verificando o código_resposta para ver se o pagamento foi bem-sucedido. Se for bem-sucedido, os dados da transação (como o número do bilhete) poderão ser registrados ou inseridos em um banco de dados. Ao retornar mensagens e códigos de status adequados, o backend permite uma conexão tranquila com o frontend, fornecendo feedback crítico ao usuário, como se a transação foi bem-sucedida ou falhou.

// 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();
            });
    });
});

Aprimorando a integração do Moneris Checkout com opções de personalização

Ao trabalhar com a integração Moneris Checkout, os desenvolvedores frequentemente procuram métodos para personalizar o processo de checkout para melhorar a experiência do usuário. O formulário de checkout Componentes da IU pode ser personalizado, que é uma função menos conhecida. Moneris permite que as empresas personalizem a aparência e o layout da página de checkout, permitindo-lhes alinhá-la com sua marca. Isso envolve modificar layouts de botões, campos de formulário e até mesmo o texto para tornar o processo mais fácil para os usuários finais e aumentar as conversões.

Outro factor a examinar é a utilização de outros tipos de transacções para além dos pagamentos básicos. Moneris possui recursos como pré-autorização, em que o valor da transação é armazenado no cartão, mas não é cobrado imediatamente. Esta funcionalidade é especialmente importante em áreas como hotéis e aluguer de automóveis, onde as tarifas finais podem ser diferentes. A integração pode lidar com muitos tipos de transações usando o mesmo API, tornando-o versátil para vários casos de uso.

A segurança é uma prioridade máxima em qualquer integração de pagamento e o Moneris Checkout incorpora tecnologias como tokenização e prevenção de fraudes. A tokenização substitui informações confidenciais do cartão por um token, para que os dados do consumidor nunca sejam expostos em seus sistemas. A implementação de medidas de segurança, como tecnologias de detecção de fraude e conformidade com PCI DSS, pode reduzir drasticamente os riscos associados às transações online.