Skip to content

VTEX IO

Jump to bottom
gabrielabustos edited this page Nov 26, 2024 · 10 revisions

Kueski Pay es un método de pago donde tienes la opción de comprar ahora y pagar después en cómodas quincenas, sin la necesidad de tener una tarjeta de crédito.

Para ofrecer Kueski Pay en tu comercio debes configurar el método de pago, en esta guía te diremos como.

Important

Recuerda que para poder utilizar Kueski Pay como medio de pago, es necesario que estés afiliado como comercio de Kueski Pay. Si aún no lo has hecho, da click en este enlace.

Antes de iniciar

Los requisitos para instalar el método de pago Kueski Pay en VTEX IO son los siguientes:

  • Tener acceso a VTEX IO CLI.
  • Tener una cuenta de Google con acceso a Google Tag Manager.

Tip

Tener a la mano la llave API KEY proporcionada por el equipo de Kueski, ya que serán solicitada durante la sección Configurar proveedor Kueski Pay.

Configurar método de pago de Kueski Pay

Los siguientes pasos a seguir son necesarios para configurar Kueski Pay en tu plataforma de VTEX IO y poder hacer uso de su método de pago.

Crear rol Kueski Pay

  1. Ingresar a tu panel de administración de VTEX IO.

  2. En el menú del lado derecho, seguir el siguiente flujo ACCOUNT SETTINGS -> Configuración de la cuenta -> Roles de usuario.

    Imagen 1. Ejemplo paso 2

    Imagen 1. Ejemplo paso 2

  3. Dar click al botón Nuevo rol.

  4. Llenar los campos con la siguiente información:

    • Seleccionar rol: Custom
    • Nombre del rol: Kueski Pay
    Imagen 2. Ejemplo paso 4

    Imagen 2. Ejemplo paso 4

  5. En la sección Productos y recursos activa las siguientes funcionalidades por producto:

    Imagen 3. Ejemplo paso 5

    Imagen 3. Ejemplo paso 5

Warning

Marca solo las casillas mostradas en la Imagen 3, ya que de haber una configuración diferente, causará errores en el funcionamiento de Kueski Pay.

  1. Dar click al botón Guardar ubicado en la parte inferior.

Generar clave y token de aplicación

  1. En el menú del lado derecho, sigue el siguiente flujo ACCOUNT SETTINGS -> Configuración de la cuenta -> Claves de aplicación.

    Imagen 1. Ejemplo paso 1

    Imagen 1. Ejemplo paso 1

  2. Dar click al botón ADMINISTRAR MIS CLAVES.

  3. Dar click al botón GENERAR NUEVA.

  4. Escribir la palabra Kueski Pay en el campo Etiqueta.

  5. Dar click al botón Agregar ROLES.
    Seleccionar y agregar el rol Kueski Pay.

  6. Dar click al botón GENERAR.

    Imagen 2. Ejemplo pasos 4,5 y 6

    Imagen 2. Ejemplo pasos 4,5 y 6

  7. Guardar la Clave de aplicación y el Token de aplicación que se acaban de generar en un lugar seguro, ya que serán usados más adelante.

    Imagen 3. Ejemplo paso 7

    Imagen 3. Ejemplo paso 7

Warning

No se podrá acceder al Token de aplicación una vez cerrada la ventana. En caso de no haberlo guardado, será necesario repetir la sección Generar clave y token de aplicación.

Configurar proveedor Kueski Pay

  1. En el menú del lado izquierdo, sigue el siguiente flujo: Configuración de la tienda -> PAGO -> Proveedores.

  2. Dar click al botón Nuevo proveedor.

    Imagen 1. Ejemplo paso 1 y 2

    Imagen 1. Ejemplo paso 1 y 2

  3. Escribir la palabra kueski en la barra de búsqueda.
    Seleccionar la opción KueskiPay.

    Imagen 2. Ejemplo paso 3

    Imagen 2. Ejemplo paso 3

  4. Llenar los campos con la siguiente información:

    • Clave de aplicación:
      • Ambiente de Producción: prod_{{Clave de aplicación}}_{{API KEY Producción}}
        Ejemplo: prod_vtexappkey-kueskipaypartnermx-RGJLWD_1721a39a-37b4-4551-09-6478e0527g87
      • Ambiente de Sandbox: sandbox_{{Clave de aplicación}}_{{API KEY Sandbox}}
        Ejemplo: sandbox_vtexappkey-kueskipaypartnermx-RGJLWD_9be341br-49c1-4e32-8ga7-e2e8007f9048
    • Token de aplicación: Token de aplicación
    • Nombre: KueskiPay
    • Activar modo de pruebas:
      • Ambiente de Producción: 🔲
      • Ambiente de Sandbox: ✅

  5. Dar click al botón Guardar.

    Imagen 3. Ejemplo paso 4 y 5

    Imagen 3. Ejemplo paso 4 y 5

Warning

En caso de Activar modo de pruebas deberá de configurar la Clave de aplicación en el Ambiente de Sandbox.

Configurar pago personalizado Kueski Pay

  1. En el menú del lado izquierdo, seguir el siguiente flujo: Configuración de la tienda -> PAGO -> Configuración.

  2. Dar click a la pestaña Pagos personalizados.

  3. En la sección Pagarés, dar click al primer cuadro Configurar.

    Imagen 1. Ejemplo pasos 1,2 y 3

    Imagen 1. Ejemplo pasos 1,2 y 3

  4. Llenar los campos con la siguiente información:

    • Nombre: KUESKI
    • Descripción: Método de pago con Kueski Pay
    • Validez del pagaré: 3
    • Autorización automática: No
    • Modificar margen: 0
    • Activar split de pago: No
    • Facturación automática: 15

  5. Dar click al botón Guardar.

    Imagen 2. Ejemplo paso 4

    Imagen 2. Ejemplo paso 4

Warning

El campo Nombre debe de ser KUESKI, si se pone otro nombre se generará un error.
En caso de necesitar algún cambio en otro campo de la configuración, es necesario confirmar personal de Kueski que proporcionó esta guía de instalación, ya que de haber una configuración diferente, causará errores en el funcionamiento de Kueski Pay.

Configurar condición de pago Kueski Pay

  1. En el menú del lado izquierdo, seguir el siguiente flujo: Configuración de la tienda -> PAGO -> Configuración.

  2. Dar click a la pestaña Condiciones de pago.

  3. Dar click en el botón Agregar.

    Imagen 1. Ejemplo pasos 1, 2 y 3

    Imagen 1. Ejemplo pasos 1, 2 y 3

  4. En la sección PAGO PERSONALIZADO, dar click a la opción KUESKI.

    Imagen 1. Ejemplo paso 4

    Imagen 1. Ejemplo paso 4

  5. Llenar los campos con la siguiente información:

    • Nombre de la condición: Kueski Pay
    • Status: Activo
    • Procesar con proveedor: KueskiPay

  6. Dar click en el botón Guardar.

    Imagen 3. Ejemplo pasos 5 y 6

    Imagen 3. Ejemplo pasos 5 y 6

Important

El método de pago de Kueski Pay puede tardar hasta 10 minutos en mostrarse en el checkout.

  1. Guarda el ID de Condiciones de Pago, ya que será requerido más adelante.

    Imagen 3. Ejemplo paso 7

    Imagen 3. Ejemplo paso 7

🎉 El método de pago de Kueski Pay ya está configurado y listo para usar en el comercio.

Personalizar Kueski Pay en el checkout

  1. Ingresar a tu cuenta de Google Tag Manager

  2. Seleccionar el contenedor.

  3. En la sección Espacio de trabajo, dar click a la opción Añadir nueva etiqueta.

    Imagen 1. Ejemplo paso 3

    Imagen 1. Ejemplo paso 3

  4. Escribir la palabra Kueski Pay en el campo Etiqueta sin título.

  5. Dar click a la sección Configuración de la etiqueta.
    Se mostrará un menú del lado derecho, dar click a la opción HTML personalizado.

    Imagen 2. Ejemplo pasos 4 y 5

    Imagen 2. Ejemplo pasos 4 y 5

  6. Pegar el siguiente código en el campo HTML.

    <script type="text/javascript" id='kpay-advertising-script' src="https://cdn.kueskipay.com/widgets.js?authorization=API-KEY&sandbox=false&integration=vtex"></script>
<script type="text/javascript">
  new KueskipayAdvertising({
    paymentConditionsId: 201,
  }).init();
</script>

  7. Reemplazar en el código los siguientes valores:

    • authorization API-KEY

    • sandbox false

      Define el ambiente correspondiente al valor API-KEY, puedes elegir entre false y true.
      Consulta con el equipo de Kueski si el API-KEY proporcionado está en modo sandbox.

    • paymentConditionsId 201

      Corresponde al ID de Condiciones de Pago asignado al método KUESKI.
      Consulta este valor en la sección Configurar condición de pago Kueski Pay, paso 7.

      Imagen 3. Ejemplo pasos 6 y 7

      Imagen 3. Ejemplo pasos 6 y 7

  8. Dar click a la sección Activación.
    Se mostrará un menú del lado derecho, dar click al botón ➕ ubicado en la esquina superior derecha.

    Imagen 4. Ejemplo paso 8

    Imagen 4. Ejemplo paso 8

  9. Escribir la palabra Activador Kueski Pay en el campo Activador sin título.

  10. Dar click a la sección Configuración del activador.
    Se mostrará un menú del lado derecho, dar click a la opción Evento personalizado.

    Imagen 5. Ejemplo pasos 9 y 19

    Imagen 5. Ejemplo pasos 9 y 10

  11. Llenar los campos con la siguiente información:

    • Nombre del evento: .*
      • ☑️Utilizar una expresión regular que coincida con
    • Este activador se activa en: Algunos eventos personalizados
    • Ejecute este activador cuando tenga lugar un evento y se cumplan todas las condiciones:
      • Event
      • contiene
      • payment

  12. Dar click al botón Guardar.

    Imagen 6. Ejemplo pasos 11 y 12

    Imagen 6. Ejemplo pasos 11 y 12

  13. Dar click al botón Guardar ubicado en la parte superior.

  14. Publicar los cambios efectuados.
    Dar click al botón Enviar

    Imagen 7. Ejemplo paso 14

    Imagen 7. Ejemplo paso 14

🎉 Kueski Pay ya es visible en el checkout.

Instalar widget de Kueski Pay

Los siguientes pasos a seguir son necesarios para instalar el widget de Kueski Pay en tu plataforma de VTEX IO, para que sea visible en la página de producto.

  1. Iniciar sesión en VTEX IO CLI

  2. Instalar la aplicación Kueski Pay Widget con el siguiente comando:

    vtex install kueskipaypartnermx.kueskipaywidget@2.0.0

  3. En el menú del lado derecho, seguir el siguiente flujo Apps -> Gestión de aplicaciones -> Instaladas

  4. Dar click al botón Configuración, en la aplicación Kueski widget.

    Imagen 1. Ejemplo paso 3 y 4

    Imagen 2. Ejemplo paso 3 y 4

  5. Llenar los campos con la siguiente información:

    • Kueski Pay Public-API-KEY: {{API KEY}}
    • Environment: Productivo

      Esta opción es para definir el ambiente correspondiente al valor {{API KEY}}, puedes elegir entre Productivo y Pruebas.
      Consulta con el equipo de Kueski si el API-KEY proporcionado está en modo productivo.

    • Text Align: left

      Esta opción es para definir la orientación del texto del widget Kueski Pay, puedes elegir entre left, center y right. El valor por default es left.

  6. Dar click al botón Guardar.

    Imagen 2. Ejemplo paso 5 y 6

    Imagen 2. Ejemplo paso 5 y 6

  7. Invocar el bloque kueski-widget-v2 en la página de producto.

    Imagen 3. Ejemplo paso 7

    Imagen 3. Ejemplo paso 7

  8. Guardar los cambios.

✅ El widget Kueski Pay ya es visible con la configuración seleccionada.

Installation Guides

Clone this wiki locally