Options
Mandatory
The following option is mandatory and must be included for the payment modal to function correctly:
You must also include one of these options:
Test Environments
If you are using a channel that is in test mode, you will need to add the environment option.
Optional
The following options can be used where required
Examples
path
The path of your TMTProtects site.
<script>
window.tmtPaymentModalReady = function () {
var tmtPaymentModal = new window.tmtPaymentModalSdk({
path: 'test-site',
...
})
}
</script>
formId
The ID of the form containing the required booking and transaction data. See Payment Form Implementation for more detail.
<form id="myPaymentForm" action="complete.php" method="post">
// Form inputs etc...
</form>
<script>
window.tmtPaymentModalReady = function () {
var tmtPaymentModal = new window.tmtPaymentModalSdk({
path: 'myPaymentForm',
...
})
}
</script>
data
An object containing all required booking and transaction data. See Data Object Implementation for more detail.
<button id="trigger-modal" class='btn btn-primary'>Pay Now</button>
<script>
window.tmtPaymentModalReady = function () {
const data = {
booking_id: '0',
channels: '2',
country: 'GB',
// Authentication
booking_auth: authentication_string,
// Lead Traveller
firstname: 'John',
surname: 'Smith',
email: 'john.smith@example.org',
date: '2020-05-15',
// Payment details
payee_name: 'Jane Smith',
payee_email: 'jane.smith@example.org',
payee_address: '123 test address',
payee_city: 'Test city',
payee_country: 'GB',
payee_postcode: '0000',
currencies: 'GBP',
total: '9999'
}
const button = document.getElementById('trigger-modal')
button.addEventListener('click', function () {
var tmtPaymentModal = new window.tmtPaymentModalSdk({
path: 'test-site',
data: data
})
})
}
</script>
Environment
Different versions of the tokeniser tool are used according to whether a channel is in test mode or not. If the channel you are implementing the modal for is in test mode, you will need to set the environment option accordingly. For other modes, the environment option will default to live.
NB: While you are permitted to use non-secure URLs in test mode, you will not be permitted to do so in live mode
<script>
window.tmtPaymentModalReady = function () {
var tmtPaymentModal = new window.tmtPaymentModalSdk({
path: 'test-site',
formId: 'my-payment-form',
envirnoment: 'test'
})
}
</script>
paymentCurrency
The default behaviour of the payment modal is to offer payment in the base currency of your channel, and allow the customer to change the payment currency as required. Should you know that the customer making payment is based in a country that does not use your channel's base currency, you can improve the user experience by defining their currency to default the payment modal to.
For example, if the base currency of your channel is USD and your customer is based in Germany, you would define the paymentCurrency as EUR as shown below.
<script>
window.tmtPaymentModalReady = function () {
var tmtPaymentModal = new window.tmtPaymentModalSdk({
path:'test-site',
formId: 'my-payment-form',
paymentCurrency:'EUR'
})
}
</script>
Should you wish to display your prices in currencies other than your base currency, you will need to utilise your channel's forex feed
lang
The modal is rendered in English by default. Should you know that the user prefers an alternate language, the modal can be set to load in that language should a translation be available. Once loaded, the user is still free to switch languages should they wish. The language which the modal is in at the point of transaction determines what language the user's payment receipt shall be in.
<script>
window.tmtPaymentModalReady = function () {
var tmtPaymentModal = new window.tmtPaymentModalSdk({
path:'test-site',
formId: 'my-payment-form',
lang: 'ptBR'
})
}
</script>
disableLang
If the translations you require for your customer base are not available, you can disable the translation picker.
<script>
window.tmtPaymentModalReady = function () {
var tmtPaymentModal = new window.tmtPaymentModalSdk({
path:'test-site',
formId: 'my-payment-form',
disableLang: true
})
}
</script>
disableCloseWindowPrompt
If you have your own means of handling user attempts to close the browser or refresh during transaction you may wish to disable the in-built onbeforeounload
close window prompt.
<script>
window.tmtPaymentModalReady = function () {
var tmtPaymentModal = new window.tmtPaymentModalSdk({
path:'test-site',
formId: 'my-payment-form',
disableCloseWindowPrompt: true
})
}
</script>
debug
Set debug = true
to enable validation and error logs in console.
<script>
window.tmtPaymentModalReady = function () {
var tmtPaymentModal = new window.tmtPaymentModalSdk({
path:'test-site',
formId: 'my-payment-form',
debug: true
})
}
</script>
Verify
If you have extended the authstring to include other booking and transaction values, you will need to include the verify
option in order to pass in an array of the fields that you have included in the authstring.
<script>
window.tmtPaymentModalReady = function () {
var tmtPaymentModal = new window.tmtPaymentModalSdk({
path:'test-site',
formId: 'my-payment-form',
verify: ["reference"]
})
}
</script>
The following fields can be used in the verify
array in any implementation:
- country
- date
- firstname
- reference
- surname
You can also include the following in the Data Object Implmentaion
- allocations
- charge_channel
Transaction Type
We now allow for pre-authorizing a card via the modal leaving you to make a Capture request via an API call in order to capture the payment.
NB: Allocations are not permitted on authorize transactions and must be included with the Capture request
<script>
window.tmtPaymentModalReady = function () {
var tmtPaymentModal = new window.tmtPaymentModalSdk({
path:'test-site',
formId: 'my-payment-form',
transactionType: 'authorize'
})
}
</script>