Integration von Moneris Checkout mit JavaScript: Umgang mit JSON-Antwortproblemen

Nahtlose Integration von Moneris Checkout: Fehlerbehebung bei der JSON-Antwort

Moneris Checkout ist ein häufig verwendetes Zahlungs-Gateway-System, das Unternehmen dabei hilft, Online-Transaktionen zu beschleunigen. Die Integration in Ihre Website kann jedoch schwierig sein, insbesondere wenn erforderliche Daten, wie z. B. eine Ticketnummer, nicht von einem JSON-Aufruf zurückgegeben werden. Solche Fehler können den regulären Transaktionsfluss behindern, daher ist das Debuggen eine notwendige Fähigkeit für Ingenieure.

Wenn Sie eine veraltete Hosted Payment Page (HPP) durch Moneris ersetzen und deren JavaScript-Schnittstelle verwenden, ist es wichtig zu verstehen, wie der Checkout richtig konfiguriert wird. Um Ihren Kunden ein nahtloses Erlebnis zu bieten, stellen Sie sicher, dass die Seite Transaktionsdetails veröffentlicht und genaue Antworten abruft.

Viele Entwickler haben Schwierigkeiten, der Integrationsdokumentation von Moneris zu folgen. Die Komplexität ergibt sich aus der Bearbeitung von Rückrufen, dem Hochladen von Transaktionsdaten und dem Lesen von Ergebnissen in Echtzeit, die alle für eine erfolgreiche Integration erforderlich sind. Zu Beginn Ihrer Integrationsreise kann es von Vorteil sein, über eine klare und gut dokumentierte Methodik zu verfügen.

In diesem Beitrag schauen wir uns an, wie Sie das Problem fehlender Ticketnummern in Ihrer Moneris-Integration lösen können. Sie sind besser auf die Bewältigung dieses Problems vorbereitet, wenn Sie sich die erforderlichen Codeausschnitte und Fehlerbehebungstechniken ansehen.

Verstehen der Moneris Checkout-Integration und des Skript-Workflows

Das enthaltene Frontend-Skript integriert das Moneris Checkout-System per JavaScript in eine Website. Die Hauptfunktion beginnt mit der Einrichtung einer Instanz des Moneris-Checkouts über die monerisCheckout() Konstrukteur. Diese Instanz dient als Schnittstelle zwischen Ihrer Website und dem Zahlungsabwicklungsdienst von Moneris. Der Befehl setMode() Gibt an, ob die Umgebung zum Testen auf „qa“ oder für die Produktion auf „live“ gesetzt werden soll, was während der Entwicklungsphase von entscheidender Bedeutung ist. Durch die Auswahl von „qa“ können Entwickler Transaktionen replizieren, ohne dass reale Kosten anfallen, und so ein sicheres Testgelände schaffen.

Sobald die Checkout-Instanz erstellt ist, wird die setCheckoutDiv() Der Befehl verbindet das Moneris-Checkout-Formular mit einem bestimmten HTML-Div. Hier erscheint das Zahlungsformular auf der Seite. Dadurch wird gewährleistet, dass die visuelle Darstellung des Zahlungsformulars in einem bestimmten Bereich der Website angezeigt wird, wodurch der Vorgang nahtlos und in Ihr bestehendes Design integriert wird. In unserem Beispiel wird das Moneris-Formular mit der ID „monerisCheckout“ in das Div eingefügt. Dieses Div dient als Platzhalter für den dynamisch geladenen Inhalt von Moneris, der Eingabefelder und Schaltflächen für Kundenzahlungen enthält.

Das Skript wird dann ausgeführt setCallback(), sodass der Entwickler eine spezifische Ereignisbehandlung für den Checkout-Prozess konfigurieren kann. Insbesondere ist der Rückruf für „page_loaded“ an die Funktion angehängt myPageLoadDies stellt sicher, dass zusätzliche benutzerdefinierte Aktionen (z. B. Protokollierung von Daten) ausgeführt werden können, wenn die Seite vollständig geladen ist. Diese Funktion ermöglicht Flexibilität bei der Handhabung der Benutzererfahrung. Protokollierung des Inhalts der ex Objekt im Inneren myPageLoad() unterstützt Entwickler beim Debuggen, indem es Echtzeit-Feedback zu den von Moneris zurückgegebenen Daten liefert.

Schließlich übernimmt das Backend-Skript den serverseitigen Empfang der Zahlungsdaten. Benutzen Express.js in Node.js die Route app.post() ist so definiert, dass es POST-Anfragen von Moneris empfängt, sobald die Transaktion abgeschlossen ist. Dieser Endpunkt verarbeitet den zurückgegebenen JSON und überprüft ihn Antwortcode um zu sehen, ob die Zahlung erfolgreich war. Im Erfolgsfall können die Transaktionsdaten (z. B. die Ticketnummer) protokolliert oder in eine Datenbank eingegeben werden. Durch die Rückgabe geeigneter Statuscodes und Meldungen ermöglicht das Backend eine reibungslose Verbindung mit dem Frontend und liefert dem Benutzer wichtige Rückmeldungen, beispielsweise ob die Transaktion erfolgreich war oder fehlgeschlagen ist.

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

Verbesserung der Moneris Checkout-Integration mit Anpassungsoptionen

Bei der Arbeit mit der Moneris Checkout-Integration suchen Entwickler häufig nach Methoden zur Personalisierung des Checkout-Prozesses, um das Benutzererlebnis zu verbessern. Das Checkout-Formular UI-Komponenten kann angepasst werden, was eine weniger bekannte Funktion ist. Moneris ermöglicht es Unternehmen, das Erscheinungsbild und Layout der Checkout-Seite anzupassen und sie so an ihr Branding anzupassen. Dazu gehört die Änderung von Schaltflächenlayouts, Formularfeldern und sogar der Formulierung, um den Prozess für Endbenutzer einfacher zu gestalten und die Conversions zu steigern.

Ein weiterer zu untersuchender Faktor ist die Verwendung anderer Transaktionsarten als Basiszahlungen. Moneris verfügt über Funktionen wie die Vorautorisierung, bei der ein Transaktionsbetrag auf der Karte gespeichert, aber nicht sofort belastet wird. Diese Funktionalität ist besonders wichtig in Bereichen wie Hotels und Autovermietungen, wo die Endpreise unterschiedlich sein können. Die Integration kann viele Transaktionstypen auf dieselbe Weise verarbeiten API, wodurch es für verschiedene Anwendungsfälle vielseitig einsetzbar ist.

Sicherheit hat bei jeder Zahlungsintegration oberste Priorität und Moneris Checkout umfasst Technologien wie Tokenisierung und Betrugsprävention. Durch die Tokenisierung werden vertrauliche Karteninformationen durch einen Token ersetzt, sodass Verbraucherdaten niemals auf Ihren Systemen offengelegt werden. Durch die Implementierung von Sicherheitsmaßnahmen wie Betrugserkennungstechnologien und PCI-DSS-Konformität können die mit Online-Transaktionen verbundenen Risiken drastisch reduziert werden.