@ brexhq/ brex- js (英语)
一个JavaScript SDK,用于将Brex发行的卡片元素整合到网络应用中. 这个库为显示敏感的卡片信息提供了安全而基于iframe的组件.
快速启动
import Brex from '@brexhq/brex-js';
// Initialize Brex
const brex = Brex();
const elements = brex.elements();
// Create a card number display element
const cardNumber = elements.create('issuingCardNumberDisplay', {
issuingCard: 'your_issuing_card_id',
ephemeralKeySecret: 'your_ephemeral_key'
});
// Mount it to a container
cardNumber.mount('#card-number-container');
// Listen for events
cardNumber.on('complete', () => {
console.log('Card number is ready');
});
可用元素
库提供了显示卡片信息的若干要素:
issuingCardNumberDisplay: 显示牌号issuingCardCvcDisplay: 显示 CVC/ 安全代码issuingCardExpiryDisplay: 显示过期日期issuingCardPinDisplay: 显示 PINissuingCardCopyButton: 创建复制卡片细节的按钮
样式元素
您可以使用支持的样式属性自定义元素的外观 :
const element = elements.create('issuingCardNumberDisplay', {
issuingCard: 'your_issuing_card_id',
ephemeralKeySecret: 'your_ephemeral_key',
style: {
fontSize: '16px',
fontFamily: 'Arial, sans-serif',
color: '#333333',
fontWeight: 'normal',
letterSpacing: 'normal',
lineHeight: '1.5',
padding: '10px'
}
});
// Update styles later
element.update({
fontSize: '18px',
color: '#000000'
});
复制按钮
复制按钮元素允许用户复制卡片细节:
const copyButton = elements.create('issuingCardCopyButton', {
issuingCard: 'your_issuing_card_id',
ephemeralKeySecret: 'your_ephemeral_key',
toCopy: 'number' // 'number', 'cvc', 'expiry', or 'pin'
});
copyButton.mount('#copy-button-container');
copyButton.on('copied', () => {
console.log('Card number copied');
});
事件处理
所有要素都支持以下活动:
complete: 当元素被完全装入时起火loading: 当元素被装入时已开火error: 出错时已开火copied: 内容被复制时被点燃(用于复制按钮)
element.on('complete', () => {
console.log('Element is ready');
});
element.on('error', () => {
console.log('Something went wrong');
});
预装请求者 iframe( 可选)
在幕后现场, Brex(...).elements() 挂载隐藏的“ 请求者” 框
第一次 create() 名为. iframe 需要下载并解析其
在获取敏感细节之前拥有捆绑, 它可以添加~1-2秒
到用户等待卡 PAN 出现在第一视图时.
如果您的用户界面提前知道卡片视图即将到来( 例如, a)
用户刚刚导航到钱包/卡路由,您可以拨打 prewarm()
提前挂载请求者 iframe , 以便其靴子从用户的
关键路径 :
import Brex from '@brexhq/brex-js';
const elements = Brex().elements();
// Some time before the user actually opens a card. Idempotent and cheap.
elements.prewarm();
// Later — when the user opens the card. The requester is already
// mounted, so this skips the iframe-boot step and goes straight to
// fetching card details.
const cardNumber = elements.create('issuingCardNumberDisplay', {
issuingCard: 'your_issuing_card_id',
ephemeralKeySecret: 'your_ephemeral_key',
});
cardNumber.mount('#card-number-container');
注释:
- 《同上》: 调用
prewarm()多次只挂载一帧. 安全不受每个组成部分的影响. - 没有卡片数据发送数字 :
prewarm()不取参数并发送否issuingCard, (中文(简体) ),ephemeralKeySecret,或任何其他用户/卡标识符. 仅create()这样做. - 只有客户端: 将框架附加到
document.body; 通话期间 SSR会投出. - 后无
create():如果请求者已经挂载,则随后prewarm()电话什么都不做,也不放过任何事件.
在使用仪器时(见下文),升温前释放出单个仪器
requesterPrewarmed 事件可以测量 iframe 需要多长时间
进入真正的用户状态.
仪器(可选)
Brex可以发射生命周期事件 覆盖请求者 Iframe握手 可见元素 iframes, 以及它们之间的后Message回转。 使用 这是用来测量SDK的计时 并转发到你的RUM/遥测管.
import Brex from '@brexhq/brex-js';
const brex = Brex({
environment: 'production',
// Called for every lifecycle event. Keep it cheap.
onEvent: (event) => {
// event = { type, timestamp, key?, elementType?, issuingCard?, metadata? }
datadogRum.addAction('brex_js_event', event);
},
// Optional: also mirror events to console.debug. Default false.
debug: process.env.NODE_ENV !== 'production',
});
排放事件类型包括:
- 请求者 iframe :
requesterPrewarmed(仅在prewarm()称为,requesterCreated, (中文(简体) ),requesterReady, (中文(简体) ),requesterPortTransferred, (中文(简体) ),requestCardDetailsSent, (中文(简体) ),cardDetailsReceived, (中文(简体) ),cardDetailsForwarded - 可见元素 iframe :
elementCreated, (中文(简体) ),elementReady, (中文(简体) ),elementPortTransferred, (中文(简体) ),elementMounted, (中文(简体) ),elementUnmounted, (中文(简体) ),elementDestroyed - 错误 :
elementError
每次活动都包含一个 timestamp,并在适用的情况下,iframe key, (中文(简体) ),
elementType,以及消费者提供的 issuingCard 关系.
这个 timestamp 实值 performance.timeOrigin + performance.now() (高比率)
绝对时间戳与 Date.now()) (中文(简体) ). SDK使用 Iframes 软件
引擎盖下——每个机身都有自己的 performance.timeOrigin,那么简单
performance.now() 值在父窗口之间不具有可比性
还有Iframes。 添加中 timeOrigin 生成您可以横切的值
王国。 在同一领域,减去两个乘以的印记产生同样的效果
结果是 performance.now() 算术(来源取消). 见
MDN: 在上下文之间同步时间。 。 。 .
电子密钥和卡片细节无论如何都不会包含在内 载荷.
如果没有 onEvent 也没有 debug 提供, SDK 使用不开放发射器
并且不产生运行时间费用.
完整示例
以下是一个完整的例子,说明如何显示所有卡片信息:
import Brex from '@brexhq/brex-js';
const brex = Brex();
const elements = brex.elements();
// Common configuration
const config = {
issuingCard: 'your_issuing_card_id',
ephemeralKeySecret: 'your_ephemeral_key',
style: {
fontSize: '16px',
fontFamily: 'Arial, sans-serif',
color: '#333333'
}
};
// Create elements
const cardNumber = elements.create('issuingCardNumberDisplay', config);
const cardCvc = elements.create('issuingCardCvcDisplay', config);
const cardExpiry = elements.create('issuingCardExpiryDisplay', config);
const cardPin = elements.create('issuingCardPinDisplay', config);
// Mount elements
cardNumber.mount('#card-number-container');
cardCvc.mount('#card-cvc-container');
cardExpiry.mount('#card-expiry-container');
cardPin.mount('#card-pin-container');
// Add copy buttons
const copyNumber = elements.create('issuingCardCopyButton', {
...config,
toCopy: 'number'
});
copyNumber.mount('#copy-number-button');
// Event handling
cardNumber.on('complete', () => console.log('Card number ready'));
copyNumber.on('copied', () => console.log('Card number copied'));
必需的 HTML :
<div id="card-number-container"></div>
<div id="copy-number-button">Copy</div>
<div id="card-cvc-container"></div>
<div id="card-expiry-container"></div>
<div id="card-pin-container"></div>