JavaScript SDK Configuration Properties

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

formId (string) OR formSelector
payButtonId (string) if the onSubmitPayment callback is provided
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.	{ 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”`
`preserveFormSubmitHandlers`	boolean	N	If the form has a submit handler function that processes the form, this property ensures it receives the submit event	true
`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

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