adyen web
6.5.1
Adyen Web le proporciona los elementos básicos para crear una experiencia de pago para sus compradores, permitiéndoles pagar utilizando el método de pago de su elección.
Puedes integrarte con Adyen Web de dos maneras:
| Versión principal | Estado | En desuso | Fin de vida |
|---|---|---|---|
| 6.xx | Activo | --- | --- |
| 5.xx | Inactivo | por confirmar | por confirmar |
| 4.xx | Inactivo | por confirmar | por confirmar |
| 3.xx | En desuso | octubre 2024 | octubre 2025 |
Puede encontrar más información sobre nuestro control de versiones y el ciclo de vida de Drop-in/Components aquí
Solo brindamos soporte completo cuando utiliza uno de estos métodos de instalación.
npm install @adyen/adyen-web --save import { AdyenCheckout } from '@adyen/adyen-web' ;
import '@adyen/adyen-web/styles/adyen.css' ;<script> También puede importar Adyen Web usando una etiqueta <script> , como se muestra en la guía de integración de componentes web.
Requisitos:
Para ejecutar el entorno:
.env en la carpeta raíz de su proyecto siguiendo el ejemplo en env.default y complete las variables de entorno.yarn installyarn buildyarn startIncluimos localizaciones de UI para muchos idiomas. Puedes consultar los idiomas y sus respectivas traducciones aquí. Además, es posible personalizar la traducción actual reemplazando el texto predeterminado con su propio texto en caso de que así lo desee.
Adyen Web tiene temas y utiliza variables CSS que se pueden anular para lograr el estilo deseado.
Para los elementos que no están dentro de iframes, puede personalizar los estilos anulándolos en un archivo css. La mayoría de nuestros estilos se definen con variables CSS con valores predeterminados. Para anular esos estilos, puede inspeccionar el DOM y cambiar el valor de las variables CSS ya sea en el nivel raíz o apuntando a elementos específicos. Tenga en cuenta que si cambia los valores de las variables CSS en el nivel raíz, también está cambiando los estilos de todos los elementos secundarios que utilizan las mismas variables CSS.
Cree override.css con las variables a las que le gustaría aplicar estilo.
: root {
--adyen-sdk-color-background-secondary : # f7f7f8 ;
} Asegúrese de importar override.css después de importar el CSS principal de la biblioteca
import '@adyen/adyen-web/styles/adyen.css' ;
import './override.css' ; | variable css | Valor predeterminado | Alcance |
|---|---|---|
--adyen-sdk-color-label-primary | #00112c | - Color de las etiquetas dentro de los formularios de pago, como instrucciones del formulario, etiquetas de campos del formulario y textos contextuales/de ayuda. - Color del título del conjunto de campos - Color del texto del campo de entrada - Encabezado del método de pago directo, encabezado del método de pago del pedido, color del texto de estado predeterminado. - Color del texto del botón Editar Bacs - Color de texto de introducción para transferencia bancaria, vales, Blik - Color del texto del estado de la donación, color de fondo de la campaña. - UPI, ANCV, Blik, MBWay esperan el color del texto del contenedor - Color de texto secundario de los botones fantasma. - Color de la etiqueta de la casilla de verificación (Consentimiento) |
--adyen-sdk-color-label-secondary | #5c687c | - Color de etiqueta para la información adicional en el encabezado del método de pago directo. - Color de la etiqueta de descargo de responsabilidad. - Color de la etiqueta de cuenta regresiva QR. - Seleccionar e ingresar color de solo lectura. |
--adyen-sdk-color-label-tertiary | #8d95a3 | - Color de etiqueta para las etiquetas de clic para pagar. |
--adyen-sdk-color-label-disabled | #8d95a3 | - Color de etiqueta para el botón de cierre de sesión Haga clic para pagar discapacitados. - Segmento deshabilitado. - Color de fondo del botón de pago en estado de carga. |
--adyen-sdk-color-label-critical | #e22d2d | - Color del borde para los campos de entrada de error y el mensaje de validación de error. |
--adyen-sdk-color-label-highlight | #0070f5 | - Color del botón de enlace. |
--adyen-sdk-color-label-on-color | #ffffff | - Color del texto del botón. - Color del texto de descripción de la campaña de donación. - Casilla de verificación de color. |
--adyen-sdk-color-background-primary | #ffffff | - Color de fondo del botón de pago secundario. - Color de fondo de los elementos del formulario de pago: elemento de entrada, radio, selección, casilla de verificación. - Color de fondo para elementos de pago no seleccionados. |
--adyen-sdk-color-background-secondary | #f7f7f8 | - Color de fondo para el elemento del método de pago seleccionado. - Color de fondo para el botón seleccionado dentro del grupo de botones (usado en el componente Donación). |
--adyen-sdk-color-background-secondary-hover | #eeeff1 | - Color de fondo para el desplazamiento del botón fantasma. |
--adyen-sdk-color-background-secondary-active | #e3e5e9 | - Color de fondo para el botón fantasma activo. |
--adyen-sdk-color-background-tertiary | #eeeff1 | - Color de fondo para el control segmentado utilizado por la UPI. |
--adyen-sdk-color-background-disabled | #eeeff1 | - Color de fondo para elementos de formulario deshabilitados. |
--adyen-sdk-color-background-critical-strong | #e22d2d | - Color de fondo para el botón de confirmación de eliminación directa de métodos de pago almacenados. |
--adyen-sdk-color-background-inverse-primary-hover | #5c687c | - Color de fondo al pasar el cursor sobre el botón de pago. |
--adyen-sdk-color-background-always-dark | #00112c | - Color de fondo del botón de pago principal. |
--adyen-sdk-color-background-always-dark-active | #8d95a3 | - Color de fondo para el botón de pago principal activo y suspendido. |
--adyen-sdk-color-background-critical-strong | #e22d2d | - Eliminación directa de confirmación de tarjeta almacenada, color de fondo del botón - Color de fondo de alerta de tarjeta de regalo |
--adyen-sdk-color-outline-primary | #dbdee2 | - Color del borde no seleccionado del elemento de la lista de métodos de pago directo. - Color de sombra del cuadro de botón de emisores resaltados. - Color del borde de los elementos del formulario de pago (incluidas la casilla de verificación y la radio). |
--adyen-sdk-color-outline-primary-hover | #c9cdd3 | - Colocar el cursor sobre el elemento de la lista de métodos de pago y el color de sombra del cuadro no seleccionado. - La radio y la casilla de verificación no están enfocadas en el color de la sombra del cuadro. |
--adyen-sdk-color-outline-primary-active | #00112c | - Elementos de entrada de formulario enfocados en el cuadro, la sombra y el color del borde. |
--adyen-sdk-color-outline-secondary | #c9cdd3 | - Color del borde del elemento de pago seleccionado. - Color del borde del contenedor de estado predeterminado. - UPI, ANCV, Blik, MBWay esperan el color del borde del contenedor. - Color del borde del contenedor de código QR. |
--adyen-sdk-color-outline-tertiary | #8d95a3 | - Color del borde del pago del pedido directo, color del texto del recargo - Color del texto del saldo de la tarjeta GIF. - UPI, ANCV, Blik, MBWay esperan el color del texto de la cuenta regresiva - Radio, casilla de verificación, cuadro flotante, color de sombra - Color de sombra del cuadro de enfoque del botón de pago/normal - Color del separador de contenidos. |
--adyen-sdk-color-outline-disabled | #dbdee2 | - Color del borde del botón secundario desactivado |
--adyen-sdk-color-outline-critical | #e22d2d | - Color del borde del botón desplegable no válido |
--adyen-sdk-color-separator-primary | #dbdee2 | - Los campos de entrada, selección, casilla de verificación y formulario de radio tienen un color de borde no válido |
--adyen-sdk-text-caption-line-height | 18px | - Varios lugares que no son cuerpo/subtítulo/título |
--adyen-sdk-text-caption-font-size | 12px | - Tamaño de fuente del mensaje de alerta de tarjeta de regalo - Tamaño de fuente del texto de información adicional del elemento de lista de métodos de pago directo - Tamaño de fuente del texto del mensaje de exención de responsabilidad - Instrucción de campo de formulario, contextual, tamaño de fuente del texto de error |
--adyen-sdk-text-body-font-size | 14px | - Varios lugares que no son título/subtítulo/título |
--adyen-sdk-text-body-line-height | 20px | - Altura de la línea de texto de radio - Altura de la línea de instrucción Payme - Haga clic para pagar la altura de la línea de información de la casilla de verificación otp - Altura de la línea de la etiqueta del campo del formulario |
--adyen-sdk-text-body-font-weight | 400 | - Peso de fuente del texto de entrada de fecha de vencimiento de la tarjeta almacenada |
--adyen-sdk-text-body-stronger-font-weight | 500 | - Peso de fuente del texto del botón del emisor seleccionado - Peso de fuente del título del elemento de la lista de métodos de pago directo - Encabezado del pedido directo y peso de fuente del importe deducido - Peso de fuente de descripción confiable - Peso de fuente del texto del botón de pago - Peso de fuente de texto de control segmentado UPI |
--adyen-sdk-text-subtitle-font-size | 16px | - Tamaño de fuente del asistente Blik - Encabezado de descripción confiable - UPI, ANCV, Blik, MBWay esperan el tamaño de fuente de los subtítulos y del indicador - Subtítulo QR y tamaño de fuente del indicador - Entrada, tamaño de fuente del texto de los campos de entrada desplegables - Tamaño de fuente del monto del cupón |
--adyen-sdk-text-subtitle-font-weight | 500 | - Peso de fuente del título del conjunto de campos |
--adyen-sdk-text-subtitle-stronger-font-weight | 600 | - Peso de fuente de la etiqueta de la lista de métodos de pago directo |
--adyen-sdk-text-subtitle-line-height | 26px | - Altura de la línea de la etiqueta de la lista de métodos de pago directo - Altura de la línea de título del conjunto de campos |
--adyen-sdk-text-title-font-size | 16px | - Tamaño de fuente predeterminado de los estados finales - Tamaño de fuente del encabezado del pedido directo - Tamaño de fuente del título del elemento de la lista de métodos de pago directo - Tamaño de fuente del texto del botón de pago - Tamaño de fuente de introducción del resultado del comprobante Directdebit_GB - Tamaño de fuente del título de la campaña de donación |
--adyen-sdk-text-title-font-weight | 600 | - Haga clic para pagar el peso de la fuente del título del encabezado |
--adyen-sdk-text-title-line-height | 26px | - Altura de la línea de texto de entrada de fecha de vencimiento de la tarjeta almacenada |
--adyen-sdk-text-title-l-font-size | 24px | - Tamaño de fuente del texto de referencia del cupón |
--adyen-sdk-spacer-100 | 32px | Varios lugares para dimensiones. |
--adyen-sdk-spacer-110 | 40px | Varios lugares para dimensiones. |
--adyen-sdk-spacer-120 | 48px | Varios lugares para dimensiones. |
--adyen-sdk-spacer-130 | 56px | Varios lugares para dimensiones. |
--adyen-sdk-spacer-140 | 64px | Varios lugares para dimensiones. |
--adyen-sdk-spacer-000 | 0px | Varios lugares para dimensiones. |
--adyen-sdk-spacer-010 | 2px | Varios lugares para dimensiones. |
--adyen-sdk-spacer-020 | 4px | Varios lugares para dimensiones. |
--adyen-sdk-spacer-030 | 6px | Varios lugares para dimensiones. |
--adyen-sdk-spacer-040 | 8px | Varios lugares para dimensiones. |
--adyen-sdk-spacer-050 | 10px | Varios lugares para dimensiones. |
--adyen-sdk-spacer-060 | 12px | Varios lugares para dimensiones. |
--adyen-sdk-spacer-070 | 16px | Varios lugares para dimensiones. |
--adyen-sdk-spacer-080 | 20px | Varios lugares para dimensiones. |
--adyen-sdk-spacer-090 | 24px | Varios lugares para dimensiones. |
--adyen-sdk-border-radius-xs | 2px | Varios lugares para el radio fronterizo. |
--adyen-sdk-border-radius-s | 4px | Varios lugares para el radio fronterizo. |
--adyen-sdk-border-radius-m | 8px | Varios lugares para el radio fronterizo. |
--adyen-sdk-border-radius-l | 12px | Varios lugares para el radio fronterizo. |
--adyen-sdk-border-radius-xl | 24px | Varios lugares para el radio fronterizo. |
--adyen-sdk-border-width-s | 1px | Varios lugares para el radio fronterizo. |
--adyen-sdk-border-width-m | 2px | Varios lugares para el radio fronterizo. |
--adyen-sdk-border-width-l | 3px | Varios lugares para el radio fronterizo. |
--adyen-sdk-shadow-low | 0px 2px 4px rgba(0, 17, 44, 0.04), 0px 1px 2px rgba(0, 17, 44, 0.02) | - Sombra de cuadro para imágenes de marca disponibles de tarjetas e imágenes de marca de vales - Sombra de cuadro para el segmento seleccionado |
Para aplicar estilo a los campos seguros, como el número de tarjeta, CVC y fecha de vencimiento de una tarjeta, puede seguir el enlace Aplicar estilo a los campos de entrada de la tarjeta.
A partir de la versión 5.16.0, las integraciones directas y de componentes contienen funciones de análisis y seguimiento que están activadas de forma predeterminada. Obtenga más información sobre lo que rastreamos y cómo puede controlarlo.
Fusionamos cada solicitud de extracción en la rama main . Nuestro objetivo es mantener main en buena forma, lo que nos permite lanzar una nueva versión cuando sea necesario.
Eche un vistazo a nuestras pautas de contribución para descubrir cómo generar una solicitud de extracción.
Si tiene una solicitud de función o detecta un error o un problema técnico, cree un problema aquí.
Para otras preguntas, comuníquese con nuestro equipo de soporte.
Este repositorio está disponible bajo la licencia MIT.
