JavaScript Library Event Tracking

To provide an optimal user experience, the JavaScript Library offers event-detection capabilities. These capabilities allow you to track various stages of the payment process, including payment initialisation and completion. In this article, we will discuss the events that can be tracked during a standard card payment, as well as for transactions performed with Apple Pay and Google Pay.

How it works

Start by creating an instance of SecureTrading, as explained in our Library configuration article. Here's an example:

<script>
(function() {
  var st = SecureTrading({
    jwt,
  });
  st.Components(); <!-- Card Payment -->
})();
</script>

By using the st.on() function, you can provide an eventName as the first argument to indicate the event to be captured. The st.on() function supports the following events, which can be used for any payment method chosen by your customer:

Here's an example of how to verify that the payment initialisation has completed and that the chosen payment method is Apple Pay:

st.on('paymentInitCompleted', (data) => {
  if (data.name === 'ApplePay') {
    <!-- Apple Pay initialized successfully -->
  }
});

The data object provided in the event callback contains the name property, which can be used to verify the selected payment method. The currently supported name values are:

• ApplePay
• GooglePay
• CARD

The paymentPreCheck event and disabledAutoPaymentStart

By default, the library will automatically start the payment process when your customer has clicked on the pay button, but alternatively you can configure the disabledAutoPaymentStart config option to override this behaviour and determine when the payment starts (Further info on this can be found in the Library configuration article). When disabledAutoPaymentStart is activated for a payment type, the paymentPreCheck’s event data will contain a new callback called paymentStart() that, when invoked, will start the main payment process.

For example, when performing an Apple Pay transaction, you may wish to perform additional checks and processes before starting the main payment process, as shown below:

<script>
(function() {
  var st = SecureTrading({
    jwt,
    disabledAutoPaymentStart: ['APPLEPAY'],
  });
  st.Components();
  st.ApplePay();

  st.on('paymentPreCheck', (data) => {
    const paymentMethod = data.name;
    const paymentStart = data.paymentStart;

    if (paymentMethod === 'ApplePay') {
      var isFormValid = validateForm();
      if (isFormValid){
        paymentStart();
      } else {
        <!-- Alert customer to input required fields -->
      }
    }
   });
})();
</script>