<script src="https://payment.qubotic.name/tmt-payment-modal.3.6.1-STAG.js"></script>
<script>
window.tmtPaymentModalReady = function () {
const button = document.getElementById("trigger-modal")
button.addEventListener("click", function () {
const tmtPaymentModal = new window.tmtPaymentModalSdk({
path: "tmt-test",
environment: "test",
data: {
// Booking Data
booking_id: "0",
channels: "3078",
country: "GB",
date: "2025-01-22",
currencies: "GBP",
total: "100",
reference: "SOMEBOOKING", // optional
description: "Holiday for Two", // optional
pax: "2", // optional,
// Authentication
booking_auth: "e75104b7e92e1d326714a5a258fbf9b987af7855a8011f48c2d9dc68fdf52b2020250115140550",
// Lead Traveller
firstname: "John",
surname: "Smith",
email: "john.smith@example.org",
// Payment details
payee_name: "Jane Smith",
payee_email: "jane.smith@example.org",
payee_address: "123 test address", // optional
payee_city: "Test city", // optional
payee_country: "AR",
payee_postcode: "0000", // optional
// Allocations // optional
allocations: [{
channels: "1847",
currencies: "EUR",
operator: "flat",
total: 2500
}],
charge_channel: 1847 // optional, but dependent on allocations
},
paymentCurrency: "USD",
disableLang: false,
lang: "enGB",
disableCloseWindowPrompt: false,
debug: true,
verify: [
"allocations",
"firstname",
"surname",
"email",
"date",
"reference",
"country",
"description",
"pax",
"charge_channel",
],
paymentMethods: [
"credit-card",
"dlocal",
"giropay",
"ideal",
"sofort",
"rapipago"
]
})
// Available Callbacks
tmtPaymentModal.on("booking_logged", function(data) {
console.log("BOOKING LOGGED - ", data);
})
tmtPaymentModal.on("booking_exists", function (data) {
console.log("BOOKING EXISTS - ", data);
})
tmtPaymentModal.on("booking_error", function (data) {
console.log("BOOKING ERROR - ", data);
})
tmtPaymentModal.on("transaction_logged", function (data) {
console.log("TRANSACTION LOGGED - ", data);
tmtPaymentModal.closeModal();
var formData = new FormData();
formData.append("id", data.id);
formData.append("status", data.status);
formData.append("total", data.total);
formData.append("hash", data.hash);
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
const output = document.getElementById("outer")
output.innerHTML = "<div id='outcome' class='container content'><h2>" + xmlHttp.responseText + "</h2></div>";
}
}
xmlHttp.open("post", "server.php");
xmlHttp.send(formData);
})
tmtPaymentModal.on("transaction_failed", function (data) {
console.log("TRANSACTION FAILED - ", data);
tmtPaymentModal.closeModal();
var formData = new FormData();
formData.append("id", data.id);
formData.append("status", data.status);
formData.append("total", data.total);
formData.append("hash", data.hash);
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
const output = document.getElementById("outer")
output.innerHTML = "<div id='outcome' class='container content'><h2>" + xmlHttp.responseText + "</h2></div>";
}
}
xmlHttp.open("post", "server.php");
xmlHttp.send(formData);
})
tmtPaymentModal.on("transaction_error", function (data) {
console.log("TRANSACTION ERROR - ", data);
})
tmtPaymentModal.on("modal_closed", function (data) {
console.log("MODAL CLOSED - ", data);
})
tmtPaymentModal.on("close_window_attempted", function (data) {
console.log("USER ATTEMPTED TO CLOSE BROWSER WINDOW ", data);
})
})
}
</script>