弹性sdk-web
存储客户的卡片数据会大幅提高您的重复客户转换率,但也会带来额外的风险,同时 PCI 安保部 间接费用 -- -- 通过标出卡片数据来减轻这些费用。 CyberSource 将客户的卡数据替换为只能由您使用的符号.
安全接收软调图 API 提供了一个安全的方法,用于标出卡片数据并减轻您的PCI DSS负担. 卡片数据在客户的设备上加密,并直接发送到网络源码,绕过你的系统.
SDK简化了客户端集成,并实现了:
- 全面控制用户体验
- 宽范围浏览器支持
- SAQ A-EP 软件 资格
目录
安装
以 :
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。 。 。 .