Form Submission

There are 3 ways the form submission can be handled.

The default form submit (the sdk intercepts the submit, and then submits it again after tokenization)
The onSubmitPayment callback form submit (the sdk intercepts the submit, tokenizes and executes the callback)
The programmatic form submit (the sdk does not intercept the submit at all. It provides a method for tokenization).

1. The default form submit

When the form submits, as a long as an onSubmitPayment callback has not been provided, the SDK will by default:

intercept and prevent the form submission
Validate all fields
Tokenize the card data
Add a hidden input with name="paymentToken" to your form
Call form.submit , which will perform a standard browser submission to the specified action and method on the form element.

Use the paymentToken in the body payload of the Sale API, in place of the card details. See Call Sale API with token

2. The onSubmitPayment callback submit

If this callback is provided in the configuration, the SDK will not submit the form.

It will execute the callback instead.

This callback will be attached to the form’s submit event. If a submitButtonId is provided, then it will be attached to the click event of the button.

The SDK will:

intercept and prevent form submission
Validate all fields
Tokenize the card data
Add a hidden input with name="paymentToken" to the form
Execute the onSubmitPayment callback, which receives the payment token as an argument

The SDK will not submit the form, and it is up to the logic in the callback to handle this.

Netvalve.initTokenFields({
    onSubmitPayment: async (paymentToken) => {
        // Show loading state
        showLoadingSpinner();
        
        // example sending the payment token inside callback
        const response = await fetch('/api/process-payment', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ paymentToken })
         });
    }
});

Remember: The payment token must be included in your sale API request body. Loading indicators and error handling are your responsibility - the SDK focuses solely on secure card data collection and tokenization.

3. The programmatic form submit

You may want control over when the card tokenization occurs, without any form submission interceptions preventing external form submit handlers from running.

You have the option to disable the form intercept, and call the tokenizeFields function to validate the form and complete tokenization.

For details on tokenizeFields method: SDK Methods

Follow these steps:

If using JS config integration

Set interceptFormSubmit to false in the configuration:

window.Netvalve.initTokenFields({
    formSelector: '#checkout',
    interceptFormSubmit: false, \\ SET TO FALSE TO HAND OVER THE FORM SUBMIT RESPONSIBILITY
    
    ...// other configurations
});

Once the SDK completes initialization, the tokenizeFields method will be added to the window.Netvalve instance .

Calling this function will:

Validate all fields
Tokenize the card data
Add a hidden input with name="paymentToken" to the form (unless there already)
If tokenization successful, it will will return a promise, which resolve to a string token
if tokenization fails, it will will return a promise, which 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.');
});

If using the HTML integration

Set the interceptFormSubmit attribute to 'false':

<netvalve-tokenfields interceptFormSubmit="false">
   <!-- fields go here --->
</netvalve-tokenfields>

Then, add a script with a custom submit handler, which calls the tokenizeFields method by retrieving the web component instance:

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