adyen web
6.5.1
Adyen Web 为您提供了为购物者创建结账体验的构建模块，允许他们使用自己选择的支付方式进行支付。
您可以通过两种方式与 Adyen Web 集成：
| 主要版本 | 状态 | 已弃用 | 寿命终结 |
|---|---|---|---|
| 6.xx | 积极的 | --- | --- |
| 5.xx | 不活跃 | 待定 | 待定 |
| 4.xx | 不活跃 | 待定 | 待定 |
| 3.xx | 已弃用 | 2024 年 10 月 | 2025 年 10 月 |
有关我们的版本控制和 Drop-in/Components 生命周期的更多信息，请参阅此处
仅当您使用其中一种安装方法时，我们才提供全面支持。
npm install @adyen/adyen-web --save import { AdyenCheckout } from '@adyen/adyen-web' ;
import '@adyen/adyen-web/styles/adyen.css' ;<script>标签您还可以使用<script>标签导入 Adyen Web，如 Web 组件集成指南中所示。
要求：
运行环境：
env.default中的示例在项目的根文件夹中创建一个.env文件，并填写环境变量。yarn installyarn buildyarn start我们包含多种语言的 UI 本地化版本。您可以在此处查看语言及其各自的翻译。此外，如果您需要的话，可以自定义当前翻译，用您自己的文本替换默认文本。
Adyen Web 是可主题化的，并利用可以覆盖的 CSS 变量来实现所需的样式。
对于不在 iframe 内的元素，您可以通过在 css 文件中覆盖这些样式来自定义样式。我们的大多数样式都是使用带有默认值的 css 变量定义的。要覆盖这些样式，您可以检查 DOM 并在根级别或通过针对特定元素来更改 css 变量的值。请注意，如果您在根级别更改 css 变量的值，您也会更改使用相同 css 变量的所有子元素的样式。
使用您想要设置样式的变量创建override.css
: root {
--adyen-sdk-color-background-secondary : # f7f7f8 ;
}确保在导入库的主 CSS 后导入override.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 和卡到期日期等安全字段的样式，您可以点击链接设置卡输入字段的样式。
从 v5.16.0 开始，Drop-in 和组件集成包含默认打开的分析和跟踪功能。详细了解我们跟踪的内容以及您如何控制它。
我们将每个拉取请求合并到main分支中。我们的目标是保持main良好状态，这使我们能够在需要时发布新版本。
请查看我们的贡献指南，了解如何提出拉取请求。
如果您有功能请求，或者发现错误或技术问题，请在此处创建问题。
如有其他问题，请联系我们的支持团队。
该存储库可在 MIT 许可证下使用。
