Capturing payment flow events

To offer the best user experience for customers, the JavaScript Library is capable of detecting events, such as when the payment initialisation has begun and when the payment process has completed. In this section, we will cover the possible events that can be tracked during a standard card payment, or transactions performed with Google Pay, Apple Pay and Alternative Payment Methods (APMs).

 

How it works

First, you will need to define the ST object, as described in our Library configuration article.

e.g.

var st = ST(config);

Next, you will need to use the on() function from the SecureTrading object.

  st.on('nameoftheevent', (data) => {
console.log(data);
});

nameoftheevent - The name of the event you wish to capture e.g. "paymentCompleted".

data - An object containing the name of payment method e.g. ApplePay.

 

List of event names

  • paymentInitStarted
  • paymentInitCompleted
  • paymentInitFailed
  • paymentStarted
  • paymentCompleted
  • paymentFailed
  • paymentCanceled

 

Payment method names

  • ApplePay
  • GooglePay
  • APM
  • CARD

 

Verify type of payment method

Once the event is captured you should ensure that it is related to the particular payment method e.g. ApplePay.

  st.on('paymentInitCompleted', (data) => {
  if (data.name === 'ApplePay') {
  // Apple Pay is ready
  }
  });

 

Apple Pay

  1. paymentInitStarted - is called after the control frame has been initialised and configuration object for Apple Pay is defined.
  2. paymentInitCompleted - is called after Apple Pay button is inserted onto your checkout page and gesture handler is attached to this button - button is ready to be clicked.
  3. paymentInitFailed - is called when e.g. Apple Pay Session throws an error or the Apple Pay configuration is incorrect. It’s normally called when Apple Pay button cannot be inserted onto the checkout page.
  4. paymentStarted - is called when wallet verification process has been started.
  5. paymentCompleted - is called when payment has been successfully authorised. This event is called at the same time as front end message notifications and submit / success call-back are called.
  6. paymentFailed - is called when wallet verification or authorisation process has failed.
  7. paymentCanceled - is called when Apple Pay payment has been cancelled (by user or by Apple Pay itself).

 

APMs

  1. paymentInitStarted - is called after the control frame has been initialised and configuration object for APMs is defined.
  2. paymentInitCompleted - is called when all the configured APM buttons are displayed on the page.
  3. paymentInitFailed - is called when the APM initialisation fails.
  4. paymentStarted - is called after the APM payment button has been clicked.
  5. paymentCompleted - is called when a payment has been successfully authorised. This event is called at the same time as front end message notifications and submit / success call-back are called.
  6. paymentFailed - is called after an error has been thrown from the TRU Connect gateway.
  7. paymentCanceled - is called after any APM payment method is cancelled.

 

Google Pay

  1. paymentInitStarted - is called after the control frame has been initialised and configuration object for Google Pay is defined.
  2. paymentInitCompleted - is called after Google Pay button is inserted onto your checkout page and gesture handler is attached to this button - button is ready to be clicked.
  3. paymentInitFailed - is called when the Google Pay cannot be initialised, e.g. due to configuration errors.
  4. paymentStarted - is called when the Google Pay button is clicked.
  5. paymentCompleted - is called when payment has been successfully authorised. This event is called at the same time as front end message notifications and submit / success call-back are called.
  6. paymentFailed - is called when the payment processing or authorisation process has failed.
  7. paymentCanceled - is called when the Google Pay payment has been cancelled.

 

Card payments

  1. paymentInitStarted - is called after control frame has been initialised.
  2. paymentInitCompleted - is called after JSINIT request is completed and successful.
  3. paymentInitFailed - is called JSINIT request fails.
  4. paymentStarted - is called after the pay button has been clicked.
  5. paymentCompleted - is called when payment has been successfully authorised. This event is called at the same time as front end message notifications and submit / success call-back are called.
  6. paymentFailed - is called after an error has been thrown from the gateway.
  7. paymentCanceled - is called after card payment is cancelled.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request