Overview

Before You Begin

To begin using the modal, you will need:

Scripts

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.24.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 or data depending on the implementation that you are using.

Example

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:

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

Object implementation:

<script>
    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
                })
            })
        }
</script>

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

Authorisation

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

Implementation

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
        ...
        tmtPaymentModal.closeModal();

        // Redirect to success or fail page.
    })
})

Release Notes

  • Fixed bug where alerts to users about closing or refreshing the page blocked page redirects on successful transaction
  • Added option for disabling page redirect warnings

Browser Support

The current version of the Payment Modal has been tested in latest versions of Chrome, Firefox, Safari, Edge and IE11.

Previous Versions

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

Support

Please subscribe to https://status.tmtprotects.com/ for updates on new versions of the modal. 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 ""