initCardToken method

Function to start an instance of ICard.

Parameters

* KushkiInstance: IKushki
* options: CardOptions

You must define the configuration of the card fields

* Define amount of the transaction.
* Define currency of the transaction.
* If the transaction is a subscription (default value is false).
* If you want to prevent the fields from being autocomplete (default value is false).
* Set custom fields.
* Set custom styles.

Returns

Promise - instance of ICard.

Errors

* If the options or kushkiInstance parameters are null or undefined, then throw error code E012.
* If any field of the options.fields parameter has an incorrect selector, then throw error code E013.
* If the required fields were not set in the token request, then throw error code E020.

Examples

Basic configuration for Card Token

Define the containers for the server-side fields.

Initialize Card Token Instance

To perform a standard card transaction, you must define an amount, currency, and the fields to render. Internally, this method renders server-side fields.

Card token for subscriptions, avoid autocomplete and custom fields.

Container definition in html.

Initialize card token instance

* To perform a subscription token, the isSubscription flag must be true.
* To enable autofill prevention on fields, the preventAutofill flag must be true.

Enabling the OTP field and setting custom styles

Defining containers in html.

Defining custom styles

If you want to apply custom styles to fields from the server-side, the Kushki SDK exposes the styles interface; so you can configure the styles in the following two ways:

* CSS Classes: The CssProperties interface allows you to receive a string, so you can configure a CSS class.
* JSS Object: The CssProperties interface allows you to receive an object, so you can configure custom CSS styles.

Note

You can combine both options; some styles attributes can be CSS classes and others can be an object.

Defining scopes for style attributes

Global scope

* input: It sets styles for all inputs except deferred input.
* label: It sets styles for all input labels except the deferred input.
* container: It sets styles for all input containers except the deferred input.
* focus: It sets styles to indicate the focus of inputs, except for deferred input.
* valid: It sets styles to indicate that the inputs are valid.
* invalid: It sets styles to indicate that inputs are invalid.

Specific input for server-side field

* cardholderName: These styles override the values of the input styles only in the cardholderName input.
* cardNumber: These styles override the values of the input styles only in the cardNumber input.
* expirationDate: These styles override the values of the input styles only in the expirationDate input.
* cvv: These styles override the values of the input styles only in the cvv input.
* otp: These styles override the values of the input styles only in the otp input.
* deferred: These styles override the default styles and set styles for their subcomponents with custom selectors, more.

Custom CSS Class Styles

In a CSS file, define your class or classes.

Define object of styles

Custom styles with JSS

Pseudo-Elements with JSS

Initializing card token instance

To enable the OTP field, you need to define the CardOptions.fields.otp attribute.

Defer field enabled and custom styles for defer input

The deferred field is made up of a checkbox and one or three selectors (the number of selectors rendered will depend on the merchant configuration). Below, please find the selectors available by country:

1 selector:

- Colombia: months
- Chile: months
- Peru: months

3 selectors:

- Mexico: credit, months, and grace months.
- Ecuador: credit, months, and grace months.

The Kushki SDK exposes the following selectors:

Selectors to set custom styles on the defer input

The deferred input has predefined styles that can be modified through this SDK for each element.

Below, please find the description to define each custom selector:

Apply styles to select elements

* &:valid: This selector allows setting styles when an option was selected.
* &:invalid: This selector allows setting styles when no option was selected, and this selection is required.
* &label: This selector allows you to set styles for all selected labels.
* &label:invalid: This selector allows setting styles for all labels when no option was selected, and this selection is required.

Apply styles to checkbox element

* &#ksh-deferred-checkbox: This selector allows you to change the border color, background, box shadow, and more on the checkbox.
* &#ksh-deferred-checkbox:checked: This selector allows you to change the border color, background, box shadow, checkmark color, and more when the checkbox is checked.
* &#ksh-deferred-checkbox>label: This selector allows you to customize the checkbox label.

Apply styles to containers

* &#ksh-deferred-creditType: This selector allows you to change the width, height, and other properties of the credit type container. It is only enabled for merchants in Ecuador and Mexico.
* &#ksh-deferred-months: This selector allows you to change the width, height, and other properties of the months container.
* &#ksh-deferred-graceMonths: This selector allows you to change the width, height, and other properties of the grace months container. It is only enabled for merchants in Ecuador and Mexico.

Initializing card token instance

To enable the field for deferred, you need to define the CardOptions.fields.deferred attribute.

initCardToken

initCardToken method#

Parameters#

Returns#

Errors#

Examples#

Basic configuration for Card Token#

Initialize Card Token Instance#

Card token for subscriptions, avoid autocomplete and custom fields.#

Initialize card token instance#

Enabling the OTP field and setting custom styles#

Defining custom styles#

Defining scopes for style attributes#

Specific input for server-side field#

Custom CSS Class Styles#

Custom styles with JSS#

Pseudo-Elements with JSS#

Initializing card token instance#

Defer field enabled and custom styles for defer input#

Selectors to set custom styles on the defer input#

Apply styles to select elements#

Apply styles to checkbox element#

Apply styles to containers#

Initializing card token instance#

initCardToken method

Parameters

Returns

Errors

Examples

Basic configuration for Card Token

Initialize Card Token Instance

Card token for subscriptions, avoid autocomplete and custom fields.

Initialize card token instance

Enabling the OTP field and setting custom styles

Defining custom styles

Defining scopes for style attributes

Specific input for server-side field

Custom CSS Class Styles

Custom styles with JSS

Pseudo-Elements with JSS

Initializing card token instance

Defer field enabled and custom styles for defer input

Selectors to set custom styles on the defer input

Apply styles to select elements

Apply styles to checkbox element

Apply styles to containers

Initializing card token instance