Mengintegrasikan Moneris Checkout dengan JavaScript: Menangani Masalah Respons JSON

Integrasi Moneris Checkout yang Mulus: Memecahkan Masalah Respons JSON

Moneris Checkout adalah sistem gateway pembayaran yang umum digunakan yang membantu bisnis mempercepat transaksi online. Namun, mengintegrasikannya ke situs web Anda mungkin sulit, terutama bila data yang diperlukan, seperti nomor tiket, tidak dikembalikan dari panggilan JSON. Kesalahan seperti itu dapat menghambat aliran transaksi reguler, jadi debugging adalah keterampilan yang diperlukan bagi para insinyur.

Memahami cara mengonfigurasi checkout dengan benar sangat penting saat mengganti Halaman Pembayaran yang Dihosting (HPP) yang sudah ketinggalan zaman dengan Moneris dan menggunakan antarmuka JavaScript-nya. Untuk memberikan pengalaman yang lancar kepada klien Anda, pastikan halaman tersebut memposting detail transaksi dan mendapatkan respons yang akurat.

Banyak pengembang mengalami kesulitan dalam mengikuti dokumentasi integrasi Moneris. Kompleksitasnya berasal dari penanganan callback, pengunggahan data transaksi, dan pembacaan hasil secara real time, yang semuanya diperlukan agar integrasi berhasil. Saat Anda memulai perjalanan integrasi, memiliki metodologi yang jelas dan terdokumentasi dengan baik mungkin bermanfaat.

Dalam postingan ini, kita akan melihat cara mengatasi masalah hilangnya nomor tiket dalam integrasi Moneris Anda. Anda akan lebih siap menghadapi masalah ini jika Anda meninjau cuplikan kode dan teknik pemecahan masalah yang diperlukan.

Memahami Integrasi Checkout Moneris dan Alur Kerja Skrip

Skrip front-end yang disertakan mengintegrasikan sistem Moneris Checkout ke situs web melalui JavaScript. Fungsi utama dimulai dengan membuat instance checkout Moneris melalui monerisCheckout() konstruktor. Mesin virtual ini berfungsi sebagai antarmuka antara situs web Anda dan layanan pemrosesan pembayaran Moneris. Perintah setMode() menentukan apakah lingkungan harus disetel ke "qa" untuk pengujian atau "hidup" untuk produksi, yang sangat penting selama tahap pengembangan. Dengan memilih "qa", pengembang dapat mereplikasi transaksi tanpa menimbulkan biaya nyata, sehingga menciptakan tempat pengujian yang aman.

Setelah instance checkout dibuat, file setCheckoutDiv() perintah menghubungkan formulir checkout Moneris ke div HTML tertentu. Di sinilah formulir pembayaran akan muncul di halaman. Hal ini menjamin bahwa gambaran visual formulir pembayaran ditampilkan di wilayah tertentu di situs web, menjadikan prosedurnya lancar dan terintegrasi ke dalam desain Anda yang sudah ada. Dalam contoh kita, formulir Moneris dimasukkan ke dalam div dengan ID "monerisCheckout." Div ini berfungsi sebagai pengganti konten Moneris yang dimuat secara dinamis, yang mencakup kolom dan tombol input pembayaran klien.

Script kemudian dijalankan setPanggilan Balik(), memungkinkan pengembang mengonfigurasi penanganan peristiwa tertentu untuk proses checkout. Secara khusus, panggilan balik untuk "page_loaded" dilampirkan ke fungsi tersebut myPageLoad, menjamin bahwa ketika halaman dimuat sepenuhnya, tindakan khusus tambahan (seperti mencatat data) dapat terjadi. Fungsi ini memberikan fleksibilitas dalam cara menangani pengalaman pengguna. Mencatat isi dari mantan objek di dalamnya beban halaman saya() membantu pengembang dalam melakukan debug dengan memberikan umpan balik real-time pada data yang dikembalikan Moneris.

Terakhir, skrip back-end menangani penerimaan data pembayaran di sisi server. Menggunakan Ekspres.js di Node.js, rutenya aplikasi.post() didefinisikan untuk menerima permintaan POST dari Moneris setelah transaksi selesai. Titik akhir ini memproses JSON yang dikembalikan, memeriksa respons_kode untuk melihat apakah pembayaran berhasil. Jika berhasil, data transaksi (seperti nomor tiket) dapat login atau dimasukkan ke dalam database. Dengan mengembalikan kode status dan pesan yang sesuai, backend memungkinkan koneksi lancar dengan frontend, memberikan umpan balik penting kepada pengguna, seperti apakah transaksi berhasil atau gagal.

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

Meningkatkan Integrasi Checkout Moneris dengan Opsi Kustomisasi

Saat bekerja dengan integrasi Moneris Checkout, pengembang sering kali mencari metode untuk mempersonalisasi proses checkout guna meningkatkan pengalaman pengguna. Formulir checkout Komponen UI dapat dikustomisasi, yang merupakan fungsi yang kurang dikenal. Moneris memungkinkan bisnis untuk menyesuaikan tampilan dan tata letak halaman checkout, memungkinkan mereka menyelaraskannya dengan branding mereka. Ini melibatkan modifikasi tata letak tombol, bidang formulir, dan bahkan susunan kata untuk mempermudah proses bagi pengguna akhir dan meningkatkan konversi.

Faktor lain yang perlu dicermati adalah penggunaan jenis transaksi selain pembayaran pokok. Moneris memiliki kemampuan seperti pra-otorisasi, di mana jumlah transaksi disimpan di kartu tetapi tidak langsung ditagih. Fungsi ini sangat penting terutama di area seperti hotel dan persewaan mobil, yang tarif akhirnya dapat berbeda. Integrasi ini dapat menangani banyak jenis transaksi dengan menggunakan hal yang sama API, menjadikannya serbaguna untuk berbagai kasus penggunaan.

Keamanan adalah prioritas utama dalam setiap integrasi pembayaran, dan Moneris Checkout menggabungkan teknologi seperti tokenisasi dan pencegahan penipuan. Tokenisasi menggantikan informasi kartu sensitif dengan token, sehingga data konsumen tidak pernah terekspos di sistem Anda. Menerapkan langkah-langkah keamanan, seperti teknologi deteksi penipuan dan kepatuhan PCI DSS, dapat mengurangi risiko terkait transaksi online secara signifikan.