Aprende cómo crear y utilizar las Kajitas de pagoTen en cuenta que, debido a nuestras políticas de riesgo, los medios de pago disponibles y el tipo de integración pueden variar al momento en que formalices la afiliación. Te indicaremos cómo proceder en caso de que este proceso aplique para tu comercio.
El token generado a través de una Kajita es el primer paso de un proceso de pago, y se refiere a la intención de generar un pago. Esto es diferente a la tokenización, durante la cual se almacenan los datos de pago de un cliente en una bóveda segura y posteriormente se devuelve un token con la información cifrada. En Kushki el token generado durante un proceso de tokenización se llama subscriptionId, y se crea al suscribir una tarjeta, usando la API de Kushki.
2. Haz clic en la opción Configuración, desde el menú lateral izquierdo. Aparecerán varias opciones de configuración para tu comercio.
3. Desde la sección Integraciones, haz clic en Kajita. La ventana Kajita se abre. En caso de tener Kajitas ya creadas, verás el detalle de estas.4. Haz clic en el botón + Crear un nuevo formulario y selecciona el tipo de formulario que deseas crear: Pago único o Subscripciones. Para este ejemplo, seleccionamos la opción de Pago único. La ventana Formulario de prueba se abre. Se abrirá una ventana para configurar tu formulario de pagos.5. En la ventana Formulario de prueba configura de los campos de tus formularios de pago:Alias: Configura el alias de tu Kajita. Ya que tienes la posibilidad de crear más de un formulario, el alias es de ayuda para identificar el formulario y buscarlo desde el resumen de Kajitas creadas.
Opciones de pago: Configura los medios de pago que desees mostrar a tus clientes. En caso de que lo requieras, puedes incluir una ventana de selección de medio de pago en tu formulario. En el caso de formularios de pago para suscripciones, tienes la posibilidad de configurar la periodicidad de los cobros, el número de estos e incluso agregar diferentes planes predefinidos para que el usuario seleccione.
Campos: Configura los campos que se solicitan a los clientes, según los medios de pago seleccionados previamente. Asigna el label y placeholder que ve el cliente cuando complete sus datos.
Configuraciones adicionales: podrás configurar el idioma predeterminado, la moneda (en caso de que haya más de una moneda disponible para tu país) y agregar una Callback URL, en caso de que sea necesario. La callback URL solo aplica para pagos con redirección, es decir, pagos que requieran completarse en un ambiente externo al sitio de tu comercio (ya sea en un banco u otra plataforma). En este sentido, dicha URL será donde los clientes retornarán una vez finalicen el proceso de pago en un sitio externo, en los casos en que sea requerida una redirección.
Si haces algún cambio en las opciones de pago mientras configuras los campos, haz clic en el menú desplegable Elige los campos que irán en el formulario y vuelve a hacer clic en el mismo. Esto con el fin de actualizar los campos a editar según los nuevos medios de pago seleccionados.
6.
Haz clic en el botón Guardar formulario para finalizar. El sistema te dirigirá a la ventana de Configuraciones > Kajita. Desde allí podrás ver el formulario creado y sus detalles.
2.
Haz clic en Configuración, desde el menú lateral izquierdo. La ventana Configuración se despliega, con varias opciones de configuración para tu comercio.
3.
Desde la sección Integraciones, haz clic en Kajita.
La ventana Kajita se abre. En caso de tener Kajitas ya creadas, se muestran los detalles.
4.
Haz clic en el botón de más opciones y a continuación, haz clic en Editar. La ventana de configuración de tu formulario se abre.
5.
Haz clic en la opción Estilo desde la parte superior izquierda de la pantalla. Podrás configurar las siguientes opciones:
Orientación: Configura si tu formulario se muestra de forma horizontal o vertical.
Tema: Configura tu formulario en modo noche (Night) o día (Light). En caso de que cuentes con detección de modo oscuro desde tu aplicación en React, activa la opción Detección automática de modo noche. Plantillas: Configura los estilos de los campos del formulario, asigna un color primario, secundario y un color para los mensajes de error.
Los cambios que realices se muestran en tiempo real en la parte derecha de la pantalla. Estilos adicionales: Configura el estilo del botón de pagos y el texto que aparece en el botón. En Suscripciones, puedes guardarlo para que diga, por ejemplo, Guardar tarjeta o Suscribir.
6.
Haz clic en Guardar formulario para terminar con tus personalizaciones.
¿Cómo integrar una Kajita en tu front-end?#
Para integrar una Kajita de Kushki en tu front-end, sígue los siguientes pasos:1. Importa Kajita#
Incluye el script de kushki-checkout.js en tu página de pago añadiéndolo al <head> de tu archivo HTML. Siempre carga kushki-checkout directamente desde cdn.kushkipagos.com para seguir cumpliendo con el estándar PCI. No incluyas el script en un bundle o paquete ni hostees una copia de él.2. Añade Kajita a tu sitio web#
Kajita necesita un lugar donde vivir en tu página. Ingresa el siguiente código en el <body> de tu sitio donde quieras que se despliegue el formulario de pago.Es importante que especifiques la URL action, que es a donde volverá Kushki con el token generado.Puedes agregar información para identificar la transacción. En este caso se usó cart_id.3. Obtén el script de tu Kajita#
3.1. Desde la Consola de Administración dirígete a Configuración>>Integraciones y haz clic en Kajita. Podrás ver los formularios (Kajitas) disponibles en tu comercio.
3.2. Haz clic en el botón Ver Código. Se abrirá una ventana con el script que corresponda a la Kajita seleccionada.
3.3. Copia el código de la Kajita tal y como se muestra en el siguiente GIF:Desde la pantalla de Configuraciones>>Kajita verás también una opción llamada Modo Producción la cual te permite decidir si deseas pasar tu Kajita a producción. Mientras esta opción permanezca desactivada, tu Kajita no se integrará con el backend para la generación de transacciones reales y se verá un mensaje “Modo Prueba” en la parte superior de tu Kajita.
4. Añade el script de tu Kajita#
Por último añade el script de la Kajita copiado en el paso anterior en el <body> de tu sitio.Recuerda ingresar en el script copiado la publicMerchantId o credencial pública de tu comercio. Puedes obtenerla desde la consola, opción Desarrolladores>>Credenciales.
Recepción del token y procesamiento#
Una vez hayas creado y agregado una Kajita de pago a tu sitio web, cuando un cliente ingrese sus datos personales en tu Kajita, Kushki volverá con la información transformada en un token mediante una llamada POST a la URL indicada en el formulario que se utilizó para iniciar Kajita (la URL indicada en action).{
"authenticity_token": "lY_a952pCnhXZeTyXIYp1JYaFaSWnéLFiANOojCra6L?XO7ZQ7b12yiAvKgtvBepWCaPLyFESokPIRaSRDIw",
"cart_id": "123",
"kushkiToken": "6ce49238fa81427e8b206c9c7aac09d3",
"kushkiPaymentMethod": "card"
}
Datos de pago en cuotas#
Si tu comercio ofrece opciones de pago diferido y el usuario ha seleccionado pagar en cuotas (meses), recibirás parámetros adicionales en la respuesta junto al token. Estos campos indican el número de cuotas y el tipo de diferido seleccionado.A continuación, se muestra un ejemplo de la estructura recibida cuando se seleccionan 4 meses:{
"authenticity_token": "...",
"cart_id": "123",
"kushkiToken": "c1a60f19e250417084aa4f3ee578f090",
"kushkiPaymentMethod": "card",
"kushkiDeferredType": "all",
"kushkiDeferred": "4"
}
Importante: Deberás capturar los valores de kushkiDeferredType y kushkiDeferred y enviarlos dentro del cuerpo de la solicitud al crear el cargo (charge). Puedes ver un ejemplo de cómo estructurar esta petición en nuestra guía de Crear un cargo de tarjeta. Creación del cargo#
Después de recibir el token, es momento de continuar el proceso de pago desde tu back-end. Para ello, deberás invocar el servicio indicado, dependiendo del tipo de pago que quieras realizar.Por ejemplo, en el caso de pagos únicos con tarjeta deberás invocar el servicio /card/v1/charges utilizando el token recibido y confirmando los datos con los que se inició la transacción. Puedes encontrar más información en este endpoint.curl --location --globoff 'https:
"token": "6ced9218fa81437c8b20609C7aac09d1",
"amount": {
"subtotalIva": 0,
"subtotalIva0": 1000,
"ice": 0,
"iva": 0,
"currency": "CLP"
},
"metadata": {
"card_id": "123"
},
"fullResponse": true
}'
