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.

Iframes

If you are serving up the payment modal from within an iframe, all ancestors in the chain must be defined using the origin 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',
            environment: 'test'
        })
    }
</script>

Origin

If you are serving up the payment modal from within an iframe, all ancestors in the chain must be defined in a comma separated list with the parent listed first, followed by the origin that will render it and so on up the chain.

As an example, foo.com is an iframe that is serving up the modal within a file on bar.com:

<body>
    <!--content served up by bar.com-->

    <iframe src=foo.com>
        <button id="trigger-modal">Pay</button>

        <script>
            window.tmtPaymentModalReady = function () {

                const button = document.getElementById("trigger-modal");

                button.addEventListener("click", function () {
                    const tmtPaymentModal = new window.tmtPaymentModalSdk({
                        path: "some-site",
                        origin: "foo.com,bar.com",
                        data: {
                            ...
                        }
                    });
                });
            }
        </script>
    </iframe>
</body>

paymentMethods

By default, the payment modal offers payment via credit card. However, we also offer the following payment methods that can be used in addition to, or instead of, credit card payments:

  • Alipay
  • Giropay
  • iDEAL
  • DLocal (Installments)
  • Rapipago
  • Sofort

To indicate the methods you want to use, pass them in as an array as per the examples below. Payment methods will appear in the order you define them, with the exception of "credit-card", which will always be the default interface if included. Please review the Alternative Payment Methods page page for further details on these methods.

Using all available payment methods

<script>
    window.tmtPaymentModalReady = function () {
        var tmtPaymentModal = new window.tmtPaymentModalSdk({
            path:'test-site',
            formId: 'my-payment-form',
            paymentMethods: [
                'credit-card',
                'alipay',
                'dlocal',
                'giropay',
                'ideal',
                'sofort',
                'rapipago'
            ]
        })
    }
</script>

Using Alipay and Credit Card

<script>
    window.tmtPaymentModalReady = function () {
        var tmtPaymentModal = new window.tmtPaymentModalSdk({
            path:'test-site',
            formId: 'my-payment-form',
            paymentMethods: [
                'credit-card',
                'alipay'
            ]
        })
    }
</script>

Using Giropay and Alipay with Giropay as default

<script>
    window.tmtPaymentModalReady = function () {
        var tmtPaymentModal = new window.tmtPaymentModalSdk({
            path:'test-site',
            formId: 'my-payment-form',
            paymentMethods: [
                'giropay',
                'alipay'
            ]
        })
    }
</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
  • email
  • 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: If you intend to use this option, please note the following:

  • An authorize transaction will not result in funds being removed from the customer's account. You must complete a capture request in order to complete the transaction
  • Authorize transactions are subject to a per transasction fee as are capture transactions
  • Authorize transactions can only be captured within a short time frame. This is generally up to 5 days but can differ according to the bank processing the payment. We would advise that you remain well inside 5 days for this to avoid losing transactions
  • 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>

Installments

If you are offering installments as an alternative payment option, you can control which of the available installment options are offered by passing the required value or values in an array. This can be used to present the user with a pre-defined installment value, or to hide the installments interface altogether (this can be useful if you know that your customer has a Brasilian bank card but want to run a normal credit card payment).

Example: No Installments

<script>
    window.tmtPaymentModalReady = function () {
        var tmtPaymentModal = new window.tmtPaymentModalSdk({
            path:'test-site',
            formId: 'my-payment-form',
            paymentMethods: ['dlocal']
            installments: [1]
        })
    }
</script>

Example: Set Installment Plan to 3 Installments

<script>
    window.tmtPaymentModalReady = function () {
        var tmtPaymentModal = new window.tmtPaymentModalSdk({
            path:'test-site',
            formId: 'my-payment-form',
            paymentMethods: ['dlocal']
            installments: [3]
        })
    }
</script>

Example: All Installment Options (default)

<script>
    window.tmtPaymentModalReady = function () {
        var tmtPaymentModal = new window.tmtPaymentModalSdk({
            path:'test-site',
            formId: 'my-payment-form',
            paymentMethods: ['dlocal']
            installments: [1, 3, 6, 9, 12]
        })
    }
</script>

results matching ""

    No results matching ""