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({ 
  formSelector: '#payment-form',
  fields: {
      cardNumber: {
          containerSelector: '#card-number-container'
      },
      cardCvv: {
          containerSelector: '#cvv-container'
      },
      cardExpiry: {
          containerSelector: '#expiry-container'
      }
   }
});

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`

...

Optional Fields

Styling Options

inputStyles (object): Global styles applied to all fields

...

language	js

...

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: {} }

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) => { //

...

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

...

Code Block

language	js

{
  ...//rest of options
  invalidStyles: {
    border: '2px solid red',
    // ... any valid CSS properties
  }
}

...

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

...

language	js

...

 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) => { // 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({
    formSelector: '#checkout .payment-form form',
    payButtonId: 'submit-button',
    inputStyles: {
        'font-size': '16px',
        padding: '8px',
        }
'border-radius': '4px',
   },     cvvborder: {'1px solid #ccc'
    },
   inputStyles invalidStyles: {
         colorborder: '1px solid red'
    },
    }fields: {
   },     expirycardNumber: {
          containerSelector: '#card-number-container',
          inputStyles: {
          color  'letter-spacing': 'purple1px'
          }
        }
}

Callbacks

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

Code Block

language	js

payButtonId: 'submit-button',
onSubmitPayment: (paymentToken) => {
 // send the payment token to your server to process sale 
}

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>

Example Advanced Implementation

Code Block

language	js

window.Netvalve.initTokenFields({
    formId: 'payment-form',
    payButtonId: 'submit-button',
    inputStyles: ,
        cardCvv: {
          containerSelector: '#cvv-container'
        },
        cardExpiry: {
          containerSelector: '#expiry-container'
        }
    },
    onValidate: (fieldMessage) => {
        console.log('Field validation:', fieldMessage);
    },
    onSubmitPayment: (paymentToken) => {
        // Send  'font-size': '16px',
token to your server
       padding: '8pxconsole.log('Payment token:', paymentToken);
    }
});

Example manually calling tokenization of fields

Code Block

window.Netvalve.initTokenFields({
    'border-radius'formSelector: '4px#checkout',
    interceptFormSubmit: false, \\ SET border:TO '1pxFALSE solidTO #ccc'HAND OVER THE FORM SUBMIT },RESPONSIBILITY
    invalidStylesfields: {
        bordercardNumber: '1px solid red'{
           }containerSelector: '#card-number-container',
    fields: {    },
        cardNumbercardCvv: {
          containerSelector: '#cvv-container'
inputStyles: {       },
         'letter-spacing'cardExpiry: '1px'{
          containerSelector: '#expiry-container'
}         }
    },
});

  onValidate: (fieldMessagedocument.querySelector('#submit-button')?.addEventListener('click', async (e) => {
        console.log('Field validation:', fieldMessagee.preventDefault();
    },const token =   onSubmitPayment: (paymentToken) => {await window.Netvalve.tokenizeFields(); // PERFORM TOKENIZATION
    
   // Sendif (token to your server
  ) document.querySelector('form')?.submit()  // TOKEN RECEIVED. SUBMITTING FORM
    else console.log('Payment token:', paymentToken);
    }^^^^Token submission failed, received null when expecting a payment token');
});

Version	Old Version 3	New Version Current
Changes made by	Kyle Robinson	Kyle Robinson
Saved on	Jan 27, 2025	Feb 18, 2025

Versions Compared

Key

Required Fields

Allowed Properties and Methods

Optional Fields

Styling Options

Individual Field Configuration

Field Configuration

Example Advanced Implementation using callbacks

Callbacks

Return Value

Example Advanced Implementation

Example manually calling tokenization of fields