@efox/pay

v1.0.67

Published

2 years ago

## 安装

Downloads

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 错误提示参数解析

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)
}

快速接入 PaypalSPB

复制以下demo代码到你的项目
修改 publicKey.key 为你的 PaypalSPB 的 CLIENT_ID
修改 domId 为你指定的 dom 节点
启动项目就可以看到出现SDK按钮
点击 SDK按钮 时回调 createOrder ，您可通过下单获取order_id并return返回来打开支付页面
点击 SDK确认付款按钮 时回调 createToken ，您可通过此事件做用户确认支付后你需要的操作

参数解析

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

YY EFOX pay

安装

快速接入 Checkout

UMD 方式引入

ESM 方式引入

initialData 初始化参数解析

language 语言参数解析

errorTips 错误提示参数解析

label 标题参数解析

styleOption 自定义样式参数解析

commonStyle , input 内样式参数解析

commonStyle , input 以外样式样式参数解析

reportSDKLoading SDK加载时间

快速接入 AsiaBill

CDN方式接入demo

import 方式接入demo

快速接入 PaypalSPB

参数解析

Typescirpt接入demo

JavaScript接入demo

CDN方式接入demo

快速接入2checkout

JavaScript接入demo

CDN方式接入demo，以接入 2checkout 为例

详细接入，以接入 2checkout 为例

注意：

需要开启 持卡人姓名输入栏需要在 initialData 对象内传入 label 参数

需要开启 提交按钮需要在 initialData 对象传入 btnText 参数

参数解释

注意：

样式参数

Input 组件样式

Label , label提示

Placeholder , input框提示

ErrorTips , 表单错误提示

输入框修改或失焦时回调参数

sdk加载时间回调参数

表单填写完成回调参数

表单初始化的表单数据

例子

styleOption 对象例子

SDK 内置 function

getToken()

兼容

2checkout

需要开启持卡人姓名输入栏需要在 initialData 对象内传入 label 参数

需要开启提交按钮需要在 initialData 对象传入 btnText 参数