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:

Optional

The following options can be used where required

Examples

path

The path of your TMTProtects site. If the API URL provided to you by Trust My Travel was https://tmtprotects.com/test-site then your path will be test-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',9
        }

        const button = document.getElementById('trigger-modal')

        button.addEventListener('click', function () {
            var tmtPaymentModal = new window.tmtPaymentModalSdk({
                path: 'test-site',
                data: data
            })
        })
    }
</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>

results matching ""

    No results matching ""