Content Comparison

...

This is the minimum configuration required, without any additional styling or callbacks, 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'
      }
   }
});

...

• formId (string) OR formSelector

• payButtonId (string)

Optional Fields

Styling Options

• inputStyles (object): Global styles applied to all fields

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

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

• Code Block

  language	js

  { ...//rest of options invalidStyles: {

• fields (if <netvalve-cardnumber>, <netvalve-cvv> and <netvalve-expiry> have not been placed in the HTML markup)

Allowed Properties and Methods

{
  cardNumber: {},
  cardCVV: {},
  cardExpiry: {}
}

{
 'font-weight': 'bold'
}

{
 border: '2px solid red',
 'font-weight': 

...

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>

'bold'
}

{
  color: 'black',
 'font-weight': 'bold'
}

(paymentToken) => {

 // form submit
 // logic
 // goes 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
}

{
 'font-weight': 'bold'
}

Example Advanced Implementation

window.Netvalve.initTokenFields({
    formIdformSelector: '#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:  inputStyles: {'#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);
    }
});