Kajitas de pago

27 julio 2022

Aprende cómo crear y utilizar las Kajitas de pago

¿Cómo crear un formulario de pagos o Kajita?

Estas son las instrucciones para crear una Kajita de pagos desde la consola y obtener el script que te permitirá implementarla en tu front-end.

1. Ingresa con tus credenciales a https://console.kushkipagos.com/auth si vas a crear una Kajita para un ambiente de producción o a https://uat-console.kushkipagos.com/auth, para usar un ambiente de pruebas.
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, esta será la URL a la que retornarás a tus clientes una vez finalicen el proceso de pagos en algún sitio externo, en los casos en que sea requerida una redirección.

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.

El siguiente video te guiará a través del proceso de creación de un formulario de pago:

Personaliza tu formulario de pagos (Opcional)

Kushki te permite personalizar tus formularios según los estilos de tu compañía. Sigue estos pasos para personalizar aspectos como la orientación del formulario, colores, temas, campos y textos de botones.

1. Ingresa con tus credenciales a https://console.kushkipagos.com/auth o a https://uat-console.kushkipagos.com/auth, para usar un ambiente de pruebas.
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.

• 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.

<head>
  <title>Checkout</title>
  <script src="https://cdn.kushkipagos.com/kushki-checkout.js">       </script>
</head>

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.

<form id="my-form"" action="/confirm" method="post">
    <input type="hidden" name="cart_id" value="123">
</form>

Recuerda configurar la acción del formulario action de acuerdo con el endpoint correspondiente en tu back-end, para obtener el token.

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:

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.

<script type="text/javascript">
var kushki = new KushkiCheckout({
    kformId: "HmJXukKb5",
    form: "my-form",
    publicMerchantId: "${publicCfredentialId}",// Reemplaza esto por tu credencial pública
    amount: {
     subtotalIva: 0,
     iva: 0,
     subtotalIva0: 1000,
     }
    });
</script>