adyen web
6.5.1
Adyen Web stellt Ihnen die Bausteine zur Verfügung, um Ihren Käufern ein Checkout-Erlebnis zu bieten, das es ihnen ermöglicht, mit der Zahlungsmethode ihrer Wahl zu bezahlen.
Sie können Adyen Web auf zwei Arten integrieren:
| Hauptversion | Zustand | Veraltet | Lebensende |
|---|---|---|---|
| 6.xx | Aktiv | --- | --- |
| 5.xx | Inaktiv | TBA | TBA |
| 4.xx | Inaktiv | TBA | TBA |
| 3.xx | Veraltet | Oktober 2024 | Oktober 2025 |
Weitere Informationen zu unserer Versionierung und dem Drop-in/Components-Lebenszyklus finden Sie hier
Wir bieten nur dann vollständigen Support an, wenn Sie eine dieser Installationsmethoden verwenden.
npm install @adyen/adyen-web --save import { AdyenCheckout } from '@adyen/adyen-web' ;
import '@adyen/adyen-web/styles/adyen.css' ;<script> -Tags Sie können Adyen Web auch mit einem <script> -Tag importieren, wie im Web Components-Integrationsleitfaden gezeigt.
Anforderungen:
So führen Sie die Umgebung aus:
.env Datei im Stammordner Ihres Projekts, indem Sie dem Beispiel in env.default folgen, und geben Sie die Umgebungsvariablen ein.yarn installyarn buildyarn startWir bieten UI-Lokalisierungen für viele Sprachen an. Sie können die Sprachen und ihre jeweiligen Übersetzungen hier überprüfen. Darüber hinaus ist es möglich, die aktuelle Übersetzung anzupassen und den Standardtext bei Bedarf durch Ihren eigenen Text zu ersetzen.
Adyen Web ist thematisch anpassbar und verwendet CSS-Variablen, die überschrieben werden können, um den gewünschten Stil zu erreichen.
Für Elemente, die sich nicht in Iframes befinden, können Sie die Stile anpassen, indem Sie diese Stile in einer CSS-Datei überschreiben. Die meisten unserer Stile werden mit CSS-Variablen mit Standardwerten definiert. Um diese Stile zu überschreiben, können Sie das DOM untersuchen und den Wert für die CSS-Variablen entweder auf der Stammebene oder durch gezielte Ausrichtung auf bestimmte Elemente ändern. Beachten Sie, dass Sie, wenn Sie die Werte für CSS-Variablen auf der Stammebene ändern, auch die Stile für alle untergeordneten Elemente ändern, die dieselben CSS-Variablen verwenden.
Erstellen Sie override.css mit den Variablen, die Sie formatieren möchten
: root {
--adyen-sdk-color-background-secondary : # f7f7f8 ;
} Stellen Sie sicher, dass Sie die override.css importieren, nachdem Sie das Haupt-CSS der Bibliothek importiert haben
import '@adyen/adyen-web/styles/adyen.css' ;
import './override.css' ; | CSS-Variable | Standardwert | Umfang |
|---|---|---|
--adyen-sdk-color-label-primary | #00112c | - Beschriftungsfarben in Zahlungsformularen, z. B. Formularanweisungen, Formularfeldbeschriftungen und Kontext-/Hilfstexte. - Titelfarbe des Feldsatzes - Textfarbe des Eingabefelds - Kopfzeile der Drop-in-Zahlungsmethode, Kopfzeile der Bestellzahlungsmethode, Standardtextfarbe für den Status. - Textfarbe der Schaltfläche „Bacs Bearbeiten“. - Einführungstextfarbe für Banküberweisung, Gutscheine, Blik - Textfarbe für Spendenstatus, Hintergrundfarbe für Kampagne - UPI, ANCV, Blik, MBWay warten auf die Textfarbe des Containers - Sekundäre Textfarbe für Geisterschaltflächen - Beschriftungsfarbe des Kontrollkästchens (Zustimmung). |
--adyen-sdk-color-label-secondary | #5c687c | - Beschriftungsfarbe für die zusätzlichen Informationen im Header der Drop-in-Zahlungsmethode. - Farbe des Haftungsausschlussetiketts. - QR-Countdown-Etikettenfarbe. - Schreibgeschützte Farbe auswählen und eingeben. |
--adyen-sdk-color-label-tertiary | #8d95a3 | - Etikettenfarbe für die Click-to-Pay-Etiketten. |
--adyen-sdk-color-label-disabled | #8d95a3 | - Beschriftungsfarbe für Behinderte. Klicken Sie auf die Schaltfläche „Bezahlen“, um sich abzumelden. - Deaktiviertes Segment. - Hintergrundfarbe für den Bezahlbutton im Ladezustand. |
--adyen-sdk-color-label-critical | #e22d2d | - Rahmenfarbe für die Fehlereingabefelder und die Fehlervalidierungsmeldung. |
--adyen-sdk-color-label-highlight | #0070f5 | - Farbe der Link-Schaltfläche. |
--adyen-sdk-color-label-on-color | #ffffff | - Textfarbe der Schaltfläche. - Textfarbe für die Beschreibung der Spendenkampagne. - Farbe des Kontrollkästchens überprüfen. |
--adyen-sdk-color-background-primary | #ffffff | - Hintergrundfarbe für die Schaltfläche „Sekundäre Bezahlung“. - Hintergrundfarbe für Zahlungsformularelemente: Eingabeelement, Radio, Auswahl, Kontrollkästchen. - Hintergrundfarbe für nicht ausgewählte Zahlungsposten. |
--adyen-sdk-color-background-secondary | #f7f7f8 | - Hintergrundfarbe für das Drop-in-Element der ausgewählten Zahlungsmethode. - Hintergrundfarbe für die ausgewählte Schaltfläche innerhalb der Schaltflächengruppe (wird in der Spendenkomponente verwendet). |
--adyen-sdk-color-background-secondary-hover | #eeeff1 | - Hintergrundfarbe für den Geister-Button-Hover. |
--adyen-sdk-color-background-secondary-active | #e3e5e9 | - Hintergrundfarbe für aktiven Ghost-Button. |
--adyen-sdk-color-background-tertiary | #eeeff1 | - Hintergrundfarbe für die vom UPI verwendete segmentierte Steuerung. |
--adyen-sdk-color-background-disabled | #eeeff1 | - Hintergrundfarbe für deaktivierte Formularelemente. |
--adyen-sdk-color-background-critical-strong | #e22d2d | - Hintergrundfarbe für die Drop-in-Bestätigungsschaltfläche zum Entfernen gespeicherter Zahlungsmethoden. |
--adyen-sdk-color-background-inverse-primary-hover | #5c687c | - Hintergrundfarbe zum Bewegen des Mauszeigers auf die Zahlungsschaltfläche. |
--adyen-sdk-color-background-always-dark | #00112c | - Hintergrundfarbe für die primäre Zahlungsschaltfläche. |
--adyen-sdk-color-background-always-dark-active | #8d95a3 | - Hintergrundfarbe für die aktive und schwebende primäre Zahlungsschaltfläche. |
--adyen-sdk-color-background-critical-strong | #e22d2d | - Drop-in-Bestätigung zum Entfernen der gespeicherten Karte, Hintergrundfarbe der Schaltfläche - Hintergrundfarbe der Geschenkkartenwarnung |
--adyen-sdk-color-outline-primary | #dbdee2 | - Drop-in-Zahlungsmethodenlistenelement mit nicht ausgewählter Rahmenfarbe. - Hervorgehobene Schattenfarbe des Emittenten-Schaltflächenfelds. - Rahmenfarbe für Zahlungsformularelemente (einschließlich Kontrollkästchen und Radio). |
--adyen-sdk-color-outline-primary-hover | #c9cdd3 | - Drop-in-Zahlungsmethodenlistenelement mit Hover und nicht ausgewählter Box-Schattenfarbe. - Radio- und Kontrollkästchen-Hover nicht fokussiert, Box-Schatten-Farbe. |
--adyen-sdk-color-outline-primary-active | #00112c | - Formulareingabeelemente mit Fokus auf Box-Schatten und Rahmenfarbe. |
--adyen-sdk-color-outline-secondary | #c9cdd3 | - Fügen Sie die Rahmenfarbe des ausgewählten Zahlungselements hinzu. - Drop-in-Standardfarbe für den Statuscontainerrahmen. - UPI, ANCV, Blik, MBWay warten auf die Farbe des Containerrandes. - Randfarbe des QR-Code-Containers. |
--adyen-sdk-color-outline-tertiary | #8d95a3 | - Rahmenfarbe für Drop-in-Bestellung, Textfarbe gegen Aufpreis - Textfarbe des GIF-Kartenguthabens - UPI, ANCV, Blik, MBWay warten auf Countdown-Textfarbe - Radio, Kontrollkästchen Hoverbox-Schattenfarbe - Fokusfeld-Schattenfarbe der Pay-/Normaltaste - Farbe der Inhaltstrennlinie |
--adyen-sdk-color-outline-disabled | #dbdee2 | - Randfarbe der sekundären Schaltfläche deaktiviert |
--adyen-sdk-color-outline-critical | #e22d2d | - Ungültige Rahmenfarbe für Schaltflächen entfernen |
--adyen-sdk-color-separator-primary | #dbdee2 | - Eingabe-, Auswahl-, Kontrollkästchen- und Radio-Formularfelder mit ungültiger Rahmenfarbe |
--adyen-sdk-text-caption-line-height | 18px | - Verschiedene Stellen, die nicht zum Hauptteil/Untertitel/Titel gehören |
--adyen-sdk-text-caption-font-size | 12px | - Schriftgröße der Geschenkkarten-Benachrichtigung - Drop-in-Zahlungsmethodenlistenelement, zusätzliche Informationen, Textschriftgröße - Schriftgröße des Haftungsausschlusstextes - Formularfeldanweisung, kontextbezogen, Fehlertext-Schriftgröße |
--adyen-sdk-text-body-font-size | 14px | - Verschiedene Stellen, die nicht Titel/Untertitel/Bildunterschrift sind |
--adyen-sdk-text-body-line-height | 20px | - Zeilenhöhe des Radiotextes - Höhe der Payme-Anweisungszeile - Klicken Sie hier, um die Zeilenhöhe des Kontrollkästchens „OTP“ zu bezahlen - Zeilenhöhe der Formularfeldbeschriftung |
--adyen-sdk-text-body-font-weight | 400 | - Schriftstärke für das Ablaufdatum der gespeicherten Karte |
--adyen-sdk-text-body-stronger-font-weight | 500 | - Ausgewählte Schriftstärke für den Text der Emittentenschaltfläche - Schriftstärke des Titels der Drop-in-Zahlungsmethodenliste - Drop-in-Auftragskopfzeile und abgezogene Schriftstärke - Vertrauenswürdige Schriftstärke für die Beschreibung - Schriftstärke des Pay-Button-Textes - UPI-segmentierte Steuertext-Schriftstärke |
--adyen-sdk-text-subtitle-font-size | 16px | - Blik-Helper-Schriftgröße - Trustly-Beschreibungsheader - UPI, ANCV, Blik, MBWay warten auf Untertitel und Anzeigeschriftgröße - QR-Untertitel und Indikatorschriftgröße - Eingabe, Dropdown-Eingabefelder, Textschriftgröße - Schriftgröße des Gutscheinbetrags |
--adyen-sdk-text-subtitle-font-weight | 500 | - Feld legt die Schriftstärke des Titels fest |
--adyen-sdk-text-subtitle-stronger-font-weight | 600 | - Schriftstärke für Drop-in-Zahlungsmethodenlistenetiketten |
--adyen-sdk-text-subtitle-line-height | 26px | - Zeilenhöhe der Beschriftung der Drop-in-Zahlungsmethodenliste - Feld legt die Höhe der Titelzeile fest |
--adyen-sdk-text-title-font-size | 16px | - Drop-in-Standardschriftgröße für Endstatus - Schriftgröße für die Kopfzeile der Drop-in-Bestellung - Schriftgröße des Titels der Drop-in-Zahlungsmethodenliste - Schriftgröße des Pay-Button-Textes - Schriftgröße für die Einführung des Directdebit_GB-Gutscheinergebnisses - Schriftgröße für den Titel der Spendenkampagne |
--adyen-sdk-text-title-font-weight | 600 | - Klicken Sie hier, um die Schriftstärke des Header-Titels zu bezahlen |
--adyen-sdk-text-title-line-height | 26px | - Textzeilenhöhe für das Ablaufdatum der gespeicherten Karte |
--adyen-sdk-text-title-l-font-size | 24px | - Schriftgröße des Gutschein-Referenztextes |
--adyen-sdk-spacer-100 | 32px | Verschiedene Stellen für Maße |
--adyen-sdk-spacer-110 | 40px | Verschiedene Stellen für Maße |
--adyen-sdk-spacer-120 | 48px | Verschiedene Stellen für Maße |
--adyen-sdk-spacer-130 | 56px | Verschiedene Stellen für Maße |
--adyen-sdk-spacer-140 | 64px | Verschiedene Stellen für Maße |
--adyen-sdk-spacer-000 | 0px | Verschiedene Stellen für Maße |
--adyen-sdk-spacer-010 | 2px | Verschiedene Stellen für Maße |
--adyen-sdk-spacer-020 | 4px | Verschiedene Stellen für Maße |
--adyen-sdk-spacer-030 | 6px | Verschiedene Stellen für Maße |
--adyen-sdk-spacer-040 | 8px | Verschiedene Stellen für Maße |
--adyen-sdk-spacer-050 | 10px | Verschiedene Stellen für Maße |
--adyen-sdk-spacer-060 | 12px | Verschiedene Stellen für Maße |
--adyen-sdk-spacer-070 | 16px | Verschiedene Stellen für Maße |
--adyen-sdk-spacer-080 | 20px | Verschiedene Stellen für Maße |
--adyen-sdk-spacer-090 | 24px | Verschiedene Stellen für Maße |
--adyen-sdk-border-radius-xs | 2px | Verschiedene Orte für den Grenzradius |
--adyen-sdk-border-radius-s | 4px | Verschiedene Orte für den Grenzradius |
--adyen-sdk-border-radius-m | 8px | Verschiedene Orte für den Grenzradius |
--adyen-sdk-border-radius-l | 12px | Verschiedene Orte für den Grenzradius |
--adyen-sdk-border-radius-xl | 24px | Verschiedene Orte für den Grenzradius |
--adyen-sdk-border-width-s | 1px | Verschiedene Orte für den Grenzradius |
--adyen-sdk-border-width-m | 2px | Verschiedene Orte für den Grenzradius |
--adyen-sdk-border-width-l | 3px | Verschiedene Orte für den Grenzradius |
--adyen-sdk-shadow-low | 0px 2px 4px rgba(0, 17, 44, 0.04), 0px 1px 2px rgba(0, 17, 44, 0.02) | - Box-Shadow für auf Karten verfügbare Markenbilder und Gutschein-Markenbilder - Boxschatten für ausgewähltes Segment |
Um die gesicherten Felder wie Kartennummer, CVC und Ablaufdatum einer Karte zu gestalten, können Sie dem Link Karteneingabefelder gestalten folgen.
Ab v5.16.0 enthalten die Drop-in- und Components-Integrationen Analyse- und Trackingfunktionen, die standardmäßig aktiviert sind. Erfahren Sie mehr darüber, was wir verfolgen und wie Sie es kontrollieren können.
Wir führen jede Pull-Anfrage im main zusammen. Unser Ziel ist es, main in gutem Zustand zu halten, sodass wir jederzeit eine neue Version veröffentlichen können.
Schauen Sie sich unsere Beitragsrichtlinien an, um herauszufinden, wie Sie eine Pull-Anfrage stellen.
Wenn Sie eine Funktionsanfrage haben oder einen Fehler oder ein technisches Problem entdecken, erstellen Sie hier ein Problem.
Bei weiteren Fragen wenden Sie sich bitte an unser Support-Team.
Dieses Repository ist unter der MIT-Lizenz verfügbar.
