阿迪恩网络
Adyen Web为您提供了构件,为您的店主创造了一次退房体验,允许他们使用自己选择的支付方法支付.
可以通过两种方式与Adyen Web整合:
先决条件
投放/组件生命周期
| 主要版本 | 状态 | 折旧 | 寿终正寝 |
|---|---|---|---|
| 6.x.x (中文(简体) ) | 活动 | -- -- . . | -- -- . . |
| 5.x.x (中文(简体) ) | 非活动 | TBA 协会 | TBA 协会 |
| 4.x.x (中文(简体) ) | 寿终正寝 | 2025年8月 (中文(简体) ) | 2026年8月 (中文(简体) ) |
| 3.x.x (中文(简体) ) | 寿终正寝 | 2024年10月 (中文(简体) ) | 2025年10月 (中文(简体) ) |
更多关于我们版本和投放/组件生命周期的信息 这里
安装
我们只提供全力支持 当你使用这些安装方法之一.
节点软件包管理器
- 安装 Adyen 网络节点软件包数字 :
npm install @adyen/adyen-web --save
- 将 Adyen Web 导入您的应用程序 :
import { AdyenCheckout } from '@adyen/adyen-web';
import '@adyen/adyen-web/styles/adyen.css';
使用a <script> 标签
您也可以使用一个 <script> 标记,如 Web 组件集成指南。 。 。 .
管理发展环境
所需经费:
- 节点 v24
- 雅恩语( Using) 核心软件包 - 运行
corepack enable安装节点后)
管理环境:
- 克隆 此寄存器。 。 。 .
- 创建一个
.env在您工程的根文件夹中遵循示例的文件env.default并填入环境变量. - 通过运行安装依赖性 :
yarn install
- 如果您首次运行此工程, 请运行构建脚本
yarn build
- 运行开发环境, 启动服务器监听 http://localhost:3020 (英语)数字 :
yarn start
本地化
我们包含许多语言的UI本地化. 您可以检查语言和各自的翻译 这里此外,还可以定制目前的翻译 用自己的文本替换默认文本 以防万一你想这样.
样式
Adyen Web具有可主题性,并使用CSS变量可以被推翻来达到所期望的风格.
覆盖样式示例
对于不属于iframes内部的元素,您可以通过在 Cs 文件中压倒这些样式来自定义样式. 我们的风格大多以默认值的 Css 变量定义. 要覆盖这些样式, 您可以检查 DOM , 并更改 CCs 变量的值, 或是在根位, 或是针对特定元素 . 请注意,如果您更改了根级 Css 变量的值,您也会改变所有使用相同 CCs 变量的儿童元素的样式.
-
创建
override.css与您想要样式的变量:root { --adyen-sdk-color-background-secondary: #f7f7f8; } -
确保导入
override.css导入主 CSS 库后import '@adyen/adyen-web/styles/adyen.css'; import './override.css';
我们在哪里定义这些 Cs 变量? 默认值是什么?
| 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 | - 附加费文本颜色 - 吉夫卡平衡文本颜色 - 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 | - 无线电文本行高 - 付费线路高度 - 点击以支付 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 和卡片过期日期等安全字段样式, 您可以跟随链接 样式卡输入字段。 。 。 .
分析和数据跟踪
开始 v 5.16.0 (韩语) 滴入和组件集成包含自动打开的分析和跟踪功能。 找更多关于 我们追踪到什么 如何控制它。 。 。 .
捐款
我们把每个拉动请求合并到 main 树枝。 我们的目标是保持 main 这让我们可以随时发布新版本.
看看我们 提供指南 找出如何提出拉动请求.
另见
支助
如果你有特性请求 或发现错误或技术问题, 在此创建一个问题。 。 。 .
对于其他问题, 联系我们的支援队。 。 。 .
许可证
此寄存器可在 麻省理工学院许可证。 。 。 .