# @adyen/adyen-web 中文文档

规范地址：https://npmcn.com/package/%40adyen/adyen-web/

版本：6\.48\.1
npm 元数据更新时间：2026-11-05T15:03:04.684Z
中文译文更新时间：2026-11-05T16:59:19.255Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40adyen/adyen-web
原文对照：https://npmcn.com/package/%40adyen/adyen-web/?lang=original
项目主页：https://docs.adyen.com/checkout
源码仓库：https://github.com/Adyen/adyen-web

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：12.2 MB，2563 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：5 个
- 首次发布：2020-06-10T13:56:35.374Z
- 最新版本发布：2026-11-05T15:03:04.291Z
- 近 30 天下载量：2390858（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：251（近 12 个月 39 个）

## 中文简介

[![npm](https://img.shields.io/npm/v/@adyen/adyen-web.svg)](https://www.npmjs.com/package/@adyen/adyen-web)

## 安装

```sh
npm install @adyen/adyen-web
```

也可以使用：`pnpm add @adyen/adyen-web`、`yarn add @adyen/adyen-web`、`bun add @adyen/adyen-web`

## README

[![npm](https://img.shields.io/npm/v/@adyen/adyen-web.svg)](https://www.npmjs.com/package/@adyen/adyen-web)

![Web](https://user-images.githubusercontent.com/7724351/198588741-f522c3ed-ff3c-4f70-b8cb-8ff9e6d41cfa.png)

# 阿迪恩网络

Adyen Web为您提供了构件,为您的店主创造了一次退房体验,允许他们使用自己选择的支付方法支付.

可以通过两种方式与Adyen Web整合:

-   [网络滴入](https://docs.adyen.com/online-payments/web-drop-in/):一个全能的解决方案,在您网站上接受付款的最快方式.
-   [Web 组件](https://docs.adyen.com/online-payments/web-components): 每种支付方法一个组件,并与你自己的支付形式逻辑相结合.

## 先决条件

-   [Adyen 测试账户](https://www.adyen.com/signup)
-   [API 密钥](https://docs.adyen.com/development-resources/how-to-get-the-api-key)
-   [客户端密钥](https://docs.adyen.com/development-resources/client-side-authentication#get-your-client-key)

## 投放/组件生命周期

| 主要版本 | 状态 | 折旧 | 寿终正寝 |
| --- | --- | --- | --- |
| 6.x.x (中文(简体) ) | 活动 | \-- -- . . | \-- -- . . |
| 5.x.x (中文(简体) ) | 非活动 | TBA 协会 | TBA 协会 |
| 4.x.x (中文(简体) ) | 寿终正寝 | 2025年8月 (中文(简体) ) | 2026年8月 (中文(简体) ) |
| 3.x.x (中文(简体) ) | 寿终正寝 | 2024年10月 (中文(简体) ) | 2025年10月 (中文(简体) ) |

更多关于我们版本和投放/组件生命周期的信息 [这里](https://docs.adyen.com/online-payments/upgrade-your-integration/)

## 安装

我们只提供全力支持 当你使用这些安装方法之一.

### 节点软件包管理器

1.  安装 [Adyen 网络节点软件包](https://www.npmjs.com/package/@adyen/adyen-web)数字 :

```sh
npm install @adyen/adyen-web --save
```

2.  将 Adyen Web 导入您的应用程序 :

```js
import { AdyenCheckout } from '@adyen/adyen-web';
import '@adyen/adyen-web/styles/adyen.css';
```

### 使用a `<script>` 标签

您也可以使用一个 `<script>` 标记,如 [Web 组件集成指南](https://docs.adyen.com/checkout/components-web#step-2-add-components)。 。 。 .

## 管理发展环境

**所需经费:**

-   节点 v24
-   雅恩语( Using) [核心软件包](https://yarnpkg.com/corepack) - 运行 `corepack enable` 安装节点后)

**管理环境:**

1.  克隆 [此寄存器](https://github.com/Adyen/adyen-web)。 。 。 .
2.  创建一个 `.env` 在您工程的根文件夹中遵循示例的文件 [`env.default`](https://npmcn.com/package/%40adyen/adyen-web/env.default) 并填入环境变量.
3.  通过运行安装依赖性 :

```sh
yarn install
```

4.  如果您首次运行此工程, 请运行构建脚本

```sh
yarn build
```

5.  运行开发环境, 启动服务器监听 [http://localhost:3020 (英语)](http://localhost:3020/)数字 :

```sh
yarn start
```

## 本地化

我们包含许多语言的UI本地化. 您可以检查语言和各自的翻译 [这里](https://npmcn.com/packages/server/translations/)此外,还可以定制目前的翻译 [用自己的文本替换默认文本](https://docs.adyen.com/online-payments/build-your-integration/?platform=Web&integration=Components&version=5.60.0#customize-localization) 以防万一你想这样.

## 样式

Adyen Web具有可主题性,并使用CSS变量可以被推翻来达到所期望的风格.

### 覆盖样式示例

对于不属于iframes内部的元素,您可以通过在 Cs 文件中压倒这些样式来自定义样式. 我们的风格大多以默认值的 Css 变量定义. 要覆盖这些样式, 您可以检查 DOM , 并更改 CCs 变量的值, 或是在根位, 或是针对特定元素 . 请注意,如果您更改了根级 Css 变量的值,您也会改变所有使用相同 CCs 变量的儿童元素的样式.

1.  创建 `override.css` 与您想要样式的变量
    
    ```css
    :root {
        --adyen-sdk-color-background-secondary: #f7f7f8;
    }
    ```
    
2.  确保导入 `override.css` 导入主 CSS 库后
    
    ```js
    import '@adyen/adyen-web/styles/adyen.css';
    import './override.css';
    ```
    

#### 我们在哪里定义这些 Cs 变量? 默认值是什么?

| Css 变量 | 默认值 | 范围 |
| --- | --- | --- |
| `--adyen-sdk-color-label-primary` | ![#00112c](https://placehold.co/15x15/00112c/00112c.png) `#00112c` | \- 支付表格内的标签颜色,例如表格指示、表格字段标签和上下文/帮助文本.  
\- 字段集标题颜色  
\- 输入字段文本颜色  
– 滴入支付法头,订单支付法头,默认状态文本颜色.  
\- Bacs 编辑按钮文本颜色  
\- 银行转账、支票、Blik的介绍文本颜色  
\- 捐赠状态文本颜色、竞选背景颜色  
\- UPI、ANCV、Blik、MBWay等待容器文本颜色  
\- 次要的鬼按钮文字颜色  
\- (同意)复选框标签颜色 |
| `--adyen-sdk-color-label-secondary` | ![#5c687c](https://placehold.co/15x15/5c687c/5c687c.png) `#5c687c` | \- 滴入支付法头中的额外信息的标签颜色.  
\- 免责标签颜色.  
\- QR倒数标签颜色.  
\- 只读选择和输入颜色. |
| `--adyen-sdk-color-label-tertiary` | ![#8d95a3](https://placehold.co/15x15/8d95a3/8d95a3.png) `#8d95a3` | \- 点击支付标签的标签颜色. |
| `--adyen-sdk-color-label-disabled` | ![#8d95a3](https://placehold.co/15x15/8d95a3/8d95a3.png) `#8d95a3` | \- 禁用的标签颜色 点击以支付登录按钮.  
\- 残疾部分.  
\- 装入状态下付款按钮的背景颜色. |
| `--adyen-sdk-color-label-critical` | ![#e22d2d](https://placehold.co/15x15/e22d2d/e22d2d.png) `#e22d2d` | \- 错误输入字段和错误验证消息的边框颜色. |
| `--adyen-sdk-color-label-highlight` | ![#0070f5](https://placehold.co/15x15/0070f5/0070f5.png) `#0070f5` | \- 链接按钮颜色. |
| `--adyen-sdk-color-label-on-color` | ![#ffffff](https://placehold.co/15x15/ffffff/ffffff.png) `#ffffff` | \- 按钮文字颜色.  
\- 捐赠活动描述文本颜色.  
\- 复选框检查颜色. |
| `--adyen-sdk-color-background-primary` | ![#ffffff](https://placehold.co/15x15/ffffff/ffffff.png) `#ffffff` | \- 二级支付按钮的背景颜色.  
\- 支付形式元素的背景颜色:输入元素、收音机、选择、复选框.  
\- 滴入未选中的支付项目的背景颜色. |
| `--adyen-sdk-color-background-secondary` | ![#f7f7f8](https://placehold.co/15x15/f7f7f8/f7f7f8.png) `#f7f7f8` | \- 滴入选定支付方法项目的背景颜色.  
\- 按钮组内选定按钮的背景颜色(用于捐赠组件). |
| `--adyen-sdk-color-background-secondary-hover` | ![#eeeff1](https://placehold.co/15x15/eeeff1/eeeff1.png) `#eeeff1` | \- 幽灵按钮悬浮的背景颜色. |
| `--adyen-sdk-color-background-secondary-active` | ![#e3e5e9](https://placehold.co/15x15/e3e5e9/e3e5e9.png) `#e3e5e9` | \- 幽灵按钮使用的背景颜色. |
| `--adyen-sdk-color-background-tertiary` | ![#eeeff1](https://placehold.co/15x15/eeeff1/eeeff1.png) `#eeeff1` | \- UPI 使用的分块控制的背景颜色. |
| `--adyen-sdk-color-background-disabled` | ![#eeeff1](https://placehold.co/15x15/eeeff1/eeeff1.png) `#eeeff1` | \- 已禁用的形式元素的背景颜色. |
| `--adyen-sdk-color-background-critical-strong` | ![#e22d2d](https://placehold.co/15x15/e22d2d/e22d2d.png) `#e22d2d` | \- 滴入的背景颜色删除存储的付款方法确认按钮. |
| `--adyen-sdk-color-background-inverse-primary-hover` | ![#5c687c](https://placehold.co/15x15/5c687c/5c687c.png) `#5c687c` | \- 支付按钮上徘徊的背景颜色. |
| `--adyen-sdk-color-background-always-dark` | ![#00112c](https://placehold.co/15x15/00112c/00112c.png) `#00112c` | \- 主付款按钮的背景颜色. |
| `--adyen-sdk-color-background-always-dark-active` | ![#8d95a3](https://placehold.co/15x15/8d95a3/8d95a3.png) `#8d95a3` | \- 活动并徘徊的主要支付按钮的背景颜色. |
| `--adyen-sdk-color-background-critical-strong` | ![#e22d2d](https://placehold.co/15x15/e22d2d/e22d2d.png) `#e22d2d` | \- 滴入去除存储的卡片确认,按钮背景颜色  
\- 礼品卡提示背景颜色 |
| `--adyen-sdk-color-outline-primary` | ![#dbdee2](https://placehold.co/15x15/dbdee2/dbdee2.png) `#dbdee2` | \- 滴入支付方法列表项未选择边框颜色.  
\- 突出发行商按钮盒阴影颜色.  
\- 付款形式要素(包括复选框和无线电)边框颜色. |
| `--adyen-sdk-color-outline-primary-hover` | ![#c9cdd3](https://placehold.co/15x15/c9cdd3/c9cdd3.png) `#c9cdd3` | \- 滴入支付方法列表项目徘徊和未选择的盒-阴影颜色.  
\- 无线电和复选箱盘旋 不聚焦盒-阴影颜色. |
| `--adyen-sdk-color-outline-primary-active` | ![#00112c](https://placehold.co/15x15/00112c/00112c.png) `#00112c` | \- 格式输入元素聚焦框-阴影和边框颜色. |
| `--adyen-sdk-color-outline-secondary` | ![#c9cdd3](https://placehold.co/15x15/c9cdd3/c9cdd3.png) `#c9cdd3` | \- 滴入选定的支付项目边框颜色.  
\- 降入默认状态容器边框颜色.  
\- UPI,ANCV, Blik,MBWay等待容器边框颜色.  
\- QR编码容器边框颜色. |
| `--adyen-sdk-color-outline-tertiary` | ![#8d95a3](https://placehold.co/15x15/8d95a3/8d95a3.png) `#8d95a3` | \- 附加费文本颜色  
\- 吉夫卡平衡文本颜色  
\- UPI、ANCV、Blik、MBWay等待倒数文本颜色  
\- 收音机,复选框 盘旋盒-阴影颜色  
\- 支付/ 常规按钮焦点框- 阴影颜色  
\- 内容分隔符颜色 |
| `--adyen-sdk-color-outline-disabled` | ![#dbdee2](https://placehold.co/15x15/dbdee2/dbdee2.png) `#dbdee2` | \- 次要按钮已禁用边框颜色 |
| `--adyen-sdk-color-outline-critical` | ![#e22d2d](https://placehold.co/15x15/e22d2d/e22d2d.png) `#e22d2d` | \- 放下无效的按钮边框颜色 |
| `--adyen-sdk-color-separator-primary` | ![#dbdee2](https://placehold.co/15x15/dbdee2/dbdee2.png) `#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 和卡片过期日期等安全字段样式, 您可以跟随链接 [样式卡输入字段](https://docs.adyen.com/payment-methods/cards/custom-card-integration/#styling)。 。 。 .

## 分析和数据跟踪

开始 [v 5.16.0 (韩语)](https://github.com/Adyen/adyen-web/releases/tag/v5.16.0) 滴入和组件集成包含自动打开的分析和跟踪功能。 找更多关于 [我们追踪到什么 如何控制它](https://docs.adyen.com/online-payments/analytics-and-data-tracking)。 。 。 .

## 捐款

我们把每个拉动请求合并到 `main` 树枝。 我们的目标是保持 `main` 这让我们可以随时发布新版本.

看看我们 [提供指南](https://github.com/Adyen/.github/blob/master/CONTRIBUTING.md) 找出如何提出拉动请求.

## 另见

-   [接受在线付款](https://docs.adyen.com/online-payments/)
-   [会话流程集成指南](https://docs.adyen.com/online-payments/build-your-integration/sessions-flow/?platform=Web)
-   [高级流程整合指南](https://docs.adyen.com/online-payments/build-your-integration/advanced-flow/?platform=Web)
-   [API 浏览器](https://docs.adyen.com/api-explorer/)
-   [实例整合](https://github.com/adyen-examples)
-   [Adyen 组件 JS 样本代码](https://github.com/Adyen/adyen-components-js-sample-code)
-   [为什么我们打开源代码Adyen Web](https://www.adyen.com/blog/why-we-opened-sourced-our-web-framework)

## 支助

如果你有特性请求 或发现错误或技术问题, [在此创建一个问题](https://github.com/Adyen/adyen-web/issues/new/choose)。 。 。 .

对于其他问题, [联系我们的支援队](https://www.adyen.help/hc/en-us/requests/new)。 。 。 .

## 许可证

此寄存器可在 [麻省理工学院许可证](https://npmcn.com/package/%40adyen/adyen-web/LICENSE)。 。 。 .

## 常见问题

### 如何安装 @adyen/adyen-web？

在项目目录运行 npm install @adyen/adyen-web，或使用 pnpm add / yarn add / bun add。

### @adyen/adyen-web 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @adyen/adyen-web 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @adyen/adyen-web 可以商用吗？

@adyen/adyen-web 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @adyen/adyen-web 的下载量有多少？

根据 npm 官方下载统计，@adyen/adyen-web 在 2026/10/05 – 2026/11/03 这 30 天内被下载 2,390,858 次，日均约 79,695 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @adyen/adyen-web 还在维护吗？

最新版本 6\.48\.1 发布于 2026/11/05（今天）；至今共发布 251 个版本，其中过去 12 个月发布了 39 个；首次发布于 2020/06/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。