@efox/payment-element
v1.3.24
Published
payment element sdk
Downloads
193
Maintainers
ron0115
hiitiger
ckken
doerme
hupp
magic_zhong
yz101x
wangcylive
tim2018
linhaoran
yangshangzhi
lucky-dog
wu_wei
nijina
zhengy1995
bennyshi
yellowbeee
keylennKeywords
Readme
payment-element
payment element sdk
🔗 详细文档
📦安装
node module install
npm i @efox/payment-element
or
yarn add @efox/payment-element
CND usage
<script src="https://cdn.jsdelivr.net/npm/@efox/[email protected]/dist/index.min.js"></script>🔨快速接入
node module import
import paymentElement from '@efox/payment-element'
const initData = {
loopTime: '6000',
env: 'dev',
deviceTag: navigator.userAgent.indexOf('iPhone') > -1 || navigator.userAgent.indexOf('Android') > -1 ? 'phone' : 'pc',
appId: '999',
merchant: {
// 商家信息
merchantId: '1056304931088238592',
merchantSiteCountry: 'SG', // [必传]所在国家
settlementCurrency: 'SGD', // [必传]结算币种
mcc: '5691', // [选传]商家码
},
themeData: {
version: 'v2',
},
lang: {
formComponent: {
holderName: {
labelTitle: '持卡人名字',
placeholder: '持卡人名字',
errorTips: '持卡人名字 是必須的',
tips: '與信用卡上名稱相同',
},
cardNumber: {
labelTitle: '信用卡號碼',
placeholder: '信用卡號碼',
errorTips: '信用卡號碼 是必須的',
tips: '所有交易都是安全且加密的',
},
expiryDate: {
labelTitle: '到期日',
placeholder: 'MM/YY',
errorTips: '到期日 是必須的',
},
cvv: {
labelTitle: '安全碼(CVC)',
placeholder: '3碼 ',
errorTips: '安全碼 是必須的',
tips: '一般位於卡片後方',
},
payMethod: {
text: '已選擇的付款方式: ',
creditCard: '信用卡',
},
},
},
footer:
'<span style="font-family: Helvetica;font-style : normal;font-weight: normal;font-size : 11px;line-height: 16px;color : #1E1E1E;opacity: 0.4;">This website USES TapPay SSL transaction transmission system of Jooray Technology, which can perfect and protect your payment transmission data through PCI-DSS, VISA, MasterCard and other industry data security Level 1 Level. MasterCard and other industry data security Level 1 Level.</span>',
}
// new paymentElement(domId, initialData)
new paymentElement('payment', initData)CDN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment Element Quick Example</title>
<script src="https://cdn.jsdelivr.net/npm/@efox/[email protected]/dist/index.js "></script>
</head>
<body>
<div id="payment"></div>
<script>
const initData = {
loopTime: '6000',
env: 'dev',
deviceTag: navigator.userAgent.indexOf('iPhone') > -1 || navigator.userAgent.indexOf('Android') > -1 ? 'phone' : 'pc',
appId: '999',
merchant: {
// 商家信息
merchantId: '1056304931088238592',
merchantSiteCountry: 'SG', // [必传]所在国家
settlementCurrency: 'SGD', // [必传]结算币种
mcc: '5691', // [选传]商家码
},
themeData: {
version: 'v2',
},
lang: {
formComponent: {
holderName: {
labelTitle: '持卡人名字',
placeholder: '持卡人名字',
errorTips: '持卡人名字 是必須的',
tips: '與信用卡上名稱相同',
},
cardNumber: {
labelTitle: '信用卡號碼',
placeholder: '信用卡號碼',
errorTips: '信用卡號碼 是必須的',
tips: '所有交易都是安全且加密的',
},
expiryDate: {
labelTitle: '到期日',
placeholder: 'MM/YY',
errorTips: '到期日 是必須的',
},
cvv: {
labelTitle: '安全碼(CVC)',
placeholder: '3碼 ',
errorTips: '安全碼 是必須的',
tips: '一般位於卡片後方',
},
payMethod: {
text: '已選擇的付款方式: ',
creditCard: '信用卡',
},
},
},
footer:
'<span style="font-family: Helvetica;font-style : normal;font-weight: normal;font-size : 11px;line-height: 16px;color : #1E1E1E;opacity: 0.4;">This website USES TapPay SSL transaction transmission system of Jooray Technology, which can perfect and protect your payment transmission data through PCI-DSS, VISA, MasterCard and other industry data security Level 1 Level. MasterCard and other industry data security Level 1 Level.</span>',
}
// new paymentElement(domId, initialData)
new paymentElement('payment', initData)
</script>
</body>
</html>快速接入 Stripe
import paymentElement from '@efox/payment-element'
const initData = {
loopTime: '6000', //[必传]订单状态轮询间隔
env: 'dev', //[必传]环境
deviceTag: navigator.userAgent.indexOf('iPhone') > -1 || navigator.userAgent.indexOf('Android') > -1 ? 'phone' : 'pc',//[必传]设备平台，对应不同UI
appId: '999', //[必传]支付中台分配给业务的appId
channelInfo: {
// [选传]渠道信息,默认shopline payment渠道 payMethod为"Card"
chId: 'Stripe', // [选传]渠道ID
payMethod: 'Card', // [选传]支付方法,
extra: {
accountId: 'acct_1IM6EiIDaubw4NgI',
},
},
merchant: {
// 商家信息
merchantId: '2021011114956121231',// [必传]商户Id
merchantSiteCountry: 'SG', // [必传]所在国家
settlementCurrency: 'SGD', // [必传]结算币种
mcc: '5691', // [选传]商家码
},
themeData: {//模板主题
version: 'v2',//必填 v1 v2
},
lang: {//全部可选
formComponent: {
holderName: {
labelTitle: '持卡人名字',
placeholder: '持卡人名字',
errorTips: '持卡人名字 是必須的',
tips: '與信用卡上名稱相同',
},
cardNumber: {//卡号
labelTitle: '信用卡號碼',// input 的标题 label
placeholder: '信用卡號碼',//input 的 placeholder
errorTips: '信用卡號碼 是必須的', //错误提示
tips: '所有交易都是安全且加密的',//icon 上的提示
},
expiryDate: {//过期日期
labelTitle: '到期日',
placeholder: 'MM/YY',
errorTips: '到期日 是必須的',
},
cvv: {//cvv
labelTitle: '安全碼(CVC)',
placeholder: '3碼 ',
errorTips: '安全碼 是必須的',
tips: '一般位於卡片後方',
},
},
},
footer:
'<span style="font-family: Helvetica;font-style : normal;font-weight: normal;font-size : 11px;line-height: 16px;color : #1E1E1E;opacity: 0.4;">This website USES TapPay SSL transaction transmission system of Jooray Technology, which can perfect and protect your payment transmission data through PCI-DSS, VISA, MasterCard and other industry data security Level 1 Level. MasterCard and other industry data security Level 1 Level.</span>',
}
const payment = new paymentElement('payment', initData)
// 不足两位数补0
export function zeroPadding(value) {
return `${value}`.length === 1 ? `0${value}` : `${value}`
}
// 获取utc时间
export function getUTCformatyyyyMMddHHmmss() {
const date = new Date()
const year = date.getUTCFullYear()
const month = zeroPadding(date.getUTCMonth() + 1)
const day = zeroPadding(date.getUTCDate())
const hours = zeroPadding(date.getUTCHours())
const minutes = zeroPadding(date.getUTCMinutes())
const seconds = zeroPadding(date.getUTCSeconds())
return `${year}${month}${day}${hours}${minutes}${seconds}`
}
const orderData = {
actionType: 'Submit', //S:订单信息提交 U:订单信息更新 I:订单信息查询 C:订单撤销
signType: 'RSA2', // [必传]签名加密类型
sign: 'pO6V5ozdTA7EoRtglhVvEkNyC7fJYuREryrzNVYG3t10meMfiTI5wi0dcJQQxNdxlqA', // [必传]签名
returnUrl: 'https://www.baidu.com', // [必传]跳到第三方页面操作完成后跳转回的url
notifyUrl: 'http://suo.im/6gMEe2', // [必传]SL payments服务端对服务端通知的url
orderInfo: {
// 订单信息
merchantOrderId: getUTCformatyyyyMMddHHmmss(), // [必传]业务唯一订单号
merchantOrderTime: getUTCformatyyyyMMddHHmmss(), // [必传]业务订单时间，格式 yyyyMMddHHmmss
amount: 10000, // [必传]订单金额
currency: 'HKD', // [必传]货币类型
productInfoList: [
{
// [必传]商品信息 至少1条
productId: '测试', // [必传]商品ID
productName: '测试', // [必传]商品名称
productInfo: '测试', // [选题]产品信息
localCurrency: 'HDK', //[选填]币种
localAmount: '10.00', //[选填]金额
},
],
},
userInfo: {
// 用户信息
userType: 'yyuid', // [必传]用户类型
userId: '123456', // [必传]用户uid
userName: '123456', // [必传]用户名称
},
orderData: {
automatic3D: 'false', //是否启用自动3D
/*
* http://wiki-xpay.yy.com/display/SPC/Stripe
* 默认为false，为true时由渠道根据自己SCA引擎判断是否要3D，
* 为false时渠道会努力去发起3D
* （当银行支持3D的时候则一定会发起3D，
* 当银行不支持3D的时候则无法发起，无法发起3D则降为2D）
*/
},
// 参考下面riskData数据结构，以及http://wiki-xpay.yy.com/pages/viewpage.action?pageId=14319705
riskData: {
prodMsg: {prodId: '测试', prodName: '测试', localCurrency: 'HKD', localAmount: '10'},
prodtax: '1',
deliverytax: '2',
deliveryamt: '3',
discount: '4',
storeId: '5',
deliveryType: '5',
deliveryChannel: '6',
url: '7',
ip: '8',
phone: '9',
email: '[email protected]',
postCode: '12',
receiptName: '13',
receiptAddress: '14',
subtotal: '15',
total: '16',
originalCurrencyCode: '17',
descriptorCountry: '18',
quantity: 10,
}, // [选传]风控数据
}
document.querySelector('#submit').addEventListener('click', () => {
payment.orderAction(orderData)
})