@efox/pay NPM | npm.io

YY EFOX pay

安装

yarn add @efox/pay

npm i @efox/pay

or 直接 CDN 引入

 <script src="https://pushmiddle.bs2ul.yy.com/pay/1.0.62/index.js"></script>

快速接入 Checkout

在线例子: EFOX Pay for Checkout Example

复制以下 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: 'est@Asiabill.com',
            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: 'est@Asiabill.com',
    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/pay@1.0.23/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)