Intégration de Moneris Checkout avec JavaScript : gestion des problèmes de réponse JSON

Intégration transparente de Moneris Checkout : dépannage de la réponse JSON

Moneris Checkout est un système de passerelle de paiement couramment utilisé qui aide les entreprises à accélérer les transactions en ligne. Cependant, son intégration dans votre site Web peut s'avérer difficile, en particulier lorsque les données requises, telles qu'un numéro de ticket, ne sont pas renvoyées par un appel JSON. De telles erreurs peuvent entraver le flux régulier des transactions, le débogage est donc une compétence nécessaire pour les ingénieurs.

Comprendre comment configurer correctement la caisse est essentiel lors du remplacement d'une page de paiement hébergée (HPP) obsolète par Moneris et de l'utilisation de leur interface JavaScript. Pour offrir à vos clients une expérience transparente, assurez-vous que la page publie les détails de la transaction et récupère des réponses précises.

De nombreux développeurs ont du mal à suivre la documentation d'intégration de Moneris. La complexité vient de la gestion des rappels, du téléchargement des données de transaction et de la lecture des résultats en temps réel, qui sont tous nécessaires pour une intégration réussie. Lorsque vous commencez votre parcours d’intégration, disposer d’une méthodologie claire et bien documentée peut être bénéfique.

Dans cet article, nous verrons comment résoudre le problème des numéros de billet manquants dans votre intégration Moneris. Vous serez mieux préparé à résoudre ce problème si vous examinez les extraits de code et les techniques de dépannage nécessaires.

Comprendre l'intégration de Moneris Checkout et le flux de travail des scripts

Le script frontal inclus intègre le système Moneris Checkout dans un site Web via JavaScript. La fonctionnalité principale commence par l'établissement d'une instance de paiement Moneris via le monerisCheckout() constructeur. Cette instance sert d'interface entre votre site Web et le service de traitement des paiements de Moneris. La commande setMode() spécifie si l'environnement doit être défini sur « qa » pour les tests ou sur « live » pour la production, ce qui est critique pendant les étapes de développement. En sélectionnant « qa », les développeurs peuvent répliquer les transactions sans encourir de coûts réels, créant ainsi un terrain d'essai sécurisé.

Une fois l'instance de paiement créée, le setCheckoutDiv() La commande connecte le formulaire de paiement Moneris à un div HTML spécifique. C'est ici que le formulaire de paiement apparaîtra sur la page. Cela garantit que la représentation visuelle du formulaire de paiement s'affiche dans une région spécifique du site Web, rendant la procédure transparente et intégrée à votre conception existante. Dans notre exemple, le formulaire Moneris est inséré dans le div avec l'ID « monerisCheckout ». Ce div sert d'espace réservé pour le contenu chargé dynamiquement de Moneris, qui comprend des champs et des boutons de saisie des paiements des clients.

Le script s'exécute ensuite setCallback(), permettant au développeur de configurer la gestion d'événements spécifiques pour le processus de paiement. Plus précisément, le rappel pour « page_loaded » est attaché à la fonction monChargePage, garantissant que lorsque la page est entièrement chargée, des actions personnalisées supplémentaires (telles que la journalisation des données) peuvent se produire. Cette fonction permet une flexibilité dans la façon dont l'expérience utilisateur est gérée. Enregistrer le contenu du ex objet à l'intérieur monChargePage() aide les développeurs à déboguer en fournissant des commentaires en temps réel sur les données renvoyées par Moneris.

Enfin, le script back-end gère la réception des données de paiement côté serveur. En utilisant Express.js dans Node.js, la route app.post() est défini pour recevoir les demandes POST de Moneris une fois la transaction terminée. Ce point de terminaison traite le JSON renvoyé, en vérifiant le code_réponse pour voir si le paiement a réussi. En cas de succès, les données de transaction (telles que le numéro du ticket) peuvent être enregistrées ou saisies dans une base de données. En renvoyant des codes d'état et des messages appropriés, le backend permet une connexion fluide avec le frontend, fournissant des informations critiques à l'utilisateur, par exemple si la transaction a réussi ou échoué.

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

Améliorer l'intégration de Moneris Checkout avec des options de personnalisation

Lorsqu'ils travaillent avec l'intégration de Moneris Checkout, les développeurs recherchent fréquemment des méthodes permettant de personnaliser le processus de paiement afin d'améliorer l'expérience utilisateur. Le formulaire de paiement Composants de l'interface utilisateur peut être personnalisé, ce qui est une fonction moins connue. Moneris permet aux entreprises de personnaliser l'apparence et la mise en page de la page de paiement, leur permettant ainsi de l'aligner sur leur image de marque. Cela implique de modifier la disposition des boutons, les champs de formulaire et même la formulation pour faciliter le processus pour les utilisateurs finaux et augmenter les conversions.

Un autre facteur à examiner est le recours à des types de transactions autres que les paiements de base. Moneris dispose de fonctionnalités telles que la préautorisation, dans laquelle le montant de la transaction est stocké sur la carte mais n'est pas facturé immédiatement. Cette fonctionnalité est particulièrement importante dans des domaines tels que les hôtels et la location de voitures, où les tarifs finaux peuvent différer. L'intégration peut gérer de nombreux types de transactions en utilisant le même API, ce qui le rend polyvalent pour divers cas d'utilisation.

La sécurité est une priorité absolue dans toute intégration de paiement, et Moneris Checkout intègre des technologies telles que la tokenisation et la prévention de la fraude. La tokenisation remplace les informations sensibles de la carte par un jeton, de sorte que les données des consommateurs ne soient jamais exposées sur vos systèmes. La mise en œuvre de mesures de sécurité, telles que des technologies de détection des fraudes et la conformité PCI DSS, peut réduire considérablement les risques liés aux transactions en ligne.