En VTEX, puedes realizar la integración con el proveedor de servicios de pago easypay. A través de este proveedor, tu tienda puede vender utilizando easypay, MB Way y Multibanco.
Para utilizar easypay, debes:
- Instalar la aplicación easypay
- Configurar la aplicación easypay
- Configurar el webhook de easypay
- Configurar la afiliación de easypay
- Configurar el pago con Apple Pay en easypay (opcional)
Si eres marketplace o seller, consulta los artículos Configurar pago con easypay en marketplace 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-easypay.
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, accede a Hub de extensiones > Gestión de aplicaciones, o ingresa Gestión de aplicaciones en la barra de búsqueda en la parte superior de la página.
- Busca 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 (opcional)
- Modo sandbox
Debes realizar la configuración 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 documento como referencia y consulta tu cuenta en el entorno de 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 e 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.
Este campo solo debe rellenarse cuando la tienda es un marketplace y realiza split de pagos. Para más información, consulta el artículo Configurar pago con easypay en marketplaces.
Refund account ID e Refund account key: si no existe una cuenta específica para reembolso, el valor de Key ID deberá rellenarse en el campo Refund account ID, y el valor de Key value en Refund account key.
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
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 > Proveedores, o escribe Proveedores en la barra de búsqueda en la parte superior de la página.
- En la pantalla de proveedores, haga clic en el botón
Nuevo proveedor. - Escriba el nombre easypay en la barra de búsqueda y haga clic en el nombre del proveedor.
- 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.
Configurar el pago con Apple Pay en easypay (opcional)
Para procesar pagos con Apple Pay en easypay, primero debes realizar configuraciones para habilitar tu tienda en el entorno de Apple Pay. Obtenga más información en Setting up Merchant ID in Apple Pay.
Para configurar otros 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.