Form Submission

This page has 3 sections:

The default form submit
The onSubmitPayment callback form submit
The programmatic form submit

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

Both approaches above will intercept the form submission and automatically perform tokenization of the card details.

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. 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 the payment token as a string
if tokenization fails, it returns 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.');
});

An alternative to accessing tokenizeFields from the window is to retrieve from initiTokenFields:

If using the HTML integration

Set the interceptFormSubmit attribute to 'false':

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

Netvalve Documentation

Form Submission

Analytics

1. The default form submit

2. The onSubmitPayment callback submit

3. The programmatic form submit

If using JS config integration

If using the HTML integration

See Also

Related content