SDK Methods

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.initTokenFields during the JS SDK setup.
   Example

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

3. From the <netvalve-tokenfields> HTML web component.
   Example

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

tokenizeFields() Function

tokenizeFields() is an asynchronous function for validating all fields and performing tokenization.

Arguments: None;
Returned Value: Promise

• If validation and tokenization are both 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.');
});

Also refer to the Form Submission document.

validateFields() Function

validateFields() is an asynchronous function that runs input validation for all fields (card number, CVV, and expiry) without performing tokenization. Use it when you need to manually validate every field at once — for example, to gate a custom submit button, to validate before a multi-step checkout transition, or to surface validation errors on demand.

Arguments: None
Returned Value: Promise

• Resolves to true only if all three fields (card number, CVV, and expiry) pass validation.
• Resolves to false if any field fails validation or has not been initialized.

Example Usage

document.querySelector('#review-step-button')?.addEventListener('click', async (e) => {
    e.preventDefault();
    const isValid = await window.Netvalve.validateFields(); // VALIDATE ALL FIELDS
    if (isValid) goToNextStep();                            // ALL FIELDS VALID
    else console.warn('Card details are incomplete or invalid.');
});

Behavior notes:

• Validation only, no tokenization. This method checks the current field values but does not encrypt or tokenize them. To produce a payment token, use tokenizeFields(), which performs its own validation pass before tokenizing.
• Field error states update as a side effect. Each field that is validated updates its valid/invalid styling and fires your onValidate callback (if configured).
• Short-circuit evaluation. Fields are validated in order — card number, then CVV, then expiry. If an earlier field fails, the remaining fields are not validated on that call, so their error states will not refresh until the earlier field passes. If you want every invalid field to show its error state in a single call, use validateAll() instead.
• Availability. validateFields() is attached to window.Netvalve only after initTokenFields() has resolved. Before that, the property is undefined. Either use the object returned by initTokenFields(), or guard the call with optional chaining (await window.Netvalve.validateFields?.()).

validateAll() Function

validateAll() is an asynchronous function that validates all fields (card number, CVV, and expiry) in parallel and refreshes every field's error state in a single call. Unlike validateFields(), it does not short-circuit — every field is validated regardless of whether the others pass. Use it when you want all invalid fields to surface their errors at once (for example, when validating an entire form on a single button click).

validateAll() is a method on the <netvalve-tokenfields> HTML web component, so it is accessed from that element instance (access method 3 above) rather than from window.Netvalve.

Arguments: None
Returned Value: Promise

• Resolves to true only if all three fields (card number, CVV, and expiry) pass validation.
• Resolves to false if any field fails validation or has not been initialized.

Example Usage

document.querySelector('#review-step-button')?.addEventListener('click', async (e) => {
    e.preventDefault();
    const sdk = document.querySelector('netvalve-tokenfields'); // GET INSTANCE
    const isValid = await sdk.validateAll();                    // VALIDATE ALL FIELDS
    if (isValid) goToNextStep();                                // ALL FIELDS VALID
    else console.warn('Card details are incomplete or invalid.'); // ERRORS NOW SHOWN ON ALL INVALID FIELDS
});

Behavior notes:

• Validation only, no tokenization. Like validateFields(), this method checks the current field values but does not encrypt or tokenize them.
• All fields validated in parallel. Every field's valid/invalid styling is refreshed and its onValidate callback (if configured) is fired on each call.
• Availability. The <netvalve-tokenfields> element only exists after initTokenFields() has wrapped your form. Query for the element after the SDK is initialized (after initTokenFields() resolves, or after the netvalve-sdk-ready event).

allFieldsTokenized() Function

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 the three fields have been successfully tokenized.
• Returns false if any of the fields 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() Function

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();
});