VTEX

Realiza cargos fácilmente con nuestros plugins sin invertir tiempo en desarrollo.

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");
	});
});