@efox/pay
v1.0.67
Published
## 安装
Downloads
168
Maintainers
Keywords
Readme
YY EFOX pay
安装
yarn add @efox/pay
or
npm i @efox/pay
or 直接 CDN 引入
<script src="https://pushmiddle.bs2ul.yy.com/pay/1.0.62/index.js"></script>
快速接入 Checkout
- 复制以下 demo 的代码到你的项目
- 传入 publicKey
- 传入需要的参数到 initialData
UMD 方式引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EFOX Pay for Checkout Example</title>
<script src="https://pushmiddle.bs2ul.yy.com/pay/1.0.62/index.js"><script>
<style>
.btn-contain {
width: 280px;
margin: 0 auto;
}
.btn {
border: none;
border-radius: 3px;
color: #FFF;
font-weight: 500;
height: 40px;
width: 100%;
background-color: #13395E;
box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.4);
}
.success-payment-message {
color: #13395E;
line-height: 1.4;
}
</style>
</head>
<body>
<div id="checkout"></div>
<div class="btn-contain">
<button id="btn" class="btn">getToken</button>
<p class="success-payment-message"></p>
</div>
<script>
const publicKey = {
// 从 Checkout 获得的 publicKey
key: 'pk_test_6ff46046-30af-41d9-bf58-929022d2cd14'
}
const initialData = {
sdkName: 'checkout',
// 渲染 SDK 的 dom id
domId: 'checkout',
// 生产模式 'prod';开发模式 'dev'
env: 'dev',
/**
语种:
'en': 英语,
'nl': 荷兰语,
'fr': 法语,
'de': 德语,
'it': 意大利语,
'ko': 韩语,
'es': 西班牙语,
**/
language: 'en',
errorTips: {
cardNumberErrorTips: '请输入正确的卡号',
expirationErrorTips: '请输入正确的有效期',
cvvErrorTips: '请输入正确的验证码'
},
label: {
cardNumberLabel: '卡号',
expirationLabel:'有限期',
cvvLabel:'验证码'
},
styleOption: {
/**
样式采用 Style Object 写法
例如:
{
color: "black",
fontSize: "18px"
}
**/
// commonStyle 是 input 不同状态的样式
// 不传则使用默认样式
commonStyle: {
// input 基础样式
base: {
},
// focus 样式
focus: {
},
// 验证通过样式
valid: {
},
// 验证无效样式
invalid: {
},
// placeholder 样式
placeholder: {
// 基础样式
base: {
},
// focus 样式
focus: {
},
},
},
// componentStyle 是 input 以外的样式
// 不传则使用默认样式
componentStyle: {
// form 表单样式
formStyle: {},
// 卡号输入框样式
cardInputStyle: {
// 标题栏样式
labelStyle: {},
// 输入框外层样式
inputWrapperStyle: {},
// 错误信息提示样式
messageStyle: {},
},
// 过期日期输入框样式,子参数与卡号输入框一致
expirationInputStyle: {
},
// 银行卡验证码输入框样式,子参数与卡号输入框一致
cvvInputStyle: {
},
}
},
// 获取 SDK 加载时间
reportSDKLoading: (time) => { console.log(time) }
}
// 初始化 SDK
const pay = new efoxPay.default(publicKey, initialData)
document.getElementById("btn").addEventListener('click', () => {
var el = document.querySelector(".success-payment-message");
// 获取 token
pay.getToken().then(token => {
console.log(token)
el.innerHTML =
"Card tokenization completed<br>" +
'Your card token is: <span class="token">' +
token.token +
"</span>";
}).catch(e => {
console.log(e)
el.innerHTML =
'<span class="token">' +
e +
"</span>";
})
})
console.log(pay)
</script>
</body>
</html>
ESM 方式引入
- 在 UDM 基础上把引入改成 import
import sdk from '@efox/pay'
- 初始化去掉 .default
const pay = new sdk(publicKey, initialData)
initialData 初始化参数解析
| 字段 | 含义 | 可传 | | :--: | :--: | :--: | | sdk | sdk名 | checkout | | domId | 渲染所在的 dom | 要渲染位置 的 id | | env | 当前环境 | 'dev' 或 'prod' | | language | 语种 | 'en', 'nl', 'fr', 'de', 'it', 'ko', 'es' | | errorTips | 错误提示 | 不传则默认英文 | | label | 标题 | 不传则默认英文 | | styleOption | 样式 |不传则使用默认样式|
language 语言参数解析
| 字段 | 含义 | | :--: | :--: | |en| 英语| |nl| 荷兰语| |fr| 法语| |de| 德语| |it| 意大利语| |ko| 韩语| |es| 西班牙语|
errorTips 错误提示参数解析
| 字段 | 含义 | | :--: | :--: | |cardNumberErrorTips| 卡号错误提示| |expirationErrorTips|有效期错误提示| |cvvErrorTips|验证码错误提示|
label 标题参数解析
| 字段 | 含义 | | :--: | :--: | |cardNumberLabel|卡号| |expirationLabel|有限期| |cvvLabel|验证码|
styleOption 自定义样式参数解析
| 字段 | 含义 | | :--: | :--: | |commonStyle|input 内样式| |componentStyle|input 以外样式|
commonStyle , input 内样式参数解析
// commonStyle 是 input 不同状态的样式
// 不传则使用默认样式
commonStyle: {
// input 基础样式
base: {},
// focus 样式
focus: {},
// 验证通过样式
valid: {},
// 验证无效样式
invalid: {},
// placeholder 样式
placeholder: {
// 基础样式
base: {},
// focus 样式
focus: {},
},
},
commonStyle , input 以外样式样式参数解析
// componentStyle 是 input 以外的样式
// 不传则使用默认样式
componentStyle: {
// form 表单样式
formStyle: {},
// 卡号输入框样式
cardInputStyle: {
// 标题栏样式
labelStyle: {},
// 输入框外层样式
inputWrapperStyle: {},
// 错误信息提示样式
messageStyle: {},
},
// 过期日期输入框样式,子参数与卡号输入框一致
expirationInputStyle: {},
// 银行卡验证码输入框样式,子参数与卡号输入框一致
cvvInputStyle: {},
}
reportSDKLoading SDK加载时间
// 获取 SDK 加载时间
reportSDKLoading: (time) => { console.log(time) }
快速接入 AsiaBill
- 复制以下demo代码到你的项目
- 传入需要的参数到 fieldData
CDN方式接入demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AsiaBill Example</title>
</head>
<body>
<div>
<button type="button" id="submit">提交到 AsiaBill Example</button>
</div>
<script src="https://pushmiddle.bs2dl.yy.com/pay/1.0.51/index.js"></script>
<!-- 注意:需要自行引入 sha256 加密算法 -->
<script src="http://pushmiddle.bs2dl.yy.com/sha256.min.js"></script>
<script>
const amount = '0.12'
const orderCurrency = 'HKD'
const merNo = '10000'
const gatewayNo = '10000007'
const orderNo = '20200902154746204990230540000'
const returnUrl = '同步交易结果的地址'
const callbackUrl = '异步交易结果的地址'
const signKey = '12345678'
const sign = merNo + gatewayNo + orderNo + orderCurrency + amount + returnUrl + signKey
//注意:需要自行引入 sha256 加密算法
const signInfo = sha256(sign)
// 提交到第三方支付 AsiaBill
const fieldData = {
merNo: merNo,
gatewayNo: gatewayNo,
orderNo: orderNo,
orderCurrency: orderCurrency,
orderAmount: amount,
signInfo: signInfo,
returnUrl: returnUrl,
firstName: 'Eva',
lastName: 'Tan',
email: '[email protected]',
phone: '075525846758',
paymentMethod: 'Credit Card',
country: 'US',
state: 'Tennessee',
city: 'Collierville',
address: '110 North Tree Drive',
zip: '38017',
callbackUrl: callbackUrl,
}
const initialData = {
env: 'dev',
sdkName: 'asiaBill',
fieldData: fieldData,
reportSDKLoading: reportSDKLoadingParams => {
console.log('sdk加载时间', reportSDKLoadingParams)
},
}
const pay = new efoxPay.default('', initialData)
document.getElementById('submit').addEventListener('click', async () => {
//提交到 AsiaBill 然后跳到 AsiaBill 页面,
//如果数据校验失败,getToken() 会返回对应错误码与错误信息
const token = await pay.getToken()
if (!token.state) {
alert(token.msg)
}
})
</script>
</body>
</html>
import 方式接入demo
import sdk from '@efox/pay'
//注意:需要自行引入 sha256 加密算法
import {
sha256
} from 'js-sha256'
const amount = '0.12'
const orderCurrency = 'HKD'
const merNo = '10000'
const gatewayNo = '10000007'
const orderNo = '20200902154746204990230540000'
const returnUrl = '同步交易结果的地址'
const callbackUrl = '异步交易结果的地址'
const signKey = '12345678'
const sign = merNo + gatewayNo + orderNo + orderCurrency + amount + returnUrl + signKey
//注意:需要自行引入 sha256 加密算法
const signInfo = sha256(sign)
// 提交到第三方支付 AsiaBill
const fieldData = {
merNo: merNo,
gatewayNo: gatewayNo,
orderNo: orderNo,
orderCurrency: orderCurrency,
orderAmount: amount,
signInfo: signInfo,
returnUrl: returnUrl,
firstName: 'Eva',
lastName: 'Tan',
email: '[email protected]',
phone: '075525846758',
paymentMethod: 'Credit Card',
country: 'US',
state: 'Tennessee',
city: 'Collierville',
address: '110 North Tree Drive',
zip: '38017',
callbackUrl: callbackUrl,
}
const initialData = {
env: 'dev',
sdkName: 'asiaBill',
fieldData: fieldData,
reportSDKLoading: reportSDKLoadingParams => {
console.log('sdk加载时间', reportSDKLoadingParams)
},
}
const pay = new sdk('', initialData)
//提交到 AsiaBill 然后跳到 AsiaBill 页面,
//如果数据校验失败,getToken() 会返回对应错误码与错误信息
const token = await pay.getToken()
if (!token.state) {
alert(token.msg)
}
| 字段 | 含义(字段的 value 均为 String 类型) | 是否必填| | :--: | :--: |:--:| |merNo | 【商户号】|Yes| |gatewayNo|【网关接入号】|Yes| |orderNo|【商户订单号】 在该订单号是成功/待处理/待确认的状态下, 不允许再次抛送此订单号。|Yes| |orderCurrency|【交易币种】详见【附录】交易币种(ISO 4217)https://www.asiabill.com/developers/347-cn.html#currency|Yes| |orderAmount|【交易金额】应为小数点后2位小数。|Yes| |firstName|【客人的名】 长度必须在2-100之间。否则不能交易。|Yes| |lastName|【客人的姓】 长度必须在2-50之间。否则不能交易。|Yes| |email|【客人的邮件】 长度必须在2-200之间。否则不能交易。|Yes| |phone| 【客人的联系电话】 长度必须在2-50之间。否则不能交易。|Yes| |paymentMethod|【支付方式】 目前只有 Credit Card|Yes| |returnUrl|【交易返回地址】Asiabill处理完请求后,同步交易结果的地址,传递方式为 post。|Yes| |signInfo| 【签名数据】返回数据为大写. 各语言加密方式不同, sha256加密方式。明文加密结构:merNo + gatewayNo + tradeNo + orderNo + orderCurrency + orderAmount + orderStatus + orderInfo + signkey|Yes| |shipFirstName|【收件人的名】|No| |shipLastName|【收件人的姓】|No| |shipPhone|【收件人的联系电话】|No| |shipCountry|【收件人的国家】|No| |shipState|【收件人的州】|No| |shipCity|【收件人的城市】|No| |shipAddress|【收件人的地址】|No| |shipZip|【收件人的邮编】|No| |goods_detail|【商品信息,字符串数组】|No| |callbackUrl|【后台通知地址】异步交易结果的地址,当传了此值则异步通知使用该URL通知|Yes| |remark|【备注】可作为扩展信息,提交什么就返回什么。|No|
快速接入 PaypalSPB
- 复制以下demo代码到你的项目
- 修改 publicKey.key 为你的 PaypalSPB 的 CLIENT_ID
- 修改 domId 为你指定的 dom 节点
- 启动项目就可以看到出现SDK按钮
- 点击
SDK按钮
时回调createOrder
,您可通过下单获取order_id并return返回来打开支付页面 - 点击
SDK确认付款按钮
时回调createToken
,您可通过此事件做用户确认支付后你需要的操作
参数解析
| 字段 | 含义 |
| :--: | :--: |
| PublicKey | 初始化sdk的object对象 |
| PublicKey.key | 初始化paypalSPB的 CLIENT_ID
|
| PublicKey.expand.currency | 初始化paypalSPB的货币码 |
| initialData | 初始化sdk的基础数据 |
| initialData.env | 当前环境 用于个别SDK加载脚本环境区分,值为:'prod' 或 'dev' |
| initialData.sdkName | sdk名字,'paypalSPB' |
| initialData.domId | 需要渲染的dom id |
| initialData.createOrder | 点击 SDK按钮
时回调 createOrder
,您可通过下单获取order_id并return返回来打开支付页面 |
| initialData.isContinue | 设置为 true
时,调起paypalSPB continue
模式 |
| initialData.createToken | 点击 SDK确认付款按钮
时回调 createToken
,您可通过此事件做用户确认支付后你需要的操作 |
| initialData.reportSDKLoading | SDK加载时间 |
| initialData.styleOption | SDK样式 |
| initialData.commonStyle.paypalSPBStyle.layout | 布局方式,值为 'vertical' 或 'horizontal' |
| initialData.commonStyle.paypalSPBStyle.color | 按钮颜色,值为 'gold' 或 'blue' 或 'silver' 或 'white' 或 'black' |
| initialData.commonStyle.paypalSPBStyle.shape | 按钮形状,值为 'rect' 或 'pill' |
| initialData.commonStyle.paypalSPBStyle.label | 按钮文本,值为 'paypal' 或 'checkout' 或 'buynow' 或 'pay' 或 'installment' |
| initialData.commonStyle.paypalSPBStyle.height | set the style.height option to a value from 25 to 55. 建议使用默认 |
| initialData.commonStyle.paypalSPBStyle.tagline | 禁用标语文字,当 layout
为 horizontal
才能设置为 true
|
Typescirpt接入demo
import sdk, {
InitialData,
PublicKey,
ReportSDKLoadingParams
} from '@efox/pay'
const publicKey: PublicKey = {
key: 'AUY6Budt21Ebh5ZSHgaKVTflqTj6oicuszaGsr-cBZv-GsQfcdOGIOxLx0mIf-eqx-zP19uBQ2scXshz', // CLIENT_ID
expand: {
currency: 'USD', // 货币码, 可不传, 默认USD
},
}
const initialData: InitialData = {
env: 'prod',
sdkName: 'paypalSPB',
domId: 'paypalSPB_feild', // dom 节点Id
isContinue: true, // true 时为 continue 模式
createOrder: async (response: any) => {
// 点击 `SDK按钮` 时回调 `createOrder` ,您可通过下单获取order_id并return返回来打开支付页面
console.log('paypalSPB选择按钮时的回调', response)
// return payUrl?.chDealId || ''
return '8FW20256UD7626911' // 返回order_id来启动paypalSPB支付
},
createToken: (response: any) => {
// 点击 `SDK确认付款按钮` 时回调 `createToken` ,您可通过此事件做用户确认支付后你需要的操作
console.log('SDK确认付款按钮的回调', response)
},
reportSDKLoading: (reportSDKLoadingParams: ReportSDKLoadingParams) => {
console.log('sdk加载时间', reportSDKLoadingParams)
},
styleOption: {
commonStyle: {
// SDK按钮样式,可不传使用默认样式
paypalSPBStyle: {
layout: 'vertical', // 'vertical' | 'horizontal'
color: 'gold', // 'gold' | 'blue' | 'silver' | 'white' | 'black'
shape: 'rect', // 'rect' | 'pill'
label: 'paypal', // 'paypal' | 'checkout' | 'buynow' | 'pay' | 'installment'
tagline: false,
},
},
},
}
new sdk(publicKey, initialData)
JavaScript接入demo
import sdk from '@efox/pay'
const publicKey = {
key: 'AUY6Budt21Ebh5ZSHgaKVTflqTj6oicuszaGsr-cBZv-GsQfcdOGIOxLx0mIf-eqx-zP19uBQ2scXshz', // CLIENT_ID
expand: {
currency: 'USD', // 货币码, 可不传, 默认USD
},
}
const initialData = {
env: 'prod',
sdkName: 'paypalSPB',
domId: 'paypalSPB_feild', // dom 节点Id
isContinue: true, // true 时为 continue 模式
createOrder: async (response) => {
// 点击 `SDK按钮` 时回调 `createOrder` ,您可通过下单获取order_id并return返回来打开支付页面
console.log('paypalSPB选择按钮时的回调', response)
// return payUrl?.chDealId || ''
return '8FW20256UD7626911' // 返回order_id来启动paypalSPB支付
},
createToken: (response) => {
// 点击 `SDK确认付款按钮` 时回调 `createToken` ,您可通过此事件做用户确认支付后你需要的操作
console.log('SDK确认付款按钮的回调', response)
},
reportSDKLoading: (reportSDKLoadingParams) => {
console.log('sdk加载时间', reportSDKLoadingParams)
},
styleOption: {
commonStyle: {
// SDK按钮样式,可不传使用默认样式
paypalSPBStyle: {
layout: 'vertical', // 'vertical' | 'horizontal'
color: 'gold', // 'gold' | 'blue' | 'silver' | 'white' | 'black'
shape: 'rect', // 'rect' | 'pill'
label: 'paypal', // 'paypal' | 'checkout' | 'buynow' | 'pay' | 'installment'
tagline: false,
},
},
},
}
new sdk(publicKey, initialData)
CDN方式接入demo
< !doctype html >
<
html >
<
head >
<
meta charset = "utf-8" >
<
meta content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale-1.0, user-scalable=0"
name = "viewport" >
<
title > PaypalSPB Example < /title> < /
head >
<
body >
<
div id = "paypalSPB_feild" > < /div>
<
script src = "https://pushmiddle.bs2dl.yy.com/pay/1.0.53/index.js" > < /script> <
script >
console.log(efoxPay)
const publicKey = {
key: 'AUY6Budt21Ebh5ZSHgaKVTflqTj6oicuszaGsr-cBZv-GsQfcdOGIOxLx0mIf-eqx-zP19uBQ2scXshz',
expand: {
currency: 'USD',
},
}
const initialData = {
env: 'prod',
sdkName: 'paypalSPB',
domId: 'paypalSPB_feild',
isContinue: true, // true 时为 continue 模式
createOrder: response => {
// 点击 `SDK按钮` 时回调 `createOrder` ,您可通过下单获取order_id并return返回来打开支付页面
console.log('paypalSPB选择按钮时的回调', response)
// return payUrl?.chDealId || ''
return '8FW20256UD7626911' // 返回order_id来启动paypalSPB支付
},
createToken: response => {
// 点击 `SDK确认付款按钮` 时回调 `createToken` ,您可通过此事件做用户确认支付后你需要的操作
console.log('SDK确认付款按钮的回调', response)
},
styleOption: {
commonStyle: {
// SDK按钮样式,可不传使用默认样式
paypalSPBStyle: {
layout: 'vertical',
color: 'gold',
shape: 'rect',
label: 'paypal',
tagline: false,
},
},
},
}
const pay = new efoxPay.default(publicKey, initialData)
console.log(pay) <
/script> < /
body >
<
/html>
快速接入2checkout
- 复制以下代码到你的项目
- 修改 publicKey.key 为你的 2checkout MERCHANT_CODE
- 修改 domId 为你指定的 dom 节点
- 启动项目就可以看到出现表单
- 使用 pay.getToken(holderName) 获取 token
JavaScript接入demo
import sdk from '@efox/pay'
const publicKey = {
key: 'AVLRNG',
}
const initialData = {
domId: 'payment',
sdkName: '2checkout',
reportSDKLoading: time => {
console.log(time)
},
label: {
userNameLabel: '持卡人姓名',
},
errorTips: {
userNameErrorTips: '請輸入有效的持卡人姓名'
},
styleOption: {
commonStyle: {},
componentStyle: {},
},
language: 'zy',
}
const pay = new sdk(publicKey, initialData)
const holderName = "持卡人姓名"
const token = pay.getToken(holderName)
console.log(token)
CDN方式接入demo,以接入 2checkout 为例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>2Checkout Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="card mt-3">
<div class="card-body">
<div id="payment"></div>
</div>
</div>
<button type="button" id="submit" class="btn btn-success btn-block mt-3 mb-3">提交</button>
</div>
<script src="https://unpkg.com/@efox/[email protected]/dist/index.js"></script>
<script>
console.log(efoxPay)
const publicKey = {
key: 'AVLRNG',
}
const initialData = {
domId: 'payment',
sdkName: '2checkout',
// btnText: '提交',
createToken: token => {
console.log(token)
},
reportSDKLoading: time => {
console.log(time)
},
label: {
userNameLabel: '持卡人姓名',
},
errorTips: {
userNameErrorTips: '請輸入有效的持卡人姓名'
},
styleOption: {
commonStyle: {},
componentStyle: {},
},
language: 'zy',
}
const pay = new efoxPay.default(publicKey, initialData)
console.log(pay)
</script>
</body>
</html>
详细接入,以接入 2checkout 为例
import sdk from '@efox/pay'
/*
必选参数: publicKey
publicKey 的 key 根据要使用的第三方 SDK 而定:
2checkout, 请为 key 传入 MERCHANT_CODE
*/
const publicKey = {
key: ''
}
/*
必选参数: InitialData
参数较多,请详细阅读《参数解释》
*/
const initialData: InitialData = {
//需要渲染的dom id,必选参数。传空值则取body
domId: '',
//传入用的第三方 sdk 名,目前支持 2checkout,ebanx
sdkName: '2checkout',
/*
获取token需要提交holderName,以下方法三选一
1.可以初始化表单数据,传入fieldData.userName
2.可以通过传入 label.userNameLabel ,启用 SDK 内置的 holderName input,通过 SDK 内置input输入
3.可以通过使用获取 token 的函数,pay.getToken(holderName),传入参数 holderName
*/
// 表单初始化默认数据
fieldData: {
userName: '持卡人姓名'
},
// 开启 Holder name input
label: {
userNameLabel: '持卡人姓名',
},
// 错误信息
errorTips: {
userNameErrorTips: '请输入有效的持卡人姓名'
},
// SDK 样式定制
styleOption: {
commonStyle: {},
componentStyle: {},
},
/*
点击SDK自带提交按钮时的 token 的回调函数,可选参数
*/
createToken: (token: string): void => {
console.log(token)
},
/*
加载时间的回调函数,可选参数
*/
reportSDKLoading: (time: number): void => {
console.log(time)
}
// SDK 语种
language: 'zy',
}
const pay = new sdk(publicKey, initialData)
const holderName = "持卡人姓名"
/*
获取 token
注意:填全表单信息才能获取token
*/
pay.getToken(holderName)
注意:
需要开启 持卡人姓名输入栏需要在 initialData 对象内传入 label 参数
例如:
label: {
userNameLabel: '持卡人姓名',
},
需要开启 提交按钮需要在 initialData 对象传入 btnText 参数
btnText: '提交',
到这里,应该就可以在您指定的 dom 元素处看到支付界面出现。 如果需要进一步自定义 SDK,则需要阅读以下参数解释
参数解释
/*
publicKey 的 key 根据要使用的第三方 SDK 而定:
2checkout, 请为 key 传入 MERCHANT_CODE
*/
export interface PublicKey {
key: string
expand ? : Expand
}
export interface Expand {
currency ? : string
}
/*
初始化 SDK 的参数
*/
export interface InitialData {
env: 'prod' | 'dev' // 当前环境 用于个别SDK加载脚本环境区分
sdkName: '2checkout' | 'ebanx' | 'checkout' // sdk名
domId: string // 需要渲染的dom id
rewriteCssUrl ? : string // oceanPay css重写地址 必须https
layoutType ? : 0 // 布局类型
styleOption ? : StyleOption
language ? : string // 语言 没传根据sdk按照sdk本身的默认locale
country ? : string // 国家码 没传根据sdk按照sdk本身的默认country
label ? : Label // label提示
placeholder ? : Placeholder // input框提示
errorTips ? : ErrorTips // 表单错误提示
btnText ? : string // 按钮文本
createToken ? : (response: any) => void // 点击按钮获取token回调
fieldOnChange ? : (fieldParams: FieldParams) => void // 表单填写无效信息时回调
fieldOnBlur ? : (fieldParams: FieldParams) => void // 表单输入框失焦时回调 // 表单填写无效信息时回调
fieldComplete ? : (fieldCompleteParams: FieldCompleteParams) => void // 表单填写完成时回调
reportSDKLoading ? : (reportSDKLoadingParams: ReportSDKLoadingParams) => void // SDK脚本加载时间
createOrder ? : (response: any) => Promise < string > // paypalSPB选择按钮时的回调
// todo 暴露各个表单事件
}
注意:
2checkout 语言码(非规范国家码)
https://knowledgecenter.2checkout.com/Documentation/07Commerce/Checkout-links-and-options/2Checkout-supported-languages
样式参数
/* styleOption 样式传入采用对象形式,属性名使用小驼峰命名 */
export interface StyleOption {
commonStyle ? : CommonStyle // 传给sdk的style实例对象,不是css对象
componentStyle ? : ComponentStyle
}
export interface CommonStyle extends JSONObject {
paypalSPBStyle ? : {
layout ? : 'vertical' | 'horizontal'
color ? : 'gold' | 'blue' | 'silver' | 'white' | 'black'
shape ? : 'rect' | 'pill'
label ? : 'paypal' | 'checkout' | 'buynow' | 'pay' | 'installment'
height ? : number // set the style.height option to a value from 25 to 55.
tagline ? : boolean
}
}
export interface CommonStyle {
fontFamily: string
fontSize: string
fontWeight: string
color: string
textAlign: string
backgroundColor: string
boxSizing: string
padding: string
margin: string
}
export interface ComponentStyle {
formStyle ? : JSONObject
nameInputStyle ? : InputStyle
cardInputStyle ? : InputStyle
expirationInputStyle ? : InputStyle
cvvInputStyle ? : InputStyle
btnStyle ? : {
normalBackground: string // 正常按钮颜色
disableBackground: string // 禁用按钮颜色
} & JSONObject
}
export interface InputStyle {
labelStyle ? : JSONObject
inputWrapperStyle ? : JSONObject
inputStyle ? : JSONObject
messageStyle ? : JSONObject
}
Input 组件样式
export interface InputStyle {
labelStyle ? : JSONObject // Input 中 label 元素的样式
inputWrapperStyle ? : JSONObject // Input 中 inputWrapper 元素的样式
inputStyle ? : JSONObject // Input 中 input 元素的样式
messageStyle ? : JSONObject // Input 中 message 元素的样式
}
Label , label提示
export interface Label {
userNameLabel ? : string
cardNumberLabel ? : string
expirationLabel ? : string
cvvLabel ? : string
}
Placeholder , input框提示
export interface Placeholder {
userNamePlaceholder ? : string
cardNumberPlaceholder ? : string
expiryMonthPlaceholder ? : string
expiryYearPlaceholder ? : string
cvvPlaceholder ? : string
}
ErrorTips , 表单错误提示
export interface ErrorTips {
userNameErrorTips ? : string
cardNumberErrorTips ? : string
expirationErrorTips ? : string
cvvErrorTips ? : string
}
输入框修改或失焦时回调参数
export interface FieldParams {
message ? : string
param ? : 'username' | 'cardnumber' | 'expiration' | 'cvv'
}
sdk加载时间回调参数
export interface ReportSDKLoadingParams {
time ? : number
}
表单填写完成回调参数
export interface FieldCompleteParams {
userName ? : string
cardNumber ? : string
expiration ? : string
cvv ? : string
}
表单初始化的表单数据
export interface FieldData {
userName ? : string
}
例子
styleOption 对象例子
const initialData = {
styleOption: {
componentStyle: {
cardInputStyle: {
labelStyle: {
backgroundColor: 'red',
},
}
}
}
}
SDK 内置 function
getToken()
- 注意:填全表单信息才能获取token
- 传入可选参数holderName, 字符串类型, 获取第三方支付 SDK 返回的 Token
- 当 sdkName: '2checkout' 时 holderName 为必选参数
- 例子:
const pay = new sdk(publicKey, initialData)
const holderName = '持卡人姓名'
setTimeout(async () => {
const token = await pay.getToken(holderName)
console.log(token)
}, 15000)
兼容
2checkout
- IE , 仅支持 IE11
- 支持 Egde
- 支持 Chrome
- 支持 Firefox
- 支持 Safari