Overview

To begin using the Trust My Travel Payment Modal, you will need:

• A TMTProtects account
• A channel on your TMTProtects account that is ready for processing (nb this can be a channel in test mode).
• A secret key for that channel.
• The base currency of the channel
• Your TMTProtects site path

See the Channel Data page and Site Path page for further detail.

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 GMT timestamp in the required format must be included in this string and appended to it. Authorisation strings are valid for 15 minutes. Please see the Authorisation page page for further detail and code examples.

Scripts

Having obtained these details, 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.2.0.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 values depending on the implementation that you are using.

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

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 to End Process

From the point at which the user clicks to pay, and triggers the modal, the following events occur:

• User clicks pay
• Modal is triggered
• Modal validates that all required data is present
• Modal attempts to obtain a token using the authstring
• Modal attempts to create a booking using the booking data provided
• Modal executes booking_logged callback
• Modal renders payment form
• User adds credit card details and clicks pay
• Transaction attempted

If the transaction is successful, the transaction_logged callback is triggered with the full API response to the POST /transactions call performed by the modal.

If the card issuing bank declines the card for some reason. The Payment Modal allows for two further failed attempts and will call the transaction_failed callback on each failure.

On the third and final attempt, the transaction will either succeed, in which case the transaction_logged callback is triggered, or it fails a third time resulting in the transaction_failed callback being triggered a third time followed by the transaction_rejected callback.

After the completion of any of the scenarios detailed above, the user experience is now back in your hands, and it is up to you to close the modal, and validate the response.

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.
    })
})

Troubleshooting

Should you encounter any issues in getting through the End to End process, please do the following in the order shown:

• Consult the Troubleshooting section of this documentation
• Refer to the TMT Status Page to ensure that your issue is not an open bug
• Contact TMT Member Support with as much detail as possible on the issue

Release Notes

• Added support for French and Latvian
• Added debug mode for easier integration
• Added improvements to error handling for easier integration
• Added ability to extend authstrings
• Improved documentation
• Improved demos

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 membersupport@trustmytravel.com supplying as much detail as possible such as including links to pages where the modal is being implemented or code examples.