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.20.0.js"></script>

Beneath this script, you will need a script that inits the TMT Payment Modal and passes in your path* and either formId to identify the ID of your payment form or data if you are passing in a booking and transaction data object depending on the implementation that you are using.

*NB 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.

        formId: 'my-payment-form'

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;


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 unssuccessful 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: 'my-payment-form'
    tmtPaymentModal.on('transaction_logged', function (data) {
        // Call AJAX to update database

results matching ""

    No results matching ""