<script src="https://payment.tmtprotects.com/tmt-payment-modal.3.6.1.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: "14079",
country: "GB",
date: "2024-12-16",
currencies: "GBP",
total: "5000",
reference: "SOMEBOOKING", // optional
description: "Holiday for Two", // optional
pax: "2", // optional,
// Authentication
booking_auth: "2dfc178e194000285bfe46c06d4a8e6e57673c173e478bf8d38d7a275e84186f20241209060828",
// 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
allocations: [{ // optional
channels: "1552",
currencies: "EUR",
operator: "flat",
total: 2500
}],
charge_channel: 1552 // 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",
"alipay",
"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>