Events

Custom Events

Here is a list of custom events that can be listened for.

Event	Description
field-validation	Emitted on the blur event when the user types. Event detail indicates success or fail.
field-tokenization	Emitted after a field attempts to tokenize on the Netvalve server. Event detail indicates success or fail.
field-initiated	Emitted when the input inside the iframe has finished rendering. Each field emits this.
all-fields-ready	Emitted once when all 3 fields have finished rendering.
all-fields-tokenized	Emitted to indicate if all 3 fields have finished tokenization. It will emit with the latest state if the allFieldsTokenized() value changes. Event detail contains a success property to indicate if fields are tokenized or not.
card-type	Emitted when the credit card type has been detected from user input. Inside the event detail is a property called typeData - see CardTypeData.
netvalve-sdk-ready	Emitted once when the window.Netvalve property is globally available. Event detail contains a single object property: success.

Event Detail

The event detail object structure is the same for each event. See Event Detail / Message Data.

Example Usage

// Listen for all 3 fields rendered to the screen.
window.addEventListener('all-fields-ready', () => {
  console.log('Card fields have been rendered.')
});

// Listen for when all fields are tokenized
window.addEventListener('all-fields-tokenized', (event: CustomEvent) => {
    const { detail } = event;
    
    if (detail.success) {
        // All fields were successfully tokenized
        console.log('All fields tokenized successfully');
        const paymentToken = detail.paymentToken;
        submitPaymentForm(paymentToken);
    } else {
        // Tokenization failed for one or more fields
        console.error('Field tokenization failed:', detail.message);
        displayError(detail.message);
    }
});

// Listen for validation events
window.addEventListener('field-validation', (event) => {
    const { success, message, fieldName } = event.detail;
    if (!success) {
        console.log(`Validation failed for ${fieldName}: ${message}`);
    }
});

// Listen for individual field tokenization events
window.addEventListener('field-tokenization', (event) => {
    const { success, message, fieldName } = event.detail;
    if (success) {
        console.log(`${fieldName} successfully tokenized`);
    } else {
        console.log(`Failed to tokenize ${fieldName}: ${message}`);
    }
});

// Listen for individual field initialization
window.addEventListener('field-initiated', (event) => {
    const { success, message } = event.detail;
    if (success) {
        console.log('TokenFieldSDK initialized successfully');
    }
});

// Listen for card type
window.addEventListener('card-type', (e) => {
      console.log(e.detail.typeData.type); // visa
});