En VTEX, puedes realizar la integración con el proveedor de servicios de pago easypay. A través de este conector, tu tienda puede vender utilizando easypay, MB Way y Multibanco.
Para utilizar la afiliación easypay, debes:
- Instalar la aplicación easypay
- Configurar la aplicación easypay
- Configurar el webhook de easypay
- Configurar la afiliación de easypay
Si tu tienda no es un marketplace, consulta los artículos Configurar pago con easypay o Configurar pago con easypay seller account.
Instalar la aplicación easypay
Para instalar la aplicación easypay, sigue los pasos que se indican a continuación:
- En VTEX IO CLI, ejecuta el comando
vtex login nombredelacuentapara iniciar sesión. - Instala la aplicación easypay ingresando el comando
vtex install easypaypartnerpt.payment-provider-easypaycommand.
Configurar la aplicación easypay
Una vez instalada la aplicación easypay, debes configurarla. Para acceder a la pantalla de configuración, sigue estos pasos:
- En el Admin VTEX, ve a Hub de extensiones > Gestión de aplicaciones, o ingresa Gestión de aplicaciones en la barra de búsqueda de la parte superior de la página.
- Localiza la aplicación Easypay Payment Provider y haz clic en Configuración.
La información de configuración se divide en cuatro secciones:
- Credenciales de easypay (obligatorio)
- Pago (obligatorio)
- Personalización del checkout de easypay (required)
- Modo sandbox
La configuración debes realizarla en el entorno easypay. El control de estas configuraciones es responsabilidad de easypay, por lo tanto, VTEX no garantiza que los pasos a continuación estén siempre actualizados. Utiliza este artículo como referencia y consulta tu cuenta en el entorno easypay para obtener información actualizada.
Credenciales de easypay
La información solicitada en esta sección es obligatoria:
Key ID y Key Value: valor y ID de la clave easypay.
Merchant account UID: identificación de la cuenta del comerciante en la que se abonarán los valores de la compra de productos adquiridos en la tienda. Si no dispones de una cuenta comerciante independiente, puedes utilizar el "Account UID" de la cuenta donde recibirás los pagos.
Margin account UID: identificación de la cuenta de margen.
- En el menú lateral del entorno easypay, haz clic en Beneficiary.
- Copia la información y guarda la información del Account UID disponible en Margin Account.
Refund account ID y Refund account key: ID y valor de la clave de la cuenta de reembolsos de easypay.
Los reembolsos se cargan directamente a una cuenta perteneciente al marketplace. Posteriormente, el marketplace debe solicitar al seller el valor reembolsado.
Pago
En esta sección, debes indicar si tu tienda utilizará pagos asíncronos, síncronos o ambos. Accede a la documentación de easypay para consultar los medios de pagos disponibles y sus respectivas siglas de identificación.
Tipos de pago asíncronos aceptados: medios de pago asíncronos disponibles para el cliente. Ingresa solamente las siglas de los tipos de asíncronos, separadas por comas, sin puntos ni espacios.
Ejemplo:
| Correcto | Incorrecto |
|---|---|
| mb,dd,vi | mb, dd, vi |
Si se rellena este campo, también será obligatorio rellenar el campo Días para que expiren los pagos asíncronos.
Tipos de pago síncronos aceptados: medios de pago síncronos disponibles para el cliente. Ingresa solamente las siglas de los tipos de pago síncronos, separados por comas, sin puntos ni espacios.
Ejemplo:
| Correcto | Incorrecto |
|---|---|
| cc,mbw | cc, mbw |
Días de expiración de los pagos asíncronos: tiempo de vencimiento (en días) de los pagos asíncronos. Ingresa solo el número de días deseados.
Ejemplo:
| Correcto | Incorrecto |
|---|---|
| 10 | 10 días, Dic o 10/05/2023 |
Personalización del checkout de easypay
easypay tiene un diseño de checkout nativo configurado en la aplicación, como se muestra a continuación:
Si deseas realizar algún tipo de personalización en el checkout nativo de easypay, rellena uno o más campos de esta sección:
- Checkout logo URL: ogotipo que debe mostrarse en el checkout de easypay. Ingresa el link con la dirección de la imagen que deseas utilizar.
- Checkout background color: color del fondo. Ingresa el código HEX del color deseado. Predeterminado nativo: #ffffff.
- Checkout accent color: color de los elementos destacados, botones predeterminados y bordes de los inputs. Ingresa el código HEX del color deseado. Predeterminado nativo: #0d71f9.
- Checkout error color: color de los mensajes de error. Ingresa el código HEX del color deseado. Predeterminado nativo: #ff151f.
- Checkout input background color: color de fondo de los inputs. Ingresa el código HEX del color deseado. Predeterminado nativo: transparente.
- Checkout input border color: color del borde de los inputs. Ingresa el código HEX del color deseado. Predeterminado nativo: el mismo color utilizado en accent color.
- Checkout input border radius: permite definir el redondeado de los bordes de los inputs. Ingresa el valor deseado en píxeles (solo números). Predeterminado nativo: 50 píxeles.
Ejemplo:
| Correcto | Incorrecto |
|---|---|
| 35 | 35px |
- Checkout button background color: color de fondo de los botones. Ingresa el código HEX del color deseado. Predeterminado nativo: el mismo color utilizado en accent color.
- Checkout button border radius: permite definir el redondeado de los bordes de los botones. Ingresa el valor deseado en píxeles (solo números). Predeterminado nativo: 50 píxeles.
Ejemplo:
| Correcto | Incorrecto |
|---|---|
| 30 | 30px |
-
Checkout button box shadow: opción que permite activar o desactivar la sombra de los botones.
-
Checkout font family: fuentes utilizadas en textos. Ingresa el generic family name, web safe font o link de la fuente. Predeterminado nativo: Overpass. Ejemplo correcto: sans-serif, verdana, ou https://fonts.gstatic.com/s/overpass/v12/qFda35WCmI96Ajtm83upeyoaX6QPnlo6_PPbM5qKl8Kuo8AzesE.woff2
-
Checkout base font size: permite definir el tamaño de la fuente en el elemento raíz. Ingresa el valor deseado en píxeles (solo números). Predeterminado nativo: 10 píxeles.
Ejemplo:
| Correcto | Incorrecto |
|---|---|
| 11 | 11px |
No utilices fuentes de más de 12 píxeles, ya que pueden distorsionar la visualización del layout.
Modo Sandbox
Para activar el entorno de pruebas de desarrollo, selecciona la opción Enable sandbox mode. Debes utilizar credenciales de prueba.
Una vez rellenados los campos de configuración, haz clic en Save.
Configurar el webhook de easypay
Para configurar el webhook de easypay, sigue los pasos que se indican a continuación:
https://{nombre-de-tu-cuenta}.myvtex.com/_v/easypaypartnerpt.payment-provider-easypay/webhook
Si tu marketplace tiene más de una cuenta de pago, agrega un link para cada una de las cuentas existentes.
Configurar la afiliación easypay
Para configurar la afiliación easypay, sigue los pasos a continuación:
- En el Admin VTEX, accede a Configuración de la tienda > Pago > Configuración, o ingresa Configuración en la barra de búsqueda en la parte superior de la página.
- En la pestaña Afiliaciones de Gateway, haz clic en el botón
+. - Haz clic en el conector easypay.
- Rellena los campos Application Key y Application Token con los datos de tu cuenta easypay.
- En Captura automática de pago, selecciona la opción Utiliza el comportamiento recomendado por el procesador de pagos.
- En ¿Activar split y enviar receptores?, selecciona la opción Sí.
- Haz clic en
Guardar.
Para configurar los medios de pago que easypay procesará, accede a Configurar condiciones de pago.
Para establecer condiciones especiales en los medios de pago, accede a Configurar condiciones especiales de pago.
as seguir los pasos indicados, el conector easypay puede demorar hasta 10 minutos en aparecer en el checkout de tu tienda como medio de pago.