@efox/payment-element

payment element sdk

Usage no npm install needed!

<script type="module">
  import efoxPaymentElement from 'https://cdn.skypack.dev/@efox/payment-element';
</script>

README

payment-element

payment element sdk

🔗 详细文档

0.介绍文档

1.初始化参数

2.订单操作

3.回调事件

📦安装

node module install

npm i @efox/payment-element

or

yarn add @efox/payment-element

CND usage

 <script src="https://cdn.jsdelivr.net/npm/@efox/payment-element@1.1.1/dist/index.min.js"></script>

🔨快速接入

node module import

import paymentElement from '@efox/payment-element'

const initData = {
  loopTime: '6000',
  env: 'dev',
  deviceTag: navigator.userAgent.indexOf('iPhone') > -1 || navigator.userAgent.indexOf('Android') > -1 ? 'phone' : 'pc',
  appId: '999',
  merchant: {
    // 商家信息
    merchantId: '1056304931088238592',
    merchantSiteCountry: 'SG', // [必传]所在国家
    settlementCurrency: 'SGD', // [必传]结算币种
    mcc: '5691', // [选传]商家码
  },
  themeData: {
    version: 'v2',
  },
  lang: {
    formComponent: {
      holderName: {
        labelTitle: '持卡人名字',
        placeholder: '持卡人名字',
        errorTips: '持卡人名字 是必須的',
        tips: '與信用卡上名稱相同',
      },
      cardNumber: {
        labelTitle: '信用卡號碼',
        placeholder: '信用卡號碼',
        errorTips: '信用卡號碼 是必須的',
        tips: '所有交易都是安全且加密的',
      },
      expiryDate: {
        labelTitle: '到期日',
        placeholder: 'MM/YY',
        errorTips: '到期日 是必須的',
      },
      cvv: {
        labelTitle: '安全碼(CVC)',
        placeholder: '3碼　　　',
        errorTips: '安全碼 是必須的',
        tips: '一般位於卡片後方',
      },
      payMethod: {
        text: '已選擇的付款方式: ',
        creditCard: '信用卡',
      },
    },
  },
   footer:
      '<span style="font-family: Helvetica;font-style : normal;font-weight: normal;font-size  : 11px;line-height: 16px;color  : #1E1E1E;opacity: 0.4;">This website USES TapPay SSL transaction transmission system of Jooray Technology, which can perfect and protect your payment transmission data through PCI-DSS, VISA, MasterCard and other industry data security Level 1 Level. MasterCard and other industry data security Level 1 Level.</span>',
}
// new paymentElement(domId, initialData)
new paymentElement('payment', initData)

CDN

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Payment Element Quick Example</title>
  <script src="https://cdn.jsdelivr.net/npm/@efox/payment-element@1.1.1-beta.4/dist/index.js "></script>
</head>
<body>
  <div id="payment"></div>
  <script>
    const initData = {
  loopTime: '6000',
  env: 'dev',
  deviceTag: navigator.userAgent.indexOf('iPhone') > -1 || navigator.userAgent.indexOf('Android') > -1 ? 'phone' : 'pc',
  appId: '999',
  merchant: {
    // 商家信息
    merchantId: '1056304931088238592',
    merchantSiteCountry: 'SG', // [必传]所在国家
    settlementCurrency: 'SGD', // [必传]结算币种
    mcc: '5691', // [选传]商家码
  },
  themeData: {
    version: 'v2',
  },
  lang: {
    formComponent: {
      holderName: {
        labelTitle: '持卡人名字',
        placeholder: '持卡人名字',
        errorTips: '持卡人名字 是必須的',
        tips: '與信用卡上名稱相同',
      },
      cardNumber: {
        labelTitle: '信用卡號碼',
        placeholder: '信用卡號碼',
        errorTips: '信用卡號碼 是必須的',
        tips: '所有交易都是安全且加密的',
      },
      expiryDate: {
        labelTitle: '到期日',
        placeholder: 'MM/YY',
        errorTips: '到期日 是必須的',
      },
      cvv: {
        labelTitle: '安全碼(CVC)',
        placeholder: '3碼　　　',
        errorTips: '安全碼 是必須的',
        tips: '一般位於卡片後方',
      },
      payMethod: {
        text: '已選擇的付款方式: ',
        creditCard: '信用卡',
      },
    },
  },
    footer:
      '<span style="font-family: Helvetica;font-style : normal;font-weight: normal;font-size  : 11px;line-height: 16px;color  : #1E1E1E;opacity: 0.4;">This website USES TapPay SSL transaction transmission system of Jooray Technology, which can perfect and protect your payment transmission data through PCI-DSS, VISA, MasterCard and other industry data security Level 1 Level. MasterCard and other industry data security Level 1 Level.</span>',
}
// new paymentElement(domId, initialData)
new paymentElement('payment', initData)
  </script>
</body>
</html>

快速接入 Stripe

import paymentElement from '@efox/payment-element'

const initData = {
  loopTime: '6000', //[必传]订单状态轮询间隔
  env: 'dev', //[必传]环境
  deviceTag: navigator.userAgent.indexOf('iPhone') > -1 || navigator.userAgent.indexOf('Android') > -1 ? 'phone' : 'pc',//[必传]设备平台，对应不同UI
  appId: '999', //[必传]支付中台分配给业务的appId
  channelInfo: {
    // [选传]渠道信息,默认shopline payment渠道 payMethod为"Card"
    chId: 'Stripe', // [选传]渠道ID
    payMethod: 'Card', // [选传]支付方法,
     extra: {
        accountId: 'acct_1IM6EiIDaubw4NgI',
      },
  },
  merchant: {
    // 商家信息
    merchantId: '2021011114956121231',// [必传]商户Id
    merchantSiteCountry: 'SG', // [必传]所在国家
    settlementCurrency: 'SGD', // [必传]结算币种
    mcc: '5691', // [选传]商家码
  },
  themeData: {//模板主题
    version: 'v2',//必填 v1 v2 
  },
  lang: {//全部可选
    formComponent: {
      holderName: {
        labelTitle: '持卡人名字',
        placeholder: '持卡人名字',
        errorTips: '持卡人名字 是必須的',
        tips: '與信用卡上名稱相同',
      },
      cardNumber: {//卡号
        labelTitle: '信用卡號碼',// input 的标题 label
        placeholder: '信用卡號碼',//input 的 placeholder
        errorTips: '信用卡號碼 是必須的', //错误提示
        tips: '所有交易都是安全且加密的',//icon 上的提示
      },
      expiryDate: {//过期日期
        labelTitle: '到期日',
        placeholder: 'MM/YY',
        errorTips: '到期日 是必須的',
      },
      cvv: {//cvv
        labelTitle: '安全碼(CVC)',
        placeholder: '3碼　　　',
        errorTips: '安全碼 是必須的',
        tips: '一般位於卡片後方',
      },
    },
  },
     footer:
      '<span style="font-family: Helvetica;font-style : normal;font-weight: normal;font-size  : 11px;line-height: 16px;color  : #1E1E1E;opacity: 0.4;">This website USES TapPay SSL transaction transmission system of Jooray Technology, which can perfect and protect your payment transmission data through PCI-DSS, VISA, MasterCard and other industry data security Level 1 Level. MasterCard and other industry data security Level 1 Level.</span>',
}

const payment = new paymentElement('payment', initData)

// 不足两位数补0
export function zeroPadding(value) {
  return `${value}`.length === 1 ? `0${value}` : `${value}`
}

// 获取utc时间
export function getUTCformatyyyyMMddHHmmss() {
  const date = new Date()
  const year = date.getUTCFullYear()
  const month = zeroPadding(date.getUTCMonth() + 1)
  const day = zeroPadding(date.getUTCDate())
  const hours = zeroPadding(date.getUTCHours())
  const minutes = zeroPadding(date.getUTCMinutes())
  const seconds = zeroPadding(date.getUTCSeconds())

  return `${year}${month}${day}${hours}${minutes}${seconds}`
}

const orderData = {
  actionType: 'Submit', //S:订单信息提交   U:订单信息更新  I:订单信息查询  C:订单撤销
  signType: 'RSA2', // [必传]签名加密类型
  sign: 'pO6V5ozdTA7EoRtglhVvEkNyC7fJYuREryrzNVYG3t10meMfiTI5wi0dcJQQxNdxlqA', // [必传]签名
  returnUrl: 'https://www.baidu.com', // [必传]跳到第三方页面操作完成后跳转回的url
  notifyUrl: 'http://suo.im/6gMEe2', // [必传]SL payments服务端对服务端通知的url
  orderInfo: {
    // 订单信息
    merchantOrderId: getUTCformatyyyyMMddHHmmss(), // [必传]业务唯一订单号
    merchantOrderTime: getUTCformatyyyyMMddHHmmss(), // [必传]业务订单时间，格式 yyyyMMddHHmmss
    amount: 10000, // [必传]订单金额
    currency: 'HKD', // [必传]货币类型
    productInfoList: [
      {
        // [必传]商品信息 至少1条
        productId: '测试', // [必传]商品ID
        productName: '测试', // [必传]商品名称
        productInfo: '测试', // [选题]产品信息
        localCurrency: 'HDK', //[选填]币种
        localAmount: '10.00', //[选填]金额
      },
    ],
  },
  userInfo: {
    // 用户信息
    userType: 'yyuid', // [必传]用户类型
    userId: '123456', // [必传]用户uid
    userName: '123456', // [必传]用户名称
  },
  orderData: {
    automatic3D: 'false', //是否启用自动3D
    /*
    * http://wiki-xpay.yy.com/display/SPC/Stripe
    * 默认为false，为true时由渠道根据自己SCA引擎判断是否要3D，
    * 为false时渠道会努力去发起3D
    * （当银行支持3D的时候则一定会发起3D，
    * 当银行不支持3D的时候则无法发起，无法发起3D则降为2D）
    */
  },
  // 参考下面riskData数据结构，以及http://wiki-xpay.yy.com/pages/viewpage.action?pageId=14319705
  riskData: {
    prodMsg: {prodId: '测试', prodName: '测试', localCurrency: 'HKD', localAmount: '10'},
    prodtax: '1',
    deliverytax: '2',
    deliveryamt: '3',
    discount: '4',
    storeId: '5',
    deliveryType: '5',
    deliveryChannel: '6',
    url: '7',
    ip: '8',
    phone: '9',
    email: 'linhaoran@yy.com',
    postCode: '12',
    receiptName: '13',
    receiptAddress: '14',
    subtotal: '15',
    total: '16',
    originalCurrencyCode: '17',
    descriptorCountry: '18',
    quantity: 10,
  }, // [选传]风控数据
}

document.querySelector('#submit').addEventListener('click', () => {
  payment.orderAction(orderData)
})