VTEX
  • 24 Feb 2022
  • 3 Minutes to read
  • Contributors
  • Dark
    Light

VTEX

  • Dark
    Light

Article Summary

VTEX es una plataforma de comercio digital que permite a los comercios crear una tienda eCommerce, unificar sus canales de ventas, integrar alianzas con soluciones de externos y procesadores de pago.

La integración VTEX - ePayco permite a los comercios que cuentan con una tienda en la plataforma Vtex, recibir pagos mediante el conector ePayco, permitiendo disfrutar de los beneficios de la pasarela de una manera fácil y segura.

¿Qué es un conector en Vtex?

Los conectores son protocolos de comunicación que la tienda Vtex requiere habilitar para la transmisión de datos entre ella y un proveedor de pagos, es decir,  si una tienda VTEX desea ofrecer un medio de pago a sus clientes, necesitará activar el conector que se comunicará con el responsable del procesamiento.

¿Cómo integrarse al conector de ePayco en Vtex?

1.  El comercio debe ingresar a su cuenta Admin Vtex.

2.  En el menú “Transacciones” debe seleccionar la opción de configuración.

3.  Seleccione la opción “Afiliaciones de Gateway” y haga clic en el icono + .

4.  Seleccione el conector de pago ePayco

5.  Asigne un nombre a la afiliación e ingrese las llaves de su comercio. 

¿Cómo configurar el medio pago Tarjeta de crédito?

ePayco es un conector nativo en Vtex, lo cual le permite habilitar en la tienda las principales franquicias en Tarjeta de Credito que desee configurar como medio de pago. La integración Vtex – ePayco soporta las siguientes franquicias (estas pueden variar si su modo de integración es Gateway):

Pasos para configurar el medio de pago TC (Tarjeta de Credito) usando el conector de ePayco:

1. Seleccione “Condiciones de pago” y haga clic en el ícono +. 

2. Seleccione la franquicia de Tarjeta de Crédito que desea configurar con el conector ePayco.

3. Seleccione la afiliación creada y configure las condiciones de la tarjeta de crédito.

En el siguiente enlace encontrará mayor detalle sobre cómo configurar una condición de pago: https://help.vtex.com/tutorial/como-configurar-condiciones-de-pago

- Las condiciones de pagos creadas, quedarán organizadas por franquicias:

La configuración del medio de pago TC se visualizará en la sección “Condiciones de Pagos” organizadas por franquicias, se debe tener activa una sola condición por cada franquicia.

¿Cómo configurar el medio pago PSE?

Teniendo en cuenta que Vtex no tiene habilitado PSE de manera directa, la integración de este medio de pago se debe realizar mediante la opción “Pagos personalizados”, la cual permite redireccionar al cliente pagador a landing de ePayco y luego a la plataforma de PSE en ACH Colombia.

Pasos para configurar el medio de pago PSE usando el conector de ePayco:

1. Seleccione la opción configuración.

2. Seleccione “Pagos Personalizados”.

3. Seleccione “Configurar”.

4. Personalice los datos del pago personalizado. Debe colocar la palabra PSE en mayúscula ya que permite identificar en la integración el medio de pago.

5. Asigne un nombre al pago personalizado y seleccione la afiliación.

La configuración del medio de pago PSE se visualizará la sección “Condiciones de Pagos - Promissories”, se debe tener activa una sola condición activa.

Personalizar script para mostrar el logo de PSE en el Checkout de la tienda Vtex

Para mostrar el logo de PSE en el checkout debe insertar un script, tenga en cuenta los siguientes pasos:

1. En la configuración de la tienda seleccionar la opción Checkout.

2. Seleccionar el engranaje azul.

3. Seleccione la opción código

4. Seleccione "Checkout6-custom.css"

5. Inserte el script y haga clic en guardar.

Debe insertar el siguiente Script:

#payment-group-custom20XPaymentGroupPaymentGroup {
background-image: url('https://multimedia.epayco.co/dashboard/cards/PSE.png');
background-position: right 20px center;
background-repeat: no-repeat;
background-size: 45px
}

Ajustar parámetro #payment-group en el script

Para que se visualice el logo de PSE en el Checkout, teniendo en cuenta la condición de pago PSE activada, en el parámetro del script: #payment-group-custom20XPaymentGroupPaymentGroupdebe reemplazar la X por el numero la posición de la condición que desea activar.


Ejemplo: Si la condición de pago personalizada, para configurar PSE se encuentra en la posición 3 de 5, como se visualiza en la imagen, el parámetro debe colocarse así: #payment-group-custom203PaymentGroupPaymentGroup.

¿Cómo realizar una compra en una tienda Vtex?

1. Seleccione el producto y la referencia deseada.

2. Diligencie los datos de la entrega.

3.  Seleccione y diligencie los datos del medio de pago seleccionado en el Checkout.

4. La transacción se procesará y se confirmará el pedido.

  • La confirmación de la transacción llegará al usuario pagador al correo electrónico.
  • La confirmación de la transacción la podrá visualizar el comercio en las dos plataformas:  Cuenta  Vtex - Transacciones y Dashboard ePayco - Reportes de  transacciones.



Was this article helpful?

What's Next