adyen web
6.5.1
Adyen Web предоставляет вам строительные блоки для создания процесса оформления заказа для ваших покупателей, позволяя им платить, используя способ оплаты по своему выбору.
Вы можете интегрироваться с Adyen Web двумя способами:
| Основная версия | Состояние | Устарело | Конец жизни |
|---|---|---|---|
| 6.хх | Активный | --- | --- |
| 5.хх | Неактивный | будет объявлено позже | будет объявлено позже |
| 4.хх | Неактивный | будет объявлено позже | будет объявлено позже |
| 3.хх | Устарело | октябрь 2024 г. | октябрь 2025 г. |
Более подробную информацию о нашем управлении версиями и жизненном цикле Drop-in/Components можно найти здесь.
Мы предоставляем полную поддержку только в том случае, если вы используете один из этих методов установки.
npm install @adyen/adyen-web --save import { AdyenCheckout } from '@adyen/adyen-web' ;
import '@adyen/adyen-web/styles/adyen.css' ;<script> Вы также можете импортировать Adyen Web с помощью тега <script> , как показано в руководстве по интеграции веб-компонентов.
Требования:
Чтобы запустить среду:
.env в корневой папке вашего проекта, следуя примеру env.default , и заполните переменные среды.yarn installyarn buildyarn startМы включаем локализацию пользовательского интерфейса для многих языков. Вы можете проверить языки и их переводы здесь. Кроме того, можно настроить текущий перевод, заменив текст по умолчанию своим собственным текстом, если вы этого захотите.
Adyen Web поддерживает темы и использует переменные CSS, которые можно переопределить для достижения желаемого стиля.
Для элементов, которые не находятся внутри iframe, вы можете настроить стили, переопределив эти стили в файле CSS. Большинство наших стилей определены с помощью переменных CSS со значениями по умолчанию. Чтобы переопределить эти стили, вы можете проверить DOM и изменить значения переменных CSS либо на корневом уровне, либо нацелившись на определенные элементы. Имейте в виду, что если вы измените значения переменных CSS на корневом уровне, вы также измените стили для всех дочерних элементов, которые используют одни и те же переменные CSS.
Создайте override.css с переменными, которые вы хотите стилизовать.
: root {
--adyen-sdk-color-background-secondary : # f7f7f8 ;
} Обязательно импортируйте override.css после импорта основного CSS библиотеки.
import '@adyen/adyen-web/styles/adyen.css' ;
import './override.css' ; | CSS-переменная | Значение по умолчанию | Объем |
|---|---|---|
--adyen-sdk-color-label-primary | #00112c | - Цвет меток внутри форм оплаты, таких как инструкции формы, метки полей формы и контекстные/вспомогательные тексты. - Цвет заголовка набора полей - Цвет текста поля ввода - Заголовок метода оплаты, заголовок метода оплаты заказа, цвет текста статуса по умолчанию. - Цвет текста кнопки редактирования Bacs - Цвет вводного текста для банковского перевода, ваучеров, Blik - Цвет текста статуса пожертвования, цвет фона кампании. - UPI, ANCV, Blik, MBWay ожидают цвета текста контейнера - Вторичный цвет текста призрачных кнопок. - Цвет метки флажка (Согласие) |
--adyen-sdk-color-label-secondary | #5c687c | - Цвет метки для дополнительной информации в заголовке раскрывающегося способа оплаты. - Цвет этикетки об отказе от ответственности. - Цвет этикетки обратного отсчета QR. - Только для чтения выберите и введите цвет. |
--adyen-sdk-color-label-tertiary | #8d95a3 | - Цвет метки для ярлыков «нажми, чтобы заплатить». |
--adyen-sdk-color-label-disabled | #8d95a3 | - Цвет метки для отключенной кнопки выхода «Нажмите, чтобы заплатить». - Отключенный сегмент. - Цвет фона кнопки оплаты в состоянии загрузки. |
--adyen-sdk-color-label-critical | #e22d2d | - Цвет границы для полей ввода ошибок и сообщения о проверке ошибки. |
--adyen-sdk-color-label-highlight | #0070f5 | - Цвет кнопки ссылки. |
--adyen-sdk-color-label-on-color | #ffffff | - Цвет текста кнопки. - Цвет текста описания кампании пожертвований. - Цвет флажка. |
--adyen-sdk-color-background-primary | #ffffff | — Цвет фона для кнопки «Вторичная оплата». - Цвет фона для элементов платежной формы: элемент ввода, радио, выбор, флажок. - Цвет фона для вставных невыбранных элементов платежа. |
--adyen-sdk-color-background-secondary | #f7f7f8 | - Цвет фона для выбранного метода оплаты. - Цвет фона выбранной кнопки внутри группы кнопок (используется в компоненте «Пожертвование»). |
--adyen-sdk-color-background-secondary-hover | #eeeff1 | - Цвет фона для наведения кнопки-призрака. |
--adyen-sdk-color-background-secondary-active | #e3e5e9 | - Цвет фона активной кнопки-призрака. |
--adyen-sdk-color-background-tertiary | #eeeff1 | — Цвет фона для сегментированного элемента управления, используемого UPI. |
--adyen-sdk-color-background-disabled | #eeeff1 | — Цвет фона для отключенных элементов формы. |
--adyen-sdk-color-background-critical-strong | #e22d2d | - Цвет фона для кнопки подтверждения удаления сохраненных способов оплаты. |
--adyen-sdk-color-background-inverse-primary-hover | #5c687c | - Цвет фона при наведении на кнопку оплаты. |
--adyen-sdk-color-background-always-dark | #00112c | - Цвет фона основной кнопки оплаты. |
--adyen-sdk-color-background-always-dark-active | #8d95a3 | - Цвет фона активной и наведенной кнопки основного платежа. |
--adyen-sdk-color-background-critical-strong | #e22d2d | - Удаление подтверждения сохраненной карты, цвет фона кнопки. - Цвет фона оповещения о подарочной карте |
--adyen-sdk-color-outline-primary | #dbdee2 | - Цвет границы элемента списка способов оплаты не выбран. - Цвет тени блока кнопок выделенных эмитентов. - Цвет границы элементов платежной формы (включая флажок и радио). |
--adyen-sdk-color-outline-primary-hover | #c9cdd3 | — Наведение курсора на элемент списка способов оплаты и невыбранный цвет тени поля. — При наведении радио и флажка не сфокусирован цвет тени блока. |
--adyen-sdk-color-outline-primary-active | #00112c | - Формируйте элементы ввода, ориентированные на тень блока и цвет границы. |
--adyen-sdk-color-outline-secondary | #c9cdd3 | - Вставьте цвет границы выбранной платежной позиции. — Цвет границы контейнера статуса по умолчанию. - UPI, ANCV, Blik, MBWay ожидают цвета границы контейнера. - Цвет границы контейнера с QR-кодом. |
--adyen-sdk-color-outline-tertiary | #8d95a3 | - Цвет границы оплаты заказа, цвет текста надбавки. - Цвет текста баланса GIF-карты - UPI, ANCV, Blik, MBWay ожидают цвет текста обратного отсчета - Радио, флажок при наведении - цвет тени - Платная / обычная кнопка фокусировки - цвет тени - Цвет разделителя контента |
--adyen-sdk-color-outline-disabled | #dbdee2 | - Второстепенная кнопка отключила цвет рамки. |
--adyen-sdk-color-outline-critical | #e22d2d | - Выпадающий неверный цвет границы кнопки. |
--adyen-sdk-color-separator-primary | #dbdee2 | - В полях ввода, выбора, флажка и радиоформы неверный цвет границы. |
--adyen-sdk-text-caption-line-height | 18px | - Различные места, не являющиеся телом/подзаголовком/заголовком |
--adyen-sdk-text-caption-font-size | 12px | - Размер шрифта сообщения о подарочной карте - Размер шрифта текста дополнительной информации в элементе списка способов оплаты. - Размер шрифта текста сообщения об отказе от ответственности - Инструкция поля формы, контекстная, размер шрифта текста ошибки. |
--adyen-sdk-text-body-font-size | 14px | - Различные места, не имеющие заголовка/подзаголовка/подписи |
--adyen-sdk-text-body-line-height | 20px | - Высота строки радиотекста - Высота строки инструкции Payme - Нажмите, чтобы оплатить высоту строки информации о флажке otp. - Высота строки метки поля формы. |
--adyen-sdk-text-body-font-weight | 400 | - Сохраненная дата истечения срока действия карты, вес шрифта ввода текста |
--adyen-sdk-text-body-stronger-font-weight | 500 | - Вес шрифта текста кнопки выбранного эмитента - Вес шрифта заголовка элемента списка способов оплаты. - Заголовок заказа и вычитаемая сумма шрифта. - Надежный вес шрифта описания - Вес шрифта текста кнопки оплаты. - Вес шрифта сегментированного управляющего текста UPI |
--adyen-sdk-text-subtitle-font-size | 16px | - Размер шрифта помощника Blik - Доверчивый заголовок описания - UPI, ANCV, Blik, MBWay ожидают субтитров и размера индикаторного шрифта - QR-субтитры и размер индикаторного шрифта - Ввод, выпадающий размер шрифта текста в полях ввода. - Размер шрифта суммы ваучера |
--adyen-sdk-text-subtitle-font-weight | 500 | - Поле устанавливает толщину шрифта заголовка. |
--adyen-sdk-text-subtitle-stronger-font-weight | 600 | - Вес шрифта метки списка способов оплаты. |
--adyen-sdk-text-subtitle-line-height | 26px | - Высота строки метки списка способов оплаты. - Поле устанавливает высоту строки заголовка. |
--adyen-sdk-text-title-font-size | 16px | - Размер шрифта окончательных статусов по умолчанию. - Размер шрифта заголовка заказа. - Размер шрифта заголовка элемента списка способов оплаты. - Размер шрифта текста кнопки оплаты. - Размер шрифта введения результата ваучера Directdebit_GB - Размер шрифта названия кампании пожертвований |
--adyen-sdk-text-title-font-weight | 600 | - Нажмите, чтобы оплатить вес шрифта заголовка заголовка. |
--adyen-sdk-text-title-line-height | 26px | - Высота строки текста ввода даты истечения срока действия карты. |
--adyen-sdk-text-title-l-font-size | 24px | - Размер шрифта текста ссылки на ваучер. |
--adyen-sdk-spacer-100 | 32px | Различные места для размеров |
--adyen-sdk-spacer-110 | 40px | Различные места для размеров |
--adyen-sdk-spacer-120 | 48px | Различные места для размеров |
--adyen-sdk-spacer-130 | 56px | Различные места для размеров |
--adyen-sdk-spacer-140 | 64px | Различные места для размеров |
--adyen-sdk-spacer-000 | 0px | Различные места для размеров |
--adyen-sdk-spacer-010 | 2px | Различные места для размеров |
--adyen-sdk-spacer-020 | 4px | Различные места для размеров |
--adyen-sdk-spacer-030 | 6px | Различные места для размеров |
--adyen-sdk-spacer-040 | 8px | Различные места для размеров |
--adyen-sdk-spacer-050 | 10px | Различные места для размеров |
--adyen-sdk-spacer-060 | 12px | Различные места для размеров |
--adyen-sdk-spacer-070 | 16px | Различные места для размеров |
--adyen-sdk-spacer-080 | 20px | Различные места для размеров |
--adyen-sdk-spacer-090 | 24px | Различные места для размеров |
--adyen-sdk-border-radius-xs | 2px | Различные места пограничного радиуса |
--adyen-sdk-border-radius-s | 4px | Различные места пограничного радиуса |
--adyen-sdk-border-radius-m | 8px | Различные места пограничного радиуса |
--adyen-sdk-border-radius-l | 12px | Различные места пограничного радиуса |
--adyen-sdk-border-radius-xl | 24px | Различные места пограничного радиуса |
--adyen-sdk-border-width-s | 1px | Различные места пограничного радиуса |
--adyen-sdk-border-width-m | 2px | Различные места пограничного радиуса |
--adyen-sdk-border-width-l | 3px | Различные места пограничного радиуса |
--adyen-sdk-shadow-low | 0px 2px 4px rgba(0, 17, 44, 0.04), 0px 1px 2px rgba(0, 17, 44, 0.02) | - Тень коробки для изображений брендов, доступных для карт, и изображений брендов ваучеров. - Тень окна для выбранного сегмента |
Чтобы стилизовать защищенные поля, такие как номер карты, CVC и срок действия карты, вы можете перейти по ссылке Стилизация полей ввода карты.
Начиная с версии 5.16.0, интеграция Drop-in и Components содержит функции аналитики и отслеживания, которые включены по умолчанию. Узнайте больше о том, что мы отслеживаем и как вы можете этим управлять.
Мы объединяем каждый запрос на включение в main ветку. Мы стремимся поддерживать main в хорошей форме, что позволяет нам выпускать новую версию в любое время.
Ознакомьтесь с нашими рекомендациями по участию, чтобы узнать, как создать запрос на включение.
Если у вас есть запрос на добавление функции или вы заметили ошибку или техническую проблему, создайте проблему здесь.
По другим вопросам обращайтесь в нашу службу поддержки.
Этот репозиторий доступен по лицензии MIT.
