JavaScript SDK Configuration Properties

Basic Usage

This is the minimum configuration required, without any styling or callbacks.

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

  { ...//rest of options inputStyles: { color: 'black', 'font-size': '16px', // ... any valid CSS properties } }

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

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

Callbacks

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

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

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

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