VTEX

VTEX es una plataforma de comercio electrónico que ayuda a los comercio a crear su propio eCommerce y vender sus productos en línea. A través de esta herramienta podrás diseñar tu tienda digital, gestionar productos, recibir órdenes de compra y realizar cobros.

Nuestro conector de pagos te ofrece una solución rápida de integración para empezar a vender sin tener experiencia como desarrollador. Para ello, debes tener una tienda virtual creada en VTEX y tu cuenta habilitada (test o live) en el CulqiPanel.

Nuestro conector de pagos integra por ti nuestro Custom Checkout y nuestra librería Culqi 3DS, con el cual tendrás la posibilidad de realizar cobros con tarjetas de débito y crédito, Yape, PagoEfectivo, billeteras móviles y Cuotéalo con solo unos simples pasos de configuración.

Instalación y activación

Siga los siguientes pasos:

• Instalar VTEX IO CLI, para ello usar la siguiente referencia según tu sistema operativo.

Url: https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-install

• En el terminal ejecutar el siguiente comando para logearte en tu cuenta VTEX.

vtex login

• En el terminal procedemos a instalar el App Culqi Admin y el conector de Culqi.

vtex install culqipartnerpe.culqi-admin-vtex@2.0.0

vtex install culqipartnerpe.culqi-auth-vtex@2.2.0

• Luego ingresa a tu tienda VTEX con tus credenciales.

• En el menu de la izquierda ubicamos la opción App Management, y validamos que la aplicación Culqi y el Culqi Admin se instalaron correctamente.

• Luego, en el buscador de VTEX escribimos “Payment” y seleccionamos “Settings -> Store Settings / Payment”.

• Seleccionamos el tab Gateway Affiliations y damos click en el icono de “+” en el lado derecho.

• Se desplegarán las opciones de pago disponibles, debemos ubicar el conector Culqi y hacer click.

• Hacemos scroll hacia la parte inferior y procedemos a guardar la afiliación.

• Luego seleccionamos el tab Payment Conditions y damos click en el icono de “+” en el lado derecho.

• Se desplegarán los payment conditions disponibles, debemos ubicar Culqi y hacer click.

• Procedemos a ingresar el nombre Culqi, activamos y guardamos.

Configuración de llaves VTEX

A continuación se presenta una imagen de la pantalla de configuración:

Siga los siguientes pasos.

Configuración del comercio

Para acceder a la pantalla de configuración debes buscar en el menú de App de Vtex la opción Culqi Admin.

Login

A continuación se presenta una imagen de la pantalla de configuración donde debes ingresar tu credenciales de tu Culqi Panel:

Configuración

A continuación se presenta una imagen de la pantalla de configuración:

Siga los siguientes pasos.

Pruebas

Antes de activar tu tienda en producción, te recomendamos realizar pruebas de integración. Así garantizarás un correcto despliegue.

Si vas a realizar pruebas en el entorno de integración debes habilitar el modo de prueba(test mode) y configurar tu llave pública de pruebas.

Si vas a empezar a vender desde tu tienda virtual, deberás seleccionar el ambiente de producción e ingresar tu llave de producción.

Configuraciones adicionales

Si deseas personalizar el texto del botón de pago Culqi de tu tienda, te facilitamos códigos de ejemplo.

#payment-group-CulqiPaymentGroup .payment-group-item-text {
  opacity: 0;
}

$(document).ready(function() {
    // Your jQuery code goes here
  $(window).on('orderFormUpdated.vtex', function(event, orderForm) {
    //obtener elemento
    const paymenttext = $(".payment-group-list-btn")
    .find("#payment-group-CulqiPaymentGroup")
    .find("span");
    
    //Reemplazar texto
    paymenttext.text("Culqi (PLIN)");
    
    //Mostrar texto
    paymenttext.css("opacity", "1");
    
    //Reemplazar imagen como background
    paymenttext.css("background-image", "url(https://io2.vtex.com/checkout-ui/v6.100.0/img/culqi/culqi-logo.svg)");
    
    //agregar imagen
    paymenttext.append("<img src='https://io2.vtex.com/checkout-ui/v6.100.0/img/culqi/culqi-logo.svg' />");
    //distancia de la imagen respecto al texto
    paymenttext.find('img').css("margin-left", "8px");
    
    //tamaño de la imagen
    paymenttext.find('img').css("height", "16px");
    
  });
});