Introduction
Trust My Travel work differently to a normal payment company and ARE NOT a payment gateway. Our value add is the fact that we build in financial protection to all transactions meaning that our acquiring partners and the cardholders are protected against the insolvency of our providers.
Due to our unique proposition we capture a lot more information than a traditional payment provider, and we also do not just sit one MID behind a provider. As such we ask that you do not treat this implementation as a payment gateway integration or make assumptions about this integration based on previous integrations of payment providers.
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.3.0.2.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 transaction is subject to 3DS2, the relevant authentication is served to the user
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 transaction_failed callback is triggered with the full API response to the POST /transactions
call performed by the modal.
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
- Patch for bug where card tokeniser used incorrect environment settings.
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.