Before You Begin

To begin using the modal, you will need:


To get set-up with the TMT Payment Modal you will need to include the following script on your checkout page. This script must always be loaded from tmtprotects.com

<script src="https://payment.tmtprotects.com/tmt-payment-modal.1.21.1.js"></script>

Beneath this script, you will need a script that inits the TMT Payment Modal and passes in your path and either formId or data depending on the implementation that you are using.


If the API URL provided to you by Trust My Travel was https://tmtprotects.com/test-site then your path variable will be test-site as shown below.

Form implementation:

    window.tmtPaymentModalReady = function () {
        var tmtPaymentModal = new window.tmtPaymentModalSdk({
            path: 'test-site',
            formId: 'tmt-payment-form'

Object implementation:

    window.tmtPaymentModalReady = function () {

            const data = {

            const button = document.getElementById('trigger-modal');

            button.addEventListener('click', function () {
                const tmtPaymentModal = new window.tmtPaymentModalSdk({
                    path: 'test-site',
                    data: data

For examples of further options that can be passed to the TMT Payment Modal, please See the options page


To obtain a valid token for transacting, and to prevent tampering with transaction data, an authorisation string must be created for each transaction and hashed and salted with your channel secret. A timestamp must be included in this string and appended to it. Authorisation strings are valid for 15 minutes.

The process for generating the authorisation string is as follows:

// Get current time in GMT.
$time_now = new DateTime('now', new DateTimeZone('GMT'));

// Create timestamp in 'YmdHis' format. E.g. 20190812055213 
$timestamp = $time_now->format('YmdHis');

// Concatenate the values for channels, currencies, total and your timestamp in that order.
$booking_vars = [
    'channels'   => 2,
    'currencies' => 'USD',
    'total'      => 9999,
    'timestamp'  => $timestamp,

$string = implode('&', $booking_vars);

// SHA256 the string.
$auth_string = hash( 'sha256', $string );

// Fetch your channel secret and concatenate to string.
$secret = getenv('CHANNEL_SECRET');
$salted_auth_string = hash( 'sha256', $auth_string . $secret );

// Concatenate with timestamp.
$final_auth_string = $salted_auth_string . $timestamp;

To test the authorisation string your app generates matches the expected authorisation string, you can use the Auth Test Demo


In order to pass booking and transaction data to the modal, you will need to choose from one of our Payment Modal implementations. Select the method that suits your workflow best. The basic callbacks for this process are covered below. See the callbacks page for details on all available callbacks.

End of Transaction

The modal workflow is considered complete either when a user has successfully completed a transaction, or if a user has had three consecutive unsuccessful attempts to complete a transaction.

Successful Transaction

Once a transaction is successfully completed, the transaction_logged callback is triggered. This will include the full API response to the POST /transactions call performed by the modal. An example of a POST /transactions response can be found in the TMTProtects API Docs

The "id" can be used to verify the transaction via a GET /transactions/id request to the TMTProtects API.

The user experience is now back in your hands, and it is up to you to close the modal and redirect the user to your payment success page.

Unsuccessful Transaction

An unsuccessful transaction occurs when the user has supplied incorrect credit card data, or if the card issuing bank declines the card for some reason. The Payment Modal allows for three failed attempts and will call the transaction_failed callback on each failure.

Rejected Transaction

On the third and final unsuccessful transaction, the user is prevented from making any further attempts to pay, and the transaction_rejected callback is triggered. At this point you can safely close the modal.

Closing the Modal

The Payment Modal comes with a closeModal method that allows you to programtically close the modal from the same page that it was triggered from.

window.tmtPaymentModalReady = function () {
    var tmtPaymentModal = new window.tmtPaymentModalSdk({
        path: 'test-site',
        formId: 'tmt-payment-form'
    tmtPaymentModal.on('transaction_logged', function (data) {
        // Call AJAX functions to update database

        // Redirect to success or fail page.

Known Issues

The current version of the Payment Modal requires the paymentCurrency option to be defined. This can be set to the base currency of the channel you are using. Failure to do this can result in the POST /transactions request returning a 400 code as the payment currency is not correctly defined. This bug will be fixed in the next release of the payment modal.

Previous Versions

Previous versions of the Payment Modal and the related documentation can be found on our demos site


Please direct all issues and questions to techsupport@trustmytravel.com supplying as much detail as possible such as including links to pages where the modal is being implemented or code examples.

results matching ""

    No results matching ""