Basic Usage

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

window.Netvalve.initTokenFields({ 
  formSelector: '#payment-form',
  fields: {
      cardNumber: {
          containerSelector: '#card-number-container'
      },
      cardCvv: {
          containerSelector: '#cvv-container'
      },
      cardExpiry: {
          containerSelector: '#expiry-container'
      }
   }
});

Required Fields

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.

{
  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

{
 '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

{
 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

{
  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.

(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.

(fieldData) => {
 // check field
 // validation
 // succcess
 // or
 // fail
}

Field Configuration

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

{
  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

{
 'font-weight': 'bold'
}

Example Advanced Implementation using callbacks

window.Netvalve.initTokenFields({
    formSelector: '#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: '#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

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