Payment Gateway Docs

Appearance

On this page

Payment Options ​

Next step is to create an options object to configure your payment options. This will be important for declaring which payment options you wish to provide the customer and configuring important details about the transaction.

Feel free to customize the look and feel for providing optional properties to the customCSS object. If any property is invalid or no value is provided a default value will be assigned.

Payment Configuration Fields ​

✔ - Required Field

❖ - Optional Field

INFO

The column Labeled E-Payments represents our wallet based payment methods such as Google Pay and Apple Pay

All the properties accept these special characters (space) - + _ / , . ' ( )#; tripName accepts an extra character &.

PropertyCardPaypalE-Payments
sellingCompany
Allowed: Alpha
MAX: 100 Char
A unique brand identifier code.		✔✔✔
transactionInfo.transactionId
Allowed: Alphanumeric
MAX: 100 Char
A unique identifer of your choice to reference this transaction.		✔✔✔
transactionInfo.amount
Allowed: Numeric (2dp)
MAX: 10 Char
Transaction total amount.		✔✔✔

transactionInfo.currency
Allowed: Alpha (ISO 4217)
MAX: 3 Char
Transaction currency, please use ISO currency codes.		✔✔✔
transactionInfo.tripName
Allowed: Alpha
MAX: 200 Char
Name of the trip listed in the booking.		✔
transactionInfo.bookingType
Allowed: Alpha
MAX: 2 Char
Who's entering the card details? 'TA' (Travel Agent) or 'CD' (Customer Direct), defaults to 'CD'.		❖
transactionInfo.cardTypes
Allowed: Alpha
MAX: 150 Char
Comma separated list of accepted card types, defaults to 'VISA,MASTERCARD,AMEX,DISCOVER,DINERS'.		❖
transactionInfo.selectedCardType
Allowed: Alpha
MAX: 100 Char
Pre select accepted card Type [Only use for AU selling company].		❖
transactionInfo.firstName
Allowed: Alpha
MAX: 100 Char
Customer first name.		❖✔✔
transactionInfo.lastName
Allowed: Alpha
MAX: 100 Char
Customer last name.		❖✔✔
transactionInfo.email
Allowed: Alpha (email)
MAX: 100 Char
Customer email.		❖
transactionInfo.addressLine1
Allowed: Alphanumeric
MAX: 100 Char
Customer billing address line 1.		❖
transactionInfo.addressLine2
Allowed: Alphanumeric
MAX: 100 Char
Customer billing address line 2.		❖
transactionInfo.addressCity
Allowed: Alphanumeric
MAX: 100 Char
Customer billing address city.		✔✔✔
transactionInfo.addressState
Allowed: Alpha (ISO 3166-2)
MAX: 3 Char
Customer billing address state code.		❖
transactionInfo.addressStateName
Allowed: Alpha
MAX: 100 Char
Customer billing address state name.		❖
transactionInfo.addressCountry
Allowed: Alpha (ISO 3166-1 alpha-2)
MAX: 2 Char
Customer billing address country code.		❖✔
transactionInfo.addressCountryName
Allowed: Alpha
MAX: 100 Char
Customer billing address country name.		❖
transactionInfo.addressPostalCode
Allowed: Alphanumeric
MAX: 100 Char
Customer billing address postal/zip code.		❖
transactionInfo.comments
Allowed: Alpha
MAX: 200 Char
Any relevant comments to add to the booking update with this payment (Tropics only).		❖
customCSS.navbar.backgroundColor
Allowed: Any valid hexadecimal color value
It is required 6 characters: "#FFFFFF"
Any valid hexadecimal color value.		❖
customCSS.navbar.borderColor
Allowed: Any valid hexadecimal color value
It is required 6 characters: "#FFFFFF"
Any valid hexadecimal color value.		❖
customCSS.navbar.borderRadius
Allowed: Any valid hexadecimal color value
It is required a Number followed by px: "6px"
Any number followed by px.		❖
customCSS.navbar.dividerColor
Allowed: Any valid hexadecimal color value
It is required 6 characters: "#FFFFFF"
Any valid hexadecimal color value.		❖
customCSS.button.activeBackgroundColor
Allowed: Any valid hexadecimal color value
It is required 6 characters: "#FFFFFF"
Any valid hexadecimal color value.		❖
customCSS.button.textColor
Allowed: Any valid hexadecimal color value
It is required 6 characters: "#FFFFFF"
Any valid hexadecimal color value.		❖
customCSS.button.activeTextColor
Allowed: Any valid hexadecimal color value
It is required 6 characters: "#FFFFFF"
Any valid hexadecimal color value.		❖
customCSS.button.borderRadius
Allowed: Any valid hexadecimal color value
It is required a Number followed by px: "6px"
Any number followed by px.		❖

Note: To check the TA payment option please use Link

Example ​

Note: If you wish to make a test payment without an existing booking, we recommend using our reserved transaction ID A000001; this will bypass all Tropics booking validation checks

See below for typical example payload requesting all payment options:

js
let options = {
  "sellingCompany": "CHUSAS",
  "transactionInfo": {
    "transactionId": "A000001",
    "amount": "100.30",
    "currency": "USD",
    "tripName": "Test Payment Tour",
    "bookingType": "CD",
    "cardTypes": "VISA,MASTERCARD,MAESTRO,AMEX,DINERS,DISCOVER",
    "selectedCardType": "VISA",
    "firstName": "Jamie",
    "lastName": "Gill",
    "email": "test@example.com",
    "addressLine1": "12010 Rockaway Beach Blvd",
    "addressLine2": "",
    "addressCity": "Rockaway Park",
    "addressState": "NY",
    "addressCountry": "US",
    "addressPostalCode": "11694",
    "comments": "This is a payment gateway test payment"
  },
  "customCSS": {
    "navbar": {
      "backgroundColor": "#FFFFFF",
      "borderColor": "#D1D1D1",
      "borderRadius": "1px",
      "dividerColor": "#D8D8D8"
    },
    "button": {
      "activeBackgroundColor": "#267EA1",
      "textColor": "#545454",
      "activeTextColor": "#FFFFFF",
      "borderRadius": "6px"
    }
  }
}

Display ​

To begin displaying payment options you will need to call our attachPaymentOption function, passing your options object as a JSON string, your host container id and a callback function expecting the payment response object.

In the event you need to change transaction details or simply want to refresh the display, call the attachPaymentOption again.

js
window.onload = function() {
  window.ttcPaymentgateway.attachPaymentOption(JSON.stringify(options),'#payment-gateway-component', (paymentResponse) =>{
    console.log(paymentResponse);
  });
}

Mainted By TTC Tech Payments Team

Copyright © 2025 TTC