Versions Compared

Version Old Version 6 New Version 7
Changes made by

Kyle Robinson

Kyle Robinson

Saved on

Key

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

...

Property

Type

Required

Description

Format / Example

formId

string

Y*

Provide the form element id.

"paymentForm"

formSelector

string

Y *

"#checkout form"

submitButtonIdpayButtonId

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”

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
}

...