Versions Compared

Version Old Version 7 New Version 8
Changes made by

Kyle Robinson

Kyle Robinson

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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.

Code Block
{
  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

Code Block
{
 '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

Code Block
{
 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

Code Block
{
  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.

Code Block
(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.

Code Block
(fieldData) => {
 // check field
 // validation
 // succcess
 // or
 // fail
}

Field Configuration

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

...