Content Comparison

...

This is the minimum configuration required, without any additional styling or callbacks, callbacks, or field element placement in HTML markup.

Code Block

language	js

window.Netvalve.initTokenFields({ formId
  formSelector: 'payment#payment-form' });

Required Fields

formId (string): The ID of your payment form element.
payButtonId (string): The ID of your submit button element. Required only when onSubmitPayment callback is provided.

Optional Fields

Styling Options

inputStyles (object): Global styles applied to all fields

...

language	js

...

,
  fields: {
      cardNumber: {

...

    containerSelector: '

...

#card-number-container'
      },

...

  cardCvv: {

...

 containerSelector: '#cvv-container'

...

invalidStyles (object): Styles applied to a field when validation fails

...

language	js

...

cardExpiry: {

...

 containerSelector: '#expiry-container'

...

}
}

...

validStyles (object): Styles applied to fields when validation passes

In Development

placeholderStyles (object): Styles applied to placeholder text

In Development

focusStyles (object): Styles applied when fields are focused

In Development

inputClasses (string[]): Array of CSS class names to apply to all fields

In Development

Individual Field Configuration

Each field (cardNumber, cvv, expiry) currently accepts:

inputStyles (object): Field-specific styles that override global styles

Code Block

language	js

fields: {
    cardNumber: {
        inputStyles);

Required Fields

formId (string) OR formSelector
fields (if <netvalve-cardnumber>, <netvalve-cvv> and <netvalve-expiry> have not been placed in the HTML markup)

Allowed Properties and Methods

Property

Type

Required

Description

Format / Example

formId

string

Y*

Provide the form element id.

"paymentForm"

formSelector

string

Y *

"#checkout form"

payButtonId

string

Y

The submit button element id

"payButton"

fields

object

Y

A configuration object for each field. See Field Config below.

Code Block
{ cardNumber: {}, cardCVV: {}, cardExpiry:

...

Callbacks

onSubmitPayment (function): Callback function called when form is submitted and validation passes

...

language	js

...

{}
}

inputStyles

object

N

Object of css styles. Applies to all fields. Note: css properties are not camelcase. Example: use “border-color", not borderColor

Code Block
{ 'font-weight': 'bold' }

invalidStyles

object

N

Object of css styles. Applies to all field inputs. Note: css properties are not camelcase. Example: use “border-color", not borderColor

Code Block
{ border: '2px solid red', 'font-weight': 'bold' }

placeholderStyles

object

N

Applies to all field input placeholders. Note css properties are not camelcase. Example: use “border-color", not borderColor

Code Block
{ color: 'black', 'font-weight': 'bold' }

defaultIframeHeight

string

N

The initial height of the iframe before the form’s input styles are calculated and applied to the form. Default is 46px

“48px”

interceptFormSubmit

boolean. Default = true

N

By default the form will intercept the form submission, and if tokenization succeeds, it will either call the onSubmitPayment callback, or call form.submit()

Set to false if you would like control over the form submission, and perform tokenization using the tokenizeFields method returned bywindow.Netvalve.initTokenFields

true / false

onSubmitPayment

function

N

The callback function invoked after all fields have been encrypted and the payment token ready.

Parameters: paymentToken

The string token will be passed to the callback.

Code Block
(paymentToken) => { // form submit // logic // goes here }

onValidate

function

N

The callback function invoked for each field after validation occurs (success and fail).

Parameters: fieldData

You can view the structure of the field data here.

Code Block
(fieldData) => { //

...

Note* A payButtonId for the button element must be provided.

onValidate (function): Callback function called when field validation occurs

Code Block

language	js

onValidate: (fieldData) => {
 // check the field, and the success property to see if validation succeeded
}

You can view the structure of the field data here.

Return Value

The initTokenFields function returns an object with the following methods:

validateFields(): Asynchronously validates all fields, returns a Promise<boolean>

...

 check field
 // validation
 // succcess
 // or
 // fail
}

Field Configuration

This applies to the individual field objects under the fields property, see above.

Code Block
{ cardNumber: {}, // Field Configuration cardCvv: {}, // Field Configuration cardExpiry: {} // Field Configuration }

Property

Type

Required

Description

Format / Example

containerSelector

string

Y*

A CSS selector for the div container where the field element will be rendered.

".cvv-container"

inputStyles

object

N

Object of css styles. Overrides the global/parent inputStyles. Note css properties are not camelcase. Example: use “border-color", not borderColor

Code Block
{ 'font-weight': 'bold' }

Example Advanced Implementation using callbacks

Code Block

language	js

window.Netvalve.initTokenFields({
    formIdformSelector: '#checkout .payment-form form',
    payButtonId: 'submit-button',
    inputStyles: {
        'font-size': '16px',
        padding: '8px',
        'border-radius': '4px',
        border: '1px solid #ccc'
    },
    invalidStyles: {
        border: '1px solid red'
    },
    fields: {
        cardNumber: {
          containerSelector:  inputStyles: {'#card-number-container',
          inputStyles: {
            'letter-spacing': '1px'
          }
        },
        cardCvv: {
          containerSelector: '#cvv-container'
        },
        cardExpiry: {
          containerSelector: '#expiry-container'
        }
    },
    onValidate: (fieldMessage) => {
        console.log('Field validation:', fieldMessage);
    },
    onSubmitPayment: (paymentToken) => {
        // Send token to your server
        console.log('Payment token:', paymentToken);
    }
});

Example manually calling tokenization of fields

Code Block

window.Netvalve.initTokenFields({
    formSelector: '#checkout',
    interceptFormSubmit: false, \\ SET TO FALSE TO HAND OVER THE FORM SUBMIT RESPONSIBILITY
    fields: {
        cardNumber: {
          containerSelector: '#card-number-container',
        },
        cardCvv: {
          containerSelector: '#cvv-container'
        },
        cardExpiry: {
          containerSelector: '#expiry-container'
        }
    },
});

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.log('^^^^Token submission failed, received null when expecting a payment token');
});

Version	Old Version 1	New Version Current
Changes made by	Kyle Robinson	Kyle Robinson
Saved on	Dec 20, 2024	Feb 18, 2025

Versions Compared

Key

Required Fields

Optional Fields

Styling Options

Individual Field Configuration

Required Fields

Allowed Properties and Methods

Callbacks

Return Value

Field Configuration

Example Advanced Implementation using callbacks

Example manually calling tokenization of fields