Additional Configuration

You can customize the input fields as well as the initialization timeout.

Fields Configuration

Property	Type	Description	Fields	Default value
selector	string	A CSS selector that uniquely identifies the HTML element present on the Merchant's website for each input field	All	See below
placeholder	string	Placeholder value	All except consent	Empty
accessibilityLabel	string	Accessibility label value	All	Empty
accessibilityErrorMessage	string	Accessibility error message	All	Empty
iframeTitle	string	Field's iframe title	All	Empty
separator	string	Card number separator	Card number	(space)
mask	boolean	Shows whether CVV input should be masked (in a password input)	CVV	false

In case no selector is provided, the default selector will be used. Here is an example on how to configure input fields with default selectors only:

<div skrill="card-number"></div>
<div skrill="expiry-date"></div>
<div skrill="cvv"></div>
<div skrill="card-holder"></div>
<div skrill="email"></div>
<div skrill="consent"></div>

Custom Styling

The SDK supports custom CSS styling for all inputs.

Initialization Timeout

Optional value in milliseconds. It defaults to 15 seconds. Once hit, the set-up function will throw an error (see Exception Handling section for more details).

Example

{
  "fields": {
    "cardNumber": {
      "selector": "#cardNumber",
      "placeholder": "0000 0000 0000 0000",
      "accessibilityLabel": "Card number",
      "accessibilityErrorMessage": "Card number is invalid",
      "iframeTitle": "Card number",
      "separator": " "
    },
    ...
  },
  "style": {
    "input": {
      "font-family": "Source Sans Pro"
    },
    "::placeholder": {
      "opacity": "0.6"
    },
    ".label-text": {
      "font-size": ".9rem !important"
    }
  },
  "initializationTimeout": 10000
}