Método initCardToken

Función para iniciar una instancia de ICard.

Parámetros

* KushkiInstance: IKushki
* options: CardOptions

Debes definir la configuración de los campos de la tarjeta

* Define el amount de la transacción.
* Define la currency de la transacción.
* Si la transacción es una suscripción (el valor por defecto es false).
* Si quieres evitar el autocompletado de los campos (el valor por defecto es false).
* Define fields personalizados.
* Define styles personalizados.

Devuelve

Promise - instance of ICard.

Errores

* Si los parámetros options o kushkiInstance son null o undefined, se lanza el código de error E012.
* Si algún campo del parámetro options.fields tiene un selector incorrecto, se lanza el código de error E013.
* Si los campos requeridos no se definieron en la solicitud del token, se lanza el código de error E020.

Ejemplos

Configuración básica de Card Token

Define los contenedores de los campos del lado del servidor.

Inicializar la instancia de Card Token

Para hacer una transacción de tarjeta estándar, debes definir un monto, una moneda y los campos que se renderizan. Internamente, este método renderiza los campos del lado del servidor.

Token de tarjeta para suscripciones, evitar el autocompletado y campos personalizados.

Container definition in html.

Inicializar la instancia de token de tarjeta

* Para generar un token de suscripción, la bandera isSubscription debe ser true.
* Para activar la prevención de autocompletado en los campos, la bandera preventAutofill debe ser true.

Activar el campo OTP y definir estilos personalizados

Defining containers in html.

Definir estilos personalizados

Si quieres aplicar estilos personalizados a los campos del lado del servidor, el SDK de Kushki expone la interfaz styles; así puedes configurar los estilos de estas dos maneras:

* Clases CSS: La interfaz CssProperties permite recibir un string, así puedes configurar una clase CSS.
* Objeto JSS: La interfaz CssProperties permite recibir un objeto, así puedes configurar estilos CSS personalizados.

Nota

Puedes combinar las dos opciones; algunos atributos de styles pueden ser clases CSS y otros un objeto.

Definir ámbitos para los atributos de estilo

Ámbito global

* input: Define estilos para todos los inputs excepto el input de diferido.
* label: Define estilos para todas las etiquetas de los inputs excepto la del input de diferido.
* container: Define estilos para todos los contenedores de los inputs excepto el del input de diferido.
* focus: Define estilos para indicar el foco de los inputs, excepto el del input de diferido.
* valid: Define estilos para indicar que los inputs son válidos.
* invalid: Define estilos para indicar que los inputs son inválidos.

Input específico de un campo del lado del servidor

* cardholderName: Estos estilos sobrescriben los valores de los estilos del input solo en el input cardholderName.
* cardNumber: Estos estilos sobrescriben los valores de los estilos del input solo en el input cardNumber.
* expirationDate: Estos estilos sobrescriben los valores de los estilos del input solo en el input expirationDate.
* cvv: Estos estilos sobrescriben los valores de los estilos del input solo en el input cvv.
* otp: Estos estilos sobrescriben los valores de los estilos del input solo en el input otp.
* deferred: Estos estilos sobrescriben los estilos por defecto y definen los estilos de sus subcomponentes con selectores personalizados, más.

Estilos con clases CSS personalizadas

En un archivo CSS, define tu clase o tus clases.

Define object of styles

Estilos personalizados con JSS

Pseudoelementos con JSS

Inicialización de la instancia de token de tarjeta

Para activar el campo OTP, debes definir el atributo CardOptions.fields.otp.

Campo de diferido activado y estilos personalizados para el input de diferido

El campo de diferido está compuesto por un checkbox y uno o tres selectores (la cantidad de selectores que se renderizan depende de la configuración del comercio). A continuación, encuentra los selectores disponibles por país:

1 selector:

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

3 selectors:

- México: crédito, meses y meses de gracia.
- Ecuador: crédito, meses y meses de gracia.

El SDK de Kushki expone los siguientes selectores:

Selectores para definir estilos personalizados en el input de diferido

El input de diferido tiene estilos predefinidos que puedes modificar para cada elemento con este SDK.

A continuación, encuentra la descripción para definir cada selector personalizado:

Aplicar estilos a los elementos select

* &:valid: Este selector permite definir estilos cuando se seleccionó una opción.
* &:invalid: Este selector permite definir estilos cuando no se seleccionó ninguna opción y esa selección es obligatoria.
* &label: Este selector permite definir estilos para todas las etiquetas seleccionadas.
* &label:invalid: Este selector permite definir estilos para todas las etiquetas cuando no se seleccionó ninguna opción y esa selección es obligatoria.

Aplicar estilos al elemento checkbox

* &#ksh-deferred-checkbox: Este selector permite cambiar el color del borde, el fondo, la sombra y más en el checkbox.
* &#ksh-deferred-checkbox:checked: Este selector permite cambiar el color del borde, el fondo, la sombra, el color de la marca de verificación y más cuando el checkbox está marcado.
* &#ksh-deferred-checkbox>label: Este selector permite personalizar la etiqueta del checkbox.

Aplicar estilos a los contenedores

* &#ksh-deferred-creditType: Este selector permite cambiar el ancho, el alto y otras propiedades del contenedor de credit type. Solo está habilitado para comercios de Ecuador y México.
* &#ksh-deferred-months: Este selector permite cambiar el ancho, el alto y otras propiedades del contenedor de months.
* &#ksh-deferred-graceMonths: Este selector permite cambiar el ancho, el alto y otras propiedades del contenedor de grace months. Solo está habilitado para comercios de Ecuador y México.

Inicialización de la instancia de token de tarjeta

Para activar el campo de diferido, debes definir el atributo CardOptions.fields.deferred.

Parámetros#

Devuelve#

Errores#

Ejemplos#

Configuración básica de Card Token#

Inicializar la instancia de Card Token#

Token de tarjeta para suscripciones, evitar el autocompletado y campos personalizados.#

Inicializar la instancia de token de tarjeta#

Activar el campo OTP y definir estilos personalizados#

Definir estilos personalizados#

Definir ámbitos para los atributos de estilo#

Input específico de un campo del lado del servidor#

Estilos con clases CSS personalizadas#

Estilos personalizados con JSS#

Pseudoelementos con JSS#

Inicialización de la instancia de token de tarjeta#

Campo de diferido activado y estilos personalizados para el input de diferido#

Selectores para definir estilos personalizados en el input de diferido#

Aplicar estilos a los elementos select#

Aplicar estilos al elemento checkbox#

Aplicar estilos a los contenedores#

Inicialización de la instancia de token de tarjeta#

Parámetros

Devuelve

Errores

Ejemplos

Configuración básica de Card Token

Inicializar la instancia de Card Token

Token de tarjeta para suscripciones, evitar el autocompletado y campos personalizados.

Inicializar la instancia de token de tarjeta

Activar el campo OTP y definir estilos personalizados

Definir estilos personalizados

Definir ámbitos para los atributos de estilo

Input específico de un campo del lado del servidor

Estilos con clases CSS personalizadas

Estilos personalizados con JSS

Pseudoelementos con JSS

Inicialización de la instancia de token de tarjeta

Campo de diferido activado y estilos personalizados para el input de diferido

Selectores para definir estilos personalizados en el input de diferido

Aplicar estilos a los elementos select

Aplicar estilos al elemento checkbox

Aplicar estilos a los contenedores

Inicialización de la instancia de token de tarjeta