adyen web
6.5.1
A Adyen Web fornece os blocos de construção para criar uma experiência de checkout para seus clientes, permitindo que eles paguem usando o método de pagamento de sua escolha.
Você pode integrar com o Adyen Web de duas maneiras:
| Versão principal | Estado | Obsoleto | Fim da vida |
|---|---|---|---|
| 6.xx | Ativo | --- | --- |
| 5.xx | Inativo | A definir | A definir |
| 4.xx | Inativo | A definir | A definir |
| 3.xx | Obsoleto | Outubro de 2024 | Outubro de 2025 |
Mais informações sobre nosso versionamento e o ciclo de vida de Drop-in/Componentes podem ser encontradas aqui
Fornecemos suporte completo apenas quando você usa um desses métodos de instalação.
npm install @adyen/adyen-web --save import { AdyenCheckout } from '@adyen/adyen-web' ;
import '@adyen/adyen-web/styles/adyen.css' ;<script> Você também pode importar o Adyen Web usando uma tag <script> , conforme mostrado no guia de integração de Web Components.
Requisitos:
Para executar o ambiente:
.env na pasta raiz do seu projeto seguindo o exemplo em env.default e preencha as variáveis de ambiente.yarn installyarn buildyarn startIncluímos localizações de UI para vários idiomas. Você pode conferir os idiomas e suas respectivas traduções aqui. Além disso, é possível personalizar a tradução atual substituindo o texto padrão pelo seu próprio texto, caso você queira.
Adyen Web é temático e utiliza variáveis CSS que podem ser substituídas para atingir o estilo desejado.
Para elementos que não estão dentro de iframes, você pode personalizar os estilos substituindo-os em um arquivo css. A maioria dos nossos estilos são definidos com variáveis css com valores padrão. Para substituir esses estilos, você pode inspecionar o DOM e alterar o valor das variáveis css no nível raiz ou visando elementos específicos. Esteja ciente de que se você alterar os valores das variáveis css no nível raiz, também estará alterando os estilos de todos os elementos filhos que usam as mesmas variáveis css.
Crie override.css com as variáveis que você gostaria de estilizar
: root {
--adyen-sdk-color-background-secondary : # f7f7f8 ;
} Certifique-se de importar override.css após importar o CSS principal da biblioteca
import '@adyen/adyen-web/styles/adyen.css' ;
import './override.css' ; | Variável CSS | Valor padrão | Escopo |
|---|---|---|
--adyen-sdk-color-label-primary | #00112c | - Cor da etiqueta dentro dos formulários de pagamento, como instruções do formulário, rótulos dos campos do formulário e textos contextuais/auxiliares. - Cor do título do Fieldset - Cor do texto do campo de entrada - Cabeçalho da forma de pagamento drop-in, cabeçalho da forma de pagamento do pedido, cor do texto de status padrão. - Cor do texto do botão Bacs Edit - Cor do texto de introdução para transferência bancária, vouchers, Blik - Cor do texto do status da doação, cor de fundo da campanha - UPI, ANCV, Blik, MBWay aguardam a cor do texto do contêiner - Cor do texto dos botões fantasmas secundários - Cor do rótulo da caixa de seleção (Consentimento) |
--adyen-sdk-color-label-secondary | #5c687c | - Cor do rótulo para as informações adicionais no cabeçalho da forma de pagamento imediata. - Cor do rótulo de isenção de responsabilidade. - Cor da etiqueta de contagem regressiva QR. - Selecione somente leitura e insira a cor. |
--adyen-sdk-color-label-tertiary | #8d95a3 | - Cor da etiqueta para as etiquetas clique para pagar. |
--adyen-sdk-color-label-disabled | #8d95a3 | - Cor do rótulo para o botão de logout Click to Pay desativado. - Segmento desativado. - Cor de fundo do botão de pagamento no estado de carregamento. |
--adyen-sdk-color-label-critical | #e22d2d | - Cor da borda dos campos de entrada de erro e mensagem de validação de erro. |
--adyen-sdk-color-label-highlight | #0070f5 | - Cor do botão de link. |
--adyen-sdk-color-label-on-color | #ffffff | - Cor do texto do botão. - Cor do texto da descrição da campanha de doação. - Cor de verificação da caixa de seleção. |
--adyen-sdk-color-background-primary | #ffffff | - Cor de fundo do botão Pagamento secundário. - Cor de fundo dos elementos do formulário de pagamento: elemento de entrada, rádio, seleção, caixa de seleção. - Cor de fundo para itens de pagamento não selecionados. |
--adyen-sdk-color-background-secondary | #f7f7f8 | - Cor de fundo para o item do método de pagamento selecionado. - Cor de fundo do botão selecionado dentro do grupo de botões (usado no componente Doação). |
--adyen-sdk-color-background-secondary-hover | #eeeff1 | - Cor de fundo para passar o mouse sobre o botão fantasma. |
--adyen-sdk-color-background-secondary-active | #e3e5e9 | - Cor de fundo do botão fantasma ativo. |
--adyen-sdk-color-background-tertiary | #eeeff1 | - Cor de fundo para controle segmentado utilizado pela UPI. |
--adyen-sdk-color-background-disabled | #eeeff1 | - Cor de fundo para elementos de formulário desativados. |
--adyen-sdk-color-background-critical-strong | #e22d2d | - Cor de fundo para o botão de confirmação de métodos de pagamento armazenados e remoção imediata. |
--adyen-sdk-color-background-inverse-primary-hover | #5c687c | - Cor de fundo para passar o mouse sobre o botão de pagamento. |
--adyen-sdk-color-background-always-dark | #00112c | - Cor de fundo do botão de pagamento principal. |
--adyen-sdk-color-background-always-dark-active | #8d95a3 | - Cor de fundo do botão de pagamento principal ativo e pairado. |
--adyen-sdk-color-background-critical-strong | #e22d2d | - Drop-in remove confirmação do cartão armazenado, cor de fundo do botão - Cor de fundo do alerta do vale-presente |
--adyen-sdk-color-outline-primary | #dbdee2 | - Item da lista de métodos de pagamento drop-in, cor da borda não selecionada. - Cor da sombra da caixa do botão dos emissores em destaque. - Cor da borda dos elementos do formulário de pagamento (incluindo caixa de seleção e rádio). |
--adyen-sdk-color-outline-primary-hover | #c9cdd3 | - Passar o mouse sobre o item da lista de métodos de pagamento e cor da sombra da caixa não selecionada. - O foco do rádio e da caixa de seleção não está focado na cor da sombra da caixa. |
--adyen-sdk-color-outline-primary-active | #00112c | - Os elementos de entrada do formulário concentram-se na sombra da caixa e na cor da borda. |
--adyen-sdk-color-outline-secondary | #c9cdd3 | - Cor da borda do item de pagamento selecionado. - Cor da borda do contêiner de status padrão drop-in. - UPI, ANCV, Blik, MBWay aguardam cor da borda do container. - Cor da borda do contêiner do código QR. |
--adyen-sdk-color-outline-tertiary | #8d95a3 | - Cor da borda do pagamento do pedido imediato, cor do texto da sobretaxa - Cor do texto do saldo do cartão Gif - UPI, ANCV, Blik, MBWay aguardam contagem regressiva da cor do texto - Rádio, caixa de seleção cor da sombra da caixa de foco - Cor da sombra da caixa de foco do botão pagar / normal - Cor do separador de conteúdo |
--adyen-sdk-color-outline-disabled | #dbdee2 | - Botão secundário com cor da borda desativada |
--adyen-sdk-color-outline-critical | #e22d2d | - Cor da borda do botão suspensa inválida |
--adyen-sdk-color-separator-primary | #dbdee2 | - Campos de entrada, seleção, caixa de seleção e formulário de rádio com cor de borda inválida |
--adyen-sdk-text-caption-line-height | 18px | - Vários locais que não são corpo/subtítulo/título |
--adyen-sdk-text-caption-font-size | 12px | - Tamanho da fonte da mensagem de alerta do vale-presente - Item da lista de métodos de pagamento drop-in informações adicionais tamanho da fonte do texto - Tamanho da fonte do texto da mensagem de isenção de responsabilidade - Instrução do campo do formulário, contextual, tamanho da fonte do texto de erro |
--adyen-sdk-text-body-font-size | 14px | - Vários lugares que não são título/subtítulo/legenda |
--adyen-sdk-text-body-line-height | 20px | - Altura da linha de texto de rádio - Altura da linha de instrução Payme - Clique para pagar a altura da linha de informações da caixa de seleção otp - Altura da linha do rótulo do campo do formulário |
--adyen-sdk-text-body-font-weight | 400 | - Peso da fonte do texto de entrada da data de validade do cartão armazenado |
--adyen-sdk-text-body-stronger-font-weight | 500 | - Peso da fonte do texto do botão do emissor selecionado - Peso da fonte do título do item da lista de métodos de pagamento drop-in - Cabeçalho do pedido drop-in e peso da fonte do valor deduzido - Peso da fonte com descrição confiável - Peso da fonte do texto do botão Pagar - Peso da fonte do texto de controle segmentado UPI |
--adyen-sdk-text-subtitle-font-size | 16px | - Tamanho da fonte auxiliar Blik - Cabeçalho de descrição confiável - UPI, ANCV, Blik, MBWay aguardam legenda e tamanho da fonte do indicador - Legenda QR e tamanho da fonte do indicador - Entrada, tamanho da fonte do texto dos campos de entrada suspensos - Tamanho da fonte do valor do voucher |
--adyen-sdk-text-subtitle-font-weight | 500 | - Peso da fonte do título definido no campo |
--adyen-sdk-text-subtitle-stronger-font-weight | 600 | - Peso da fonte do rótulo da lista de métodos de pagamento drop-in |
--adyen-sdk-text-subtitle-line-height | 26px | - Altura da linha do rótulo da lista de métodos de pagamento drop-in - Campo definir altura da linha de título |
--adyen-sdk-text-title-font-size | 16px | - Tamanho da fonte dos status finais padrão padrão - Tamanho da fonte do cabeçalho do pedido drop-in - Tamanho da fonte do título do item da lista de métodos de pagamento drop-in - Tamanho da fonte do texto do botão de pagamento - Tamanho da fonte da introdução do resultado do voucher Directdebit_GB - Tamanho da fonte do título da campanha de doação |
--adyen-sdk-text-title-font-weight | 600 | - Clique para pagar o peso da fonte do título do cabeçalho |
--adyen-sdk-text-title-line-height | 26px | - Altura da linha de texto de entrada da data de validade do cartão armazenado |
--adyen-sdk-text-title-l-font-size | 24px | - Tamanho da fonte do texto de referência do voucher |
--adyen-sdk-spacer-100 | 32px | Vários locais para dimensões |
--adyen-sdk-spacer-110 | 40px | Vários locais para dimensões |
--adyen-sdk-spacer-120 | 48px | Vários locais para dimensões |
--adyen-sdk-spacer-130 | 56px | Vários locais para dimensões |
--adyen-sdk-spacer-140 | 64px | Vários locais para dimensões |
--adyen-sdk-spacer-000 | 0px | Vários locais para dimensões |
--adyen-sdk-spacer-010 | 2px | Vários locais para dimensões |
--adyen-sdk-spacer-020 | 4px | Vários locais para dimensões |
--adyen-sdk-spacer-030 | 6px | Vários locais para dimensões |
--adyen-sdk-spacer-040 | 8px | Vários locais para dimensões |
--adyen-sdk-spacer-050 | 10px | Vários locais para dimensões |
--adyen-sdk-spacer-060 | 12px | Vários locais para dimensões |
--adyen-sdk-spacer-070 | 16px | Vários locais para dimensões |
--adyen-sdk-spacer-080 | 20px | Vários locais para dimensões |
--adyen-sdk-spacer-090 | 24px | Vários locais para dimensões |
--adyen-sdk-border-radius-xs | 2px | Vários locais para raio de fronteira |
--adyen-sdk-border-radius-s | 4px | Vários locais para raio de fronteira |
--adyen-sdk-border-radius-m | 8px | Vários locais para raio de fronteira |
--adyen-sdk-border-radius-l | 12px | Vários locais para raio de fronteira |
--adyen-sdk-border-radius-xl | 24px | Vários locais para raio de fronteira |
--adyen-sdk-border-width-s | 1px | Vários locais para raio de fronteira |
--adyen-sdk-border-width-m | 2px | Vários locais para raio de fronteira |
--adyen-sdk-border-width-l | 3px | Vários locais para raio de fronteira |
--adyen-sdk-shadow-low | 0px 2px 4px rgba(0, 17, 44, 0.04), 0px 1px 2px rgba(0, 17, 44, 0.02) | - Sombra de caixa para imagens de marca disponíveis no cartão e imagens de marca de voucher - Sombra da caixa para o segmento selecionado |
Para definir o estilo dos campos seguros, como número do cartão, CVC e data de validade de um cartão, você pode seguir o link Estilizar campos de entrada do cartão.
A partir da versão 5.16.0, as integrações Drop-in e Componentes contêm recursos de análise e rastreamento que são ativados por padrão. Saiba mais sobre o que rastreamos e como você pode controlá-lo.
Mesclamos cada solicitação pull no branch main . Nosso objetivo é manter main em boa forma, o que nos permite lançar uma nova versão sempre que necessário.
Dê uma olhada em nossas diretrizes de contribuição para descobrir como levantar uma solicitação pull.
Se você tiver uma solicitação de recurso ou detectar um bug ou problema técnico, crie um problema aqui.
Para outras dúvidas, entre em contato com nossa equipe de suporte.
Este repositório está disponível sob a licença do MIT.
