Card PaymentRequest Access

Card Payments

The API allows card payments to be made to an existing booking using the following endpoint:

/bookings/{bookingReference}/cardPaymentUrl?amount={amountToPay}

which returns a URL to the TTC Payment Services card payment form, e.g:

https://payment-services.travcorpservices.com/makePayment/TTUSAS/BXXXXXX?cardTypes=VISA,AMEX,ECMC,DISCOVER&postMessage=true&amount=300&bookingType=TA

This URL can be used to render the card payment form within an iFrame, e.g:

<iframe
  id='paymentServicesForm'
  class='Payment-iframe'
  src='https://payment-services.travcorpservices.com/makePayment/TTUSAS/BXXXXXX?cardTypes=VISA,AMEX,ECMC,DISCOVER&postMessage=true&amount=300&bookingType=TA'
  width='100%'
  scrolling='no'
/>

After the card payment form is submitted. TTC Payment Services sends a callback response which is published to the browser as a window event.

TTC Payment Services browser window event callback response

Below is an example of the TTC Payment Services callback response:

{
  "paymentSuccessful":"true",
  "paymentStatus":"SUCCESS",
  "type":"CyberSourcePaymentResponse",
  "amountPaid":{"total":"1000","fee":"0"}
}

Response Fields

Name Description
paymentSuccessful "true" or "false" depending on whether the payment was successfully submitted to the payment provider i.e. CyberSource
type determines the response type, currently only set to "CyberSourcePaymentResponse"
paymentStatus can be either "SUCCESS" - payment was successfully processed by both the payment provider and TTC downstream systems or "PARTIALLY_COMPLETED" - payment was successfully processed by the payment provider but then failed to update TTC downstream systems
amountPaid specifies the amount paid and any fees if applicable

The following JavaScript code provides an example of how to attach an event listener to the browser window. It checks the paymentSuccessful boolean flag in the TTC Payment Services response JSON.
The JavaScript function needs to run within the same page which contains the card payment form embedded as an iFrame.

// function for attaching a TTC Payment Services event listener to the browser window
function listenForPaymentServicesPostMessages () {
  if (window._paymentServicesPostMessageHandler) {
    window.removeEventListener('message', window._paymentServicesPostMessageHandler, false)
  }
  var postMessageHandler = function(event) {
    return this.paymentServicesResponseReceived(event)
  }
  window._paymentServicesPostMessageHandler = postMessageHandler
  window.addEventListener('message', postMessageHandler, false)
}

function paymentServicesResponseReceived (event) {
  // Get TTC Payment Services card payment form URL
  var paymentFormURL = // i.e. $https://payment-services.dev.travcorpservices.com/makePayment/...
  var origin = event.origin || event.originalEvent.origin
  if (paymentFormURL.indexOf(origin) !== -1) {
    var paymentServicesResponse = JSON.parse(event.data)
    if (paymentServicesResponse.paymentSuccessful === 'true') {
      // HANDLE THE SUCCESSFUL RESPONSE HERE!
    }
  }
}

TTC Payment Services server-to-server callback response

Below is an example of the TTC Payment Services server-to-server callback response:

{
 "status": "success",
 "amount": "1000",
 "currency": "USD",
 "bookingId": "B12345",
 "sellingCompany": "TTUSAS",
 "transactionId": "TTUSAS-B12345-1234567",
 "billingAddress": {
   "line1": "11 Grosvenor Place",
   "line2": "",
   "city": "London",
   "country": "United Kingdom",
   "state": "",
   "postCode": "SW1X 7HH"
 },
 "authToken": "eyJhbGciOiJIUzI1N.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c",
}

Response Fields

Name Description
status "success" or "failure" depending on whether the payment was successfully processed
amount the amount paid and any fees if applicable
currency the currency that was used to make the payment
bookingId Id of the booking for which payment was made
sellingCompany Selling company of the tour
transactionId Unique identifier of a payment made for a booking
billingAddress Billing address used to make the card payment
authToken JWT signature for the response data

How to verify signature in the card payment server-to-server callback response

We use JWT asymmetric keys mechanism to sign the card payment response sent in the server-to-server callback after a payment is done. The response payload is signed by a private key on the sender end and a public key is used on the receiver end to verify the signature.

In order to verify the signature in the response payload, please use this public key:

-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArQcfETwPE5P9tpr4gUgm
bihdDGllrQjC4E7tAoURugaGUK2MwoxhuaMyBYJyXXye+MGuDevvmN18L5HclnXj
LpLIkS2hHdPs3jy/FP1Xc4lcqZmIKWZP7okELoU1btnwJvCBmPxajSFtM1SkXWYA
23J3lITtpdTIuXBn2JLM43w2Oz4kBDY1avTCFh7nB+Ck9CMBTrF4uIwcWhkwQ8iy
WPAyHtMNFBAbQv5NXlz4cu4nGI4mlfJRYfyndKBJ4MuIPJiX4hfwPzTO5lNl+lEl
gy1XMOeK+xdJzHn59bLGns+V/tUE/JZBrHNig5cfnMhH8CNdwMi36/LYQTp6xOtC
QwIDAQAB
-----END PUBLIC KEY-----