Subscribe Pro PaymentFields Widget Events

The Subscribe Pro PaymentFields Widget fires numerous events during its lifecycle. You can register event handlers for these events using the PaymentFields.on() method.

List of Events

The following events are fired by the Subscribe Pro PaymentFields Widget:

Event: initialized

This event if fired after the PaymentFields Widget is completely initialized and ready to use.

No arguments are passed to the callback function.

Example

PaymentFields.on('initialized', () => {
  console.log('PaymentFields was initialized.');
});

Event: inputEvent

This event is fired when an input event occurs inside one the fields inside one of the hosted iFrames.

Example

IframeClient.on('inputEvent', (args) => {
  console.log('Iframe inputEvent received.', args);
});

Example of args

{
  "fieldCode": "number",
  "eventType": "focus"
}

Properties of the args Object (for inputEvent)

Event: validationResultChanged

Event is fired when validation of credit card number and CVV has occurred and the result has changed (for example when a card number goes from being invalid to valid).

Example

IframeClient.on('validationResultChanged', (args) => {
  console.log('In on.validationResultChanged.');
  console.log(args?.validationResult);
});

Example of args

{
  "validationResult": {
    "cardType": "american_express",
    "isNumberValid": true,
    "isNumberPotentiallyValid": true,
    "isCvvValid": false,
    "isCvvPotentiallyValid": true
  }
}

Properties of the args.validationResult Object (for validationResultChanged)

Event: challengeShown

This event is fired when 3D Secure 2 challenge content is shown in the configured element.

No arguments are passed to the callback function.

Example

PaymentFields.on('challengeShown', () => {
  console.log('PaymentFields challengeShown event received.');
});

Event: challengeHidden

This event is fired when 3D Secure 2 challenge content is hidden.

No arguments are passed to the callback function.

Example

PaymentFields.on('challengeHidden', () => {
  console.log('PaymentFields challengeHidden event received.');
});

Event: tokenize

Event is fired when tokenization of the sensitive payment data is complete. Event will return details about success or failure of the tokenization operation as well as details about the tokenized payment data and 3D Secure 2 authentication operation.

Example tokenize Event Handler

PaymentFields.on('tokenize', (result: TokenizeResult) => {
  console.log('PaymentFields tokenize event received.', result);
});

Example TokenizeResult

{
  "isSuccessful": true,
  "isTokenizeSuccessful": true,
  "isThreeDsAuthenticationSuccessful": true,
  "tokenString": "XXXX",
  "creditCard": {
    "cardType": "visa",
    "isNumberValid": true,
    "isCvvValid": true,
    "cardIssuerIdentificationNumber": "411111",
    "cardLastDigits": "1111"
  },
  "threeDsAuthenticationResponse": {
    ...
  }
}

TokenizeResult Type

interface TokenizeResult {
  isSuccessful: Boolean;
  isTokenizeSuccessful: Boolean;
  isThreeDsAuthenticationSuccessful: Boolean;
  tokenString?: String;
  creditCard?: any;
  threeDsAuthenticationResponse: any;
}

TokenizeResult Properties