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

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`
`placeholderStyles`	object	N	Applies to all field input placeholders. Note css properties are not camelcase. Example: use `“border-color"`, not `borderColor`
`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 by`window.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.
`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.

Field Configuration

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

Property	Type	Required	Description	Format / Example

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`

Netvalve Documentation

JavaScript SDK Configuration Properties

Analytics

Basic Usage

Required Fields

Allowed Properties and Methods

Field Configuration

Example Advanced Implementation using callbacks

Example manually calling tokenization of fields

Related content