JavaScript SDK Configuration Properties

Basic Usage

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

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)

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

fields: {
    cardNumber: {
        inputStyles: {
          color: 'blue'
        }
    },
    cvv: {
        inputStyles: {
         color: 'red'
        }
    },
    expiry: {
        inputStyles: {
          color: 'purple'
        }
    }
}

Callbacks

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

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

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

window.Netvalve.initTokenFields({
    formId: 'payment-form',
    payButtonId: 'submit-button',
    inputStyles: {
        'font-size': '16px',
        padding: '8px',
        'border-radius': '4px',
        border: '1px solid #ccc'
    },
    invalidStyles: {
        border: '1px solid red'
    },
    fields: {
        cardNumber: {
            inputStyles: {
                'letter-spacing': '1px'
            }
        }
    },
    onValidate: (fieldMessage) => {
        console.log('Field validation:', fieldMessage);
    },
    onSubmitPayment: (paymentToken) => {
        // Send token to your server
        console.log('Payment token:', paymentToken);
    }
});