Content Comparison

Accessing methods

Depending on how chose to integrate HPF, there are 3 ways you can access the sdk’s methods

1. from window.Netvalve

Example: await window.Netvalve.tokenizeFields()

2. from the object returned when calling window.Netvalve.initFields during the JS SDK setup.

const sdk = window.Netvalve.initFields({ })
await sdk.tokenizeFields();

3. From the <netvalve-tokenfields> html web component

const sdk = document.querySelector('netvalve-tokenfields'); // GET INSTANCE
const token = await sdk.tokenizeFields();

tokenizeFields()

An asynchronous function for validating all fields and performing tokenization.

Arguments: None;

Returned Value: Promise

• If validation + tokenization is successful, the promise resolves to a string token

• If either fails, the promise resolves to null

Example Usage

document.querySelector('#submit-button')?.addEventListener('click', async (e) => {
    e.preventDefault(); 
    const token = await window.Netvalve.tokenizeFields(); // PERFORM TOKENIZATION
    if (token) document.querySelector('form').submit();  // TOKEN RECEIVED. SUBMITTING FORM
    else console.error('Token submission failed, received null.');
});

Related: Form Submission

allFieldsTokenized()

A synchronous function that checks if all required payment fields (card number, CVV, and expiry) have been successfully tokenized.

Arguments: None

Returned Value: boolean

• Returns true if all three fields have been successfully tokenized

• Returns false if any field is not yet tokenized or has failed tokenization

Example Usage:

if (window.Netvalve.allFieldsTokenized()) {
    console.log('All fields are tokenized and ready for submission');
} else {
    console.log('Some fields still need to be tokenized');
}

isTokenizing()

A synchronous function that checks if any payment field is currently in the process of being tokenized.

Arguments: None

Returned Value: boolean

• Returns true if any field is currently being tokenized

• Returns false if no fields are currently being tokenized

Example Usage:

document.querySelector('#submit-button')?.addEventListener('click', async (e) => {
    if (window.Netvalve.isTokenizing()) {
        console.log('Please wait, tokenization in progress...');
        return;
    }
    // Proceed with tokenization
    const token = await window.Netvalve.tokenizeFields();
});