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:

eventName

 Description

paymentPreCheck Called after the payment button is clicked, but before payment is started.
paymentInitStarted Called when the payment initialisation has started.
paymentInitCompleted Called when the payment initialisation has successfully completed.
paymentInitFailed Called when the payment initialisation has encountered an error.
paymentStarted Called when the payment process has started.
paymentCompleted Called when the payment has reached the gateway.
paymentFailed Called when the payment has failed.
paymentCanceled Called when the user has cancelled the payment before it has reached the gateway.
  The eventName values are case-sensitive.
  Multiple st.on() calls on the same eventName are not supported. The most recent st.on() call will be the only one that’s used, i.e. st.on("paymentPreCheck") should not be called more than once per library set-up.

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>
Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request