Payment Page

            <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: "4",
                                country: "GB",
                                date: "2020-05-12",
                                currencies: "GBP",
                                total: "5000",
                                // Authentication
                                booking_auth: "9280c962f8f6fde41b687ba96a1b525be14569aba04dff54c12272e09d55cff120240329101001",
                                // 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",
                                payee_city: "Test city",
                                payee_country: "GB",
                                payee_postcode: "0000"
                            }
                        })

                        // 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("transaction_result_available", function (data) {
                            console.log("TRANSACTION RESULT AVAILABLE - ", data);
                        })

                        tmtPaymentModal.on("close_window_attempted", function (data) {
                            console.log("USER ATTEMPTED TO CLOSE BROWSER WINDOW ", data);
                        })
                    })
                }
            </script>