Payment Form

For this implementation, you will need a form with the fields defined below present on the page with the css class properties shown (either hidden from or displayed to the user).

On triggering the modal, a booking is placed using the data present in the form and the user is prompted for their credit card details in order to complete the transaction.

If any of the required data is not present, an error is output detaling the data that is not present.

If transaction fails for some reason, the user is given a further two attempts to make payment before the transaction is failed permanently.

On successful transaction, the user is shown the success dialog.

Required Data and Relevant CSS Class

CSS Class Description
tmt_booking_auth The hashed and salted authorisation string for the transaction
tmt_booking_id Set this to 0 to create a new booking
tmt_channels Set this to the ID of the channel you created
tmt_country The ISO 3166-1 alpha-2 value of the country the booking takes place in
tmt_firstname The firstname of the lead traveller
tmt_surname The surname of the lead traveller
tmt_email The email address of the lead traveller
tmt_payee_name The name of the person making payment as it appears on their credit/debit card
tmt_payee_email The email of the person making payment
tmt_payee_country The ISO 3166-1 alpha-2 value of the country of the person making payment
tmt_date The end date of travel in YYYY-MM-DD format
tmt_currencies The ISO 4217 value for the currency the travel item is being sold in (must match the currency of the channel in use)
tmt_total The total being billed in the currency shown as a cent value (e.g. $10.00 = 1000)

Address Data and Relevant Class Name

If your account is NOT enabled for Cardholder Present (all accounts are disabled for Cardholder Present by default) then you will need to supply the fields shown in the address data table. It is up to you to validate that the end user has completed the address fields prior to triggering the modal. Failing to validate these fields will result in a developer error being output in the event of an end user not completing them.

CSS Class Description
tmt_payee_address The adress of the person making payment
tmt_payee_city The city of the person making payment
tmt_payee_postcode The postcode/zip of the person making payment

Optional Data and Relevant Class Name

Class Description
tmt_reference Your own reference
tmt_description A description of the product being sold
tmt_pax The amount of people the product is for

Payment Form Example

<form id="myPaymentForm" action="complete.php" method="post">

    <div class="row">

        <div class="col-sm-8">

            <div class="form-group">
                <div class="col-sm-12">
                    <h2>Billing</h2>
                </div>
            </div>

            <div class="form-group">

                <div class="col-sm-6">
                    <label for="payee_name">Payee Name</label>
                    <input name="payee_name" type="text" class="form-control tmt_payee_name">
                </div>

                <div class="col-sm-6">
                    <label for="email">Email</label>
                    <input type="email" class="form-control tmt_payee_email">
                </div>

            </div>

            <div class="form-group">
                <div class="col-sm-12">
                    <label for="address">Address</label>
                    <input name="address" type="text" class="form-control tmt_payee_address" value="" />
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-12">
                    <label for="city">City</label>
                    <input name="city" type="text" class="form-control tmt_payee_city" value="" />
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-8">
                    <label for="country">Country: </label>
                    <select name="country" class="form-control tmt_payee_country">
                        <option value="US">United States of America</option>
                        <option value="GB">United Kingdom</option>
                        <option value="AU">Australia</option>
                    </select>
                </div>
                <div class="col-sm-4">
                    <label for="zip">Zip / Postcode: </label>
                    <input name="zip" type="text" class="form-control tmt_payee_postcode" value="" />
                </div>
            </div>

            <div class="form-group">

                <div class="col-sm-12">
                    <input id="tmt-pay" type="submit" value="Pay" name="pay" class="btn btn-primary btn-block" />
                </div>
            </div>

        </div>

        <div class="col-sm-4">

            <div class="form-group">
                <div class="col-sm-12">
                    <h2>Your Cart</h2>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-12">

                    <ul class="list-group">
                        <li class="list-group-item">
                            <div>
                            <h6 class="my-0">Guided Tour of Big Ben</h6>
                            <small class="text-muted">3 hour guided tour of Britain's most famous timepiece.</small>
                            </div>
                            <span class="text-muted">£22</span>
                        </li>
                        <li class="list-group-item">
                            <div>
                            <h6 class="my-0">Stand-up Paddleboard the Thames</h6>
                            <small class="text-muted">Who needs the ocean when you can paddle down the charming River Thames?</small>
                            </div>
                            <span class="text-muted">£9</span>
                        </li>
                        <li class="list-group-item">
                            <span>Total</span>
                            <input type="hidden" class="tmt_currencies" value="GBP" />
                            <strong>GBP 31</strong>
                            <input type="hidden" class="tmt_total" value="3100" />
                        </li>
                    </ul>                    
                </div>
            </div>
        </div>

        <!-- HIDDEN VALUES -->
        <input type="hidden" class="tmt_booking_id" value="0" />
        <input type="hidden" class="tmt_channels" value="4" />

        <!-- BOOKING DETAILS -->
        <input name="firstname" type="hidden" class="form-control tmt_firstname" value="John">
        <input name="surname" type="hidden" class="form-control tmt_surname" value="Smith">
        <input name="email" type="hidden" class="form-control tmt_email" value="john.smith@example.org">
        <input name="country" type="hidden" class="tmt_country" value="UK" />
        <input type="hidden" class="tmt_date" value="2019-05-12" />
        <input type="hidden" class="tmt_booking_auth" value="<?php echo $final_auth_string; ?>" />
    </div>

</form>
<script src="https://payment.tmtprotects.com/tmt-payment-modal.1.16.1.js"></script>
<script>
    TMTPaymentModal.init({
        path:'test-site',
        formId:'#myPaymentForm'
    });
</script>

results matching ""

    No results matching ""