@cybersource/flex-sdk-web

中文文档
0.3.1发布于 2020/04/09SEE LICENSE IN LICENSE.mdCommonJS零依赖近 30 天下载 3549

使用 Flex API 轻松创建支付符

中文使用文档
文档目录10 节
  1. 目录
  2. 安装
  3. 如何使用
  4. 在您的应用程序中包含
  5. 通过脚本标签包含
  6. 文档
  7. 示例整合
  8. 步骤 :
  9. 浏览器支持
  10. 版权和许可证

弹性sdk-web

npm version

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

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

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

目录

安装

以 :

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

SDK暴露为 UMD 图像 通过脚本标记提供与大多数模块加载器规格相兼容性或者在浏览器中直接使用.

如何使用

在您的应用程序中包含

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

const options = {};

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

或

通过脚本标签包含

<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公钥.
  • Flex 公用钥匙被传送到 JS 的变量 津巴布韦 格式.
  • 在按钮点击事件上,所有支付数据都被收集,并使用SDK发出一个符号创建呼叫.
  • 当符号创建时,该值被设定在隐藏字段上并提交表单.
  • 您可以使用带有后续网络源码服务的符号来完成支付(例如,在用于 简单顺序 API) (中文(简体) ).
<!-- 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>
// 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 网络来源根据网络源代码SDK许可协议发布,详见 ./LICENSE.md。 。 。 .

版本与发布记录

@cybersource/flex-sdk-web 共发布 9 个版本,首次发布于 2017/06/29;过去 12 个月发布了 0 个版本。

版本发布日期距今
0.3.1latest2020/04/096 年前
0.3.02020/04/076 年前
0.2.12017/10/249 年前
0.2.02017/10/249 年前
0.1.32017/10/179 年前
0.1.22017/06/309 年前

关于 @cybersource/flex-sdk-web 的常见问题

@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 和提交记录判断。