# @cybersource/flex-sdk-web 中文文档

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

版本：0\.3\.1
npm 元数据更新时间：2022-06-12T16:50:34.217Z
中文译文更新时间：2026-11-11T06:44:48.299Z
软件包许可：SEE LICENSE IN LICENSE\.md

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

原始 npm 页面：https://www.npmjs.com/package/%40cybersource/flex-sdk-web
原文对照：https://npmcn.com/package/%40cybersource/flex-sdk-web/?lang=original
项目主页：https://github.com/CyberSource/cybersource-flex-samples#readme
源码仓库：https://github.com/CyberSource/cybersource-flex-samples

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

- 包体积（解压后）：1.1 MB，32 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2017-06-29T15:45:44.869Z
- 最新版本发布：2020-04-08T17:28:12.096Z
- 近 30 天下载量：3549（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：9（近 12 个月 0 个）

## 中文简介

使用 Flex API 轻松创建支付符

## 安装

```sh
npm install @cybersource/flex-sdk-web
```

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

## README

# 弹性sdk-web

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

存储客户的卡片数据会大幅提高您的重复客户转换率,但也会带来额外的风险,同时 [PCI 安保部](https://www.pcisecuritystandards.org/) 间接费用 -- -- 通过标出卡片数据来减轻这些费用。 CyberSource 将客户的卡数据替换为只能由您使用的符号.

安全接收软调图 API 提供了一个安全的方法,用于标出卡片数据并减轻您的PCI DSS负担. 卡片数据在客户的设备上加密,并直接发送到网络源码,绕过你的系统.

SDK简化了客户端集成,并实现了:

-   全面控制用户体验
-   宽范围浏览器支持
-   [SAQ A-EP 软件](https://www.pcisecuritystandards.org/documents/PCI-DSS-v3_2-SAQ-A_EP-rev1_1.pdf) 资格

## 目录

-   [安装](https://npmcn.com/package/%40cybersource/flex-sdk-web/#readme-installation)
-   [如何使用](https://npmcn.com/package/%40cybersource/flex-sdk-web/#readme-how-to-use)
-   [示例整合](https://npmcn.com/package/%40cybersource/flex-sdk-web/#readme-example-integration)
-   [浏览器支持](https://npmcn.com/package/%40cybersource/flex-sdk-web/#readme-browser-support)
-   [版权和许可证](https://npmcn.com/package/%40cybersource/flex-sdk-web/#readme-copyright-and-license)

## 安装

以 :

```
yarn add @cybersource/flex-sdk-web
# or
npm install @cybersource/flex-sdk-web --save
```

SDK暴露为 [UMD 图像](https://github.com/umdjs/umd) 通过脚本标记提供与大多数模块加载器规格相兼容性或者在浏览器中直接使用.

## 如何使用

### 在您的应用程序中包含

```js
import flex from '@cybersource/flex-sdk-web';

const options = {};

flex.createToken(options, response => {
  // use response
});
```

或

### 通过脚本标签包含

```html
<html>
  <body>
    <script src="./YOUR_ASSETS_PATH/flex-sdk-web.js"></script>
    <script>
      var options = {};

      FLEX.createToken(options, function(response) {
        // use response
      });
    </script>
  </body>
</html>
```

## 文档

完整文件载于 `/docs` 文件夹位于安装目录的根.

## 示例整合

SDK对您的支付流量设计没有规定, 对您的开发堆栈的假设很少. 它很容易融入任何前端设置. 下面描述的是一个使用完整页面刷新并形成POST的网络应用程序的最小例子.

### 步骤 :

-   对于每笔交易,在翻出出页面前,应当获取一个新的Flex公钥.
    -   参见 [关于如何请求密钥的文件](https://developer.cybersource.com/api/developer-guides/dita-flex/SAFlexibleToken.html)。 。 。 .
-   Flex 公用钥匙被传送到 JS 的变量 [津巴布韦](https://tools.ietf.org/html/rfc7517) 格式.
-   在按钮点击事件上,所有支付数据都被收集,并使用SDK发出一个符号创建呼叫.
-   当符号创建时,该值被设定在隐藏字段上并提交表单.
-   您可以使用带有后续网络源码服务的符号来完成支付(例如,在用于 [简单顺序 API](https://www.cybersource.com/developers/integration_methods/simple_order_and_soap_toolkit_api/)) (中文(简体) ).

```html
<!-- checkout template -->
<html>
  <body>
    <form id="paymentForm" action="/your/server/endpoint" method="post">
      <input type="text" id="cardNumber" />
      <input type="text" name="securityCode" />
      <input type="text" name="cardExpirationMonth" />
      <input type="text" name="cardExpirationYear" />
      <select name="cardType">
        <option value="001">VISA</option>
        <option value="002">MasterCard</option>
        <option value="003">AmericanExpress</option>
      </select>
      <input type="hidden" name="token" />
      <button type="button" id="payBtn">Pay Now</button>
    </form>
    <script>
      var jwk = {
        /* flex public key in jwk format */
      };
    </script>
    <script src="integration.js"></script>
  </body>
</html>
```

```js
// integration.js
import flex from '@cybersource/flex-sdk-web';

document.querySelector('#payBtn').addEventListener('click', () => {
  const options = {
    kid: jwk.kid,
    keystore: jwk,
    encryptionType: 'RsaOaep', // ensure this matches the encryptionType you specified when creating your key
    cardInfo: {
      cardNumber: document.querySelector('#cardNumber').value,
      cardType: document.querySelector('select[name="cardType"]').value,
      cardExpirationMonth: document.querySelector('input[name="cardExpirationMonth"]').value,
      cardExpirationYear: document.querySelector('input[name="cardExpirationYear"]').value
    }
  };

  flex.createToken(options, response => {
    if (response.error) {
      alert('There has been an error!');
      console.log(response);
      return;
    }

    document.querySelector("input[name='token']").value = response.token;
    document.querySelector('#paymentForm').submit();
  });
});
```

_注意SDK可以很容易地被集成到一个单页应用程序中,使用AJAX进行密钥取和令牌提交._

## 浏览器支持

-   颜色37+
-   互联网探索者 11
-   萨法里7.1+\*
-   iOS 萨法里8+\*
-   Firefox 34+ (英语)
-   边缘12+

_注意Safari 10和以下不支持加密 Type of RsaOaep256_

## 版权和许可证

代码和文件版权2017 [网络来源](http://www.cybersource.com/)根据网络源代码SDK许可协议发布,详见 `./LICENSE.md`。 。 。 .

## 常见问题

### @cybersource/flex-sdk-web 是什么？

使用 Flex API 轻松创建支付符

### 如何安装 @cybersource/flex-sdk-web？

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

### @cybersource/flex-sdk-web 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/cybersource\_\_flex-sdk-web 是否存在。

### @cybersource/flex-sdk-web 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @cybersource/flex-sdk-web 可以商用吗？

@cybersource/flex-sdk-web 使用 SEE LICENSE IN LICENSE\.md 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @cybersource/flex-sdk-web 的下载量有多少？

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

### @cybersource/flex-sdk-web 还在维护吗？

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