Integrazione di Moneris Checkout con JavaScript: gestione dei problemi di risposta JSON

Perfetta integrazione di Moneris Checkout: risoluzione dei problemi della risposta JSON

Moneris Checkout è un sistema gateway di pagamento comunemente utilizzato che aiuta le aziende ad accelerare le transazioni online. Tuttavia, integrarlo nel tuo sito web potrebbe essere difficile, soprattutto quando i dati richiesti, come il numero del biglietto, non vengono restituiti da una chiamata JSON. Tali errori possono impedire il regolare flusso delle transazioni, quindi il debug è una competenza necessaria per gli ingegneri.

Capire come configurare correttamente il checkout è fondamentale quando si sostituisce una pagina di pagamento ospitata (HPP) obsoleta con Moneris e si utilizza la loro interfaccia JavaScript. Per offrire ai tuoi clienti un'esperienza fluida, assicurati che la pagina pubblichi i dettagli della transazione e recuperi risposte accurate.

Molti sviluppatori hanno difficoltà a seguire la documentazione di integrazione di Moneris. La complessità deriva dalla gestione delle richiamate, dal caricamento dei dati delle transazioni e dalla lettura dei risultati in tempo reale, tutti elementi necessari per un'integrazione di successo. Quando inizi il tuo percorso di integrazione, avere una metodologia chiara e ben documentata potrebbe essere utile.

In questo post, vedremo come risolvere il problema dei numeri dei biglietti mancanti nella tua integrazione Moneris. Sarai meglio preparato ad affrontare questo problema se esamini i frammenti di codice necessari e le tecniche di risoluzione dei problemi.

Comprendere l'integrazione di Moneris Checkout e il flusso di lavoro degli script

Lo script front-end incluso integra il sistema Moneris Checkout in un sito web tramite JavaScript. La funzionalità principale inizia con la creazione di un'istanza del pagamento Moneris tramite il file denarorisCheckout() costruttore. Questa istanza funge da interfaccia tra il tuo sito web e il servizio di elaborazione dei pagamenti di Moneris. Il comando setMode() specifica se l'ambiente deve essere impostato su "qa" per i test o "live" per la produzione, che è fondamentale durante le fasi di sviluppo. Selezionando "qa", gli sviluppatori possono replicare le transazioni senza incorrere in costi reali, creando un banco di prova sicuro.

Una volta creata l'istanza di checkout, il file setCheckoutDiv() Il comando collega il modulo di pagamento Moneris a uno specifico div HTML. Qui è dove apparirà il modulo di pagamento sulla pagina. Ciò garantisce che la rappresentazione visiva del modulo di pagamento venga visualizzata in un'area specifica del sito Web, rendendo la procedura fluida e integrata nel design esistente. Nel nostro esempio, il modulo Moneris viene inserito nel div con l'ID "monerisCheckout". Questo div funge da segnaposto per il contenuto caricato dinamicamente di Moneris, che include campi e pulsanti di input del pagamento del cliente.

Lo script viene quindi eseguito setCallback(), consentendo allo sviluppatore di configurare la gestione di eventi specifici per il processo di pagamento. Nello specifico, il callback per "page_loaded" è allegato alla funzione myPageLoad, garantendo che quando la pagina è completamente caricata, possano verificarsi azioni personalizzate aggiuntive (come la registrazione dei dati). Questa funzione consente flessibilità nel modo in cui viene gestita l'esperienza dell'utente. Registrazione del contenuto del file ex oggetto all'interno myPageLoad() assiste gli sviluppatori nel debug fornendo feedback in tempo reale sui dati restituiti da Moneris.

Infine, lo script back-end gestisce la ricezione lato server dei dati di pagamento. Utilizzando Express.js in Node.js, il percorso app.post() è definito per ricevere richieste POST da Moneris una volta completata la transazione. Questo endpoint elabora il JSON restituito, controllando il file codice_risposta per vedere se il pagamento è andato a buon fine. In caso di successo, i dati della transazione (come il numero del biglietto) possono essere registrati o inseriti in un database. Restituendo codici di stato e messaggi adeguati, il backend consente una connessione fluida con il frontend, fornendo feedback critici all'utente, ad esempio se la transazione è riuscita o meno.

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

Miglioramento dell'integrazione di Moneris Checkout con opzioni di personalizzazione

Quando lavorano con l'integrazione di Moneris Checkout, gli sviluppatori cercano spesso metodi per personalizzare il processo di pagamento per migliorare l'esperienza dell'utente. Il modulo di pagamento Componenti dell'interfaccia utente può essere personalizzato, che è una funzione meno conosciuta. Moneris consente alle aziende di personalizzare l'aspetto e il layout della pagina di pagamento, consentendo loro di allinearla al proprio marchio. Ciò comporta la modifica del layout dei pulsanti, dei campi del modulo e persino del testo per rendere il processo più semplice per gli utenti finali e aumentare le conversioni.

Un altro fattore da esaminare è l’utilizzo di tipologie di transazione diverse dai pagamenti di base. Moneris ha funzionalità come la pre-autorizzazione, in cui l'importo della transazione viene memorizzato sulla carta ma non addebitato immediatamente. Questa funzionalità è particolarmente importante in settori quali hotel e noleggio automobili, dove le tariffe finali possono differire. L'integrazione può gestire molti tipi di transazioni utilizzando la stessa API, rendendolo versatile per vari casi d'uso.

La sicurezza è una priorità assoluta in qualsiasi integrazione di pagamento e Moneris Checkout incorpora tecnologie come la tokenizzazione e la prevenzione delle frodi. La tokenizzazione sostituisce le informazioni sensibili della carta con un token, quindi i dati dei consumatori non vengono mai esposti sui tuoi sistemi. L’implementazione di misure di sicurezza, come le tecnologie di rilevamento delle frodi e la conformità PCI DSS, può ridurre drasticamente i rischi connessi alle transazioni online.