adyen web
6.5.1
Adyen Web vous fournit les éléments de base nécessaires pour créer une expérience de paiement pour vos acheteurs, leur permettant de payer en utilisant le mode de paiement de leur choix.
Vous pouvez intégrer Adyen Web de deux manières :
| Version majeure | État | Obsolète | Fin de vie |
|---|---|---|---|
| 6.xx | Actif | --- | --- |
| 5.xx | Inactif | À déterminer | À déterminer |
| 4.xx | Inactif | À déterminer | À déterminer |
| 3.xx | Obsolète | octobre 2024 | octobre 2025 |
Plus d’informations sur notre gestion des versions et le cycle de vie des Drop-in/Components peuvent être trouvées ici
Nous fournissons une assistance complète uniquement lorsque vous utilisez l'une de ces méthodes d'installation.
npm install @adyen/adyen-web --save import { AdyenCheckout } from '@adyen/adyen-web' ;
import '@adyen/adyen-web/styles/adyen.css' ;<script> Vous pouvez également importer Adyen Web à l'aide d'une balise <script> , comme indiqué dans le guide d'intégration des composants Web.
Exigences:
Pour exécuter l'environnement :
.env sur le dossier racine de votre projet en suivant l'exemple dans env.default et remplissez les variables d'environnement.yarn installyarn buildyarn startNous incluons des localisations d'interface utilisateur pour de nombreuses langues. Vous pouvez vérifier les langues et leurs traductions respectives ici. De plus, il est possible de personnaliser la traduction actuelle en remplaçant le texte par défaut par votre propre texte si vous le souhaitez.
Adyen Web est thématique et utilise des variables CSS qui peuvent être remplacées afin d'obtenir le style souhaité.
Pour les éléments qui ne se trouvent pas dans des iframes, vous pouvez personnaliser les styles en remplaçant ces styles dans un fichier CSS. La plupart de nos styles sont définis avec des variables CSS avec des valeurs par défaut. Pour remplacer ces styles, vous pouvez inspecter le DOM et modifier la valeur des variables CSS soit au niveau racine, soit en ciblant des éléments spécifiques. Sachez que si vous modifiez les valeurs des variables CSS au niveau racine, vous modifiez également les styles de tous les éléments enfants qui utilisent les mêmes variables CSS.
Créez override.css avec les variables que vous souhaitez styliser
: root {
--adyen-sdk-color-background-secondary : # f7f7f8 ;
} Assurez-vous d'importer le override.css après avoir importé le CSS principal de la bibliothèque
import '@adyen/adyen-web/styles/adyen.css' ;
import './override.css' ; | Variable CSS | Valeur par défaut | Portée |
|---|---|---|
--adyen-sdk-color-label-primary | #00112c | - Couleur des étiquettes à l'intérieur des formulaires de paiement, telles que les instructions du formulaire, les étiquettes des champs de formulaire et les textes contextuels/d'aide. - Couleur du titre du jeu de champs - Couleur du texte du champ de saisie - En-tête du mode de paiement instantané, en-tête du mode de paiement de la commande, couleur du texte d'état par défaut. - Couleur du texte du bouton Bacs Edit - Couleur du texte d'introduction pour les virements bancaires, les bons d'achat, les Blik - Couleur du texte du statut du don, couleur d'arrière-plan de la campagne - UPI, ANCV, Blik, MBWay attendent la couleur du texte du conteneur - Couleur du texte des boutons secondaires et fantômes - Couleur de l'étiquette de la case à cocher (Consentement) |
--adyen-sdk-color-label-secondary | #5c687c | - Couleur de l'étiquette pour les informations complémentaires dans l'en-tête du mode de paiement drop-in. - Couleur de l’étiquette de non-responsabilité. - Couleur de l'étiquette du compte à rebours QR. - Sélectionnez et saisissez la couleur en lecture seule. |
--adyen-sdk-color-label-tertiary | #8d95a3 | - Couleur de l'étiquette pour les étiquettes Click to Pay. |
--adyen-sdk-color-label-disabled | #8d95a3 | - Couleur de l'étiquette pour les personnes handicapées Bouton de déconnexion Click to Pay. - Segment désactivé. - Couleur de fond du bouton de paiement en état de chargement. |
--adyen-sdk-color-label-critical | #e22d2d | - Couleur de bordure pour les champs de saisie d'erreur et le message de validation d'erreur. |
--adyen-sdk-color-label-highlight | #0070f5 | - Couleur du bouton de lien. |
--adyen-sdk-color-label-on-color | #ffffff | - Couleur du texte du bouton. - Couleur du texte de description de la campagne de don. - Couleur de la case à cocher. |
--adyen-sdk-color-background-primary | #ffffff | - Couleur d'arrière-plan du bouton de paiement secondaire. - Couleur de fond des éléments du formulaire de paiement : élément de saisie, radio, sélection, case à cocher. - Couleur d'arrière-plan pour les éléments de paiement non sélectionnés. |
--adyen-sdk-color-background-secondary | #f7f7f8 | - Couleur d'arrière-plan pour l'élément de mode de paiement sélectionné. - Couleur d'arrière-plan du bouton sélectionné à l'intérieur du groupe de boutons (utilisé dans le composant Donation). |
--adyen-sdk-color-background-secondary-hover | #eeeff1 | - Couleur d'arrière-plan pour le survol du bouton fantôme. |
--adyen-sdk-color-background-secondary-active | #e3e5e9 | - Couleur de fond pour le bouton fantôme actif. |
--adyen-sdk-color-background-tertiary | #eeeff1 | - Couleur de fond pour le contrôle segmenté utilisé par l'UPI. |
--adyen-sdk-color-background-disabled | #eeeff1 | - Couleur d'arrière-plan pour les éléments de formulaire désactivés. |
--adyen-sdk-color-background-critical-strong | #e22d2d | - Couleur d'arrière-plan pour le bouton de confirmation des méthodes de paiement stockées. |
--adyen-sdk-color-background-inverse-primary-hover | #5c687c | - Couleur d'arrière-plan pour survoler le bouton de paiement. |
--adyen-sdk-color-background-always-dark | #00112c | - Couleur d'arrière-plan du bouton de paiement principal. |
--adyen-sdk-color-background-always-dark-active | #8d95a3 | - Couleur d'arrière-plan du bouton de paiement principal actif et survolé. |
--adyen-sdk-color-background-critical-strong | #e22d2d | - Confirmation de suppression de la carte stockée, couleur d'arrière-plan du bouton - Couleur d'arrière-plan de l'alerte de carte-cadeau |
--adyen-sdk-color-outline-primary | #dbdee2 | - Couleur de bordure non sélectionnée dans la liste des méthodes de paiement instantanées. - Couleur de l'ombre de la boîte de boutons des émetteurs en surbrillance. - Couleur de la bordure des éléments du formulaire de paiement (y compris la case à cocher et la radio). |
--adyen-sdk-color-outline-primary-hover | #c9cdd3 | - Survol des éléments de la liste des méthodes de paiement instantanées et couleur de l'ombre de la boîte non sélectionnée. - Le survol de la radio et des cases à cocher n'est pas focalisé sur la couleur de l'ombre de la boîte. |
--adyen-sdk-color-outline-primary-active | #00112c | - Éléments de saisie du formulaire axés sur l'ombre de la boîte et la couleur de la bordure. |
--adyen-sdk-color-outline-secondary | #c9cdd3 | - Couleur de la bordure de l'élément de paiement sélectionné. - Couleur de bordure du conteneur d'état par défaut. - UPI, ANCV, Blik, MBWay attendent la couleur de la bordure du conteneur. - Couleur de la bordure du conteneur de code QR. |
--adyen-sdk-color-outline-tertiary | #8d95a3 | - Couleur de la bordure de paiement des commandes directes, couleur du texte du supplément - Couleur du texte du solde de la carte Gif - UPI, ANCV, Blik, MBWay attendent la couleur du texte du compte à rebours - Radio, case à cocher survoler la couleur de l'ombre - Couleur de l'ombre de la boîte de mise au point du bouton Pay / Regular - Couleur du séparateur de contenu |
--adyen-sdk-color-outline-disabled | #dbdee2 | - Couleur de bordure désactivée du bouton secondaire |
--adyen-sdk-color-outline-critical | #e22d2d | - Déroulez la couleur de la bordure du bouton invalide |
--adyen-sdk-color-separator-primary | #dbdee2 | - Les champs de saisie, de sélection, de case à cocher et de formulaire radio ne sont pas valides. Couleur de bordure |
--adyen-sdk-text-caption-line-height | 18px | - Divers endroits qui ne sont pas corps/sous-titre/titre |
--adyen-sdk-text-caption-font-size | 12px | - Taille de la police du message d'alerte de carte-cadeau - Élément de la liste des méthodes de paiement sans rendez-vous informations supplémentaires taille de la police du texte - Taille de la police du texte du message de non-responsabilité - Instruction du champ de formulaire, contextuel, taille de police du texte d'erreur |
--adyen-sdk-text-body-font-size | 14px | - Divers endroits qui ne sont pas titre/sous-titre/légende |
--adyen-sdk-text-body-line-height | 20px | - Hauteur de la ligne de texte radio - Hauteur de la ligne d'instruction Payme - Cliquez pour payer la hauteur de la ligne d'information de la case à cocher OTP - Hauteur de la ligne de l'étiquette du champ de formulaire |
--adyen-sdk-text-body-font-weight | 400 | - Poids de la police du texte de saisie de la date d'expiration de la carte stockée |
--adyen-sdk-text-body-stronger-font-weight | 500 | - Poids de la police du texte du bouton de l'émetteur sélectionné - Poids de la police du titre de l'article de la liste des méthodes de paiement sans rendez-vous - En-tête de commande et poids de police du montant déduit - Poids de la police de description fiable - Poids de la police du texte du bouton Payer - Poids de la police du texte de contrôle segmenté UPI |
--adyen-sdk-text-subtitle-font-size | 16px | - Taille de la police de l'assistant Blik - En-tête de description fiable - UPI, ANCV, Blik, MBWay attendent la taille de la police des sous-titres et de l'indicateur - Sous-titre QR et taille de police de l'indicateur - Saisie, champs de saisie déroulants, taille de la police du texte - Taille de la police du montant du bon |
--adyen-sdk-text-subtitle-font-weight | 500 | - Champ définissant le poids de la police du titre |
--adyen-sdk-text-subtitle-stronger-font-weight | 600 | - Poids de la police de l'étiquette de la liste des méthodes de paiement instantanées |
--adyen-sdk-text-subtitle-line-height | 26px | - Hauteur de la ligne de l'étiquette de la liste des modes de paiement instantanés - Champ définissant la hauteur de la ligne de titre |
--adyen-sdk-text-title-font-size | 16px | - Taille de police des statuts finaux par défaut - Taille de la police de l'en-tête de la commande déroulante - Taille de la police du titre de l'article de la liste des méthodes de paiement sans rendez-vous - Taille de la police du texte du bouton Payer - Taille de la police d'introduction du résultat du bon Directdebit_GB - Taille de la police du titre de la campagne de don |
--adyen-sdk-text-title-font-weight | 600 | - Cliquez pour payer le poids de la police du titre de l'en-tête |
--adyen-sdk-text-title-line-height | 26px | - Hauteur de la ligne de texte de saisie de la date d'expiration de la carte stockée |
--adyen-sdk-text-title-l-font-size | 24px | - Taille de la police du texte de référence du bon |
--adyen-sdk-spacer-100 | 32px | Divers emplacements pour les dimensions |
--adyen-sdk-spacer-110 | 40px | Divers emplacements pour les dimensions |
--adyen-sdk-spacer-120 | 48px | Divers emplacements pour les dimensions |
--adyen-sdk-spacer-130 | 56px | Divers emplacements pour les dimensions |
--adyen-sdk-spacer-140 | 64px | Divers emplacements pour les dimensions |
--adyen-sdk-spacer-000 | 0px | Divers emplacements pour les dimensions |
--adyen-sdk-spacer-010 | 2px | Divers emplacements pour les dimensions |
--adyen-sdk-spacer-020 | 4px | Divers emplacements pour les dimensions |
--adyen-sdk-spacer-030 | 6px | Divers emplacements pour les dimensions |
--adyen-sdk-spacer-040 | 8px | Divers emplacements pour les dimensions |
--adyen-sdk-spacer-050 | 10px | Divers emplacements pour les dimensions |
--adyen-sdk-spacer-060 | 12px | Divers emplacements pour les dimensions |
--adyen-sdk-spacer-070 | 16px | Divers emplacements pour les dimensions |
--adyen-sdk-spacer-080 | 20px | Divers emplacements pour les dimensions |
--adyen-sdk-spacer-090 | 24px | Divers emplacements pour les dimensions |
--adyen-sdk-border-radius-xs | 2px | Divers endroits pour le rayon frontalier |
--adyen-sdk-border-radius-s | 4px | Divers endroits pour le rayon frontalier |
--adyen-sdk-border-radius-m | 8px | Divers endroits pour le rayon frontalier |
--adyen-sdk-border-radius-l | 12px | Divers endroits pour le rayon frontalier |
--adyen-sdk-border-radius-xl | 24px | Divers endroits pour le rayon frontalier |
--adyen-sdk-border-width-s | 1px | Divers endroits pour le rayon frontalier |
--adyen-sdk-border-width-m | 2px | Divers endroits pour le rayon frontalier |
--adyen-sdk-border-width-l | 3px | Divers endroits pour le rayon frontalier |
--adyen-sdk-shadow-low | 0px 2px 4px rgba(0, 17, 44, 0.04), 0px 1px 2px rgba(0, 17, 44, 0.02) | - Ombre de boîte pour les images de marque disponibles sur la carte et les images de marque de bons - Ombre de boîte pour le segment sélectionné |
Pour styliser les champs sécurisés tels que le numéro de carte, le CVC et la date d'expiration d'une carte, vous pouvez suivre le lien Styliser les champs de saisie de la carte.
À partir de la version 5.16.0, les intégrations Drop-in et Components contiennent des fonctionnalités d'analyse et de suivi qui sont activées par défaut. Apprenez-en davantage sur ce que nous suivons et comment vous pouvez le contrôler.
Nous fusionnons chaque pull request dans la branche main . Notre objectif est de maintenir main en bon état, ce qui nous permet de publier une nouvelle version chaque fois que nous en avons besoin.
Jetez un œil à nos directives de contribution pour savoir comment lancer une pull request.
Si vous avez une demande de fonctionnalité, ou si vous avez repéré un bug ou un problème technique, créez un problème ici.
Pour d’autres questions, contactez notre équipe d’assistance.
Ce référentiel est disponible sous licence MIT.
