npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@efox/pay

v1.0.67

Published

## 安装

Downloads

168

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

在线例子: 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 方式引入

  1. 在 UDM 基础上把引入改成 import
import sdk from '@efox/pay'
  1. 初始化去掉 .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 | 禁用标语文字,当 layouthorizontal 才能设置为 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