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/payment-element

v1.3.24

Published

payment element sdk

Downloads

131

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/[email protected]/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/[email protected]/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: '[email protected]',
    postCode: '12',
    receiptName: '13',
    receiptAddress: '14',
    subtotal: '15',
    total: '16',
    originalCurrencyCode: '17',
    descriptorCountry: '18',
    quantity: 10,
  }, // [选传]风控数据
}

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