Amaze UI

Web 组件

WechatPay


微信 JS SDK 应用示例。微信支付 99% 是后端的工作,如果项目中需要微信支付,请把重心放在后端。

微信 JS SDK 脚本及权限验证配置请从后端返回。相关支持请联系微信官方或参考官方文档

通过 JS SDK 发起微信支付请求只能在微信中才能执行,请扫描二维码在微信内查看效果。


组件演示

default(默认)

  <div data-am-widget="wechatpay" class="am-wechatpay am-wechatpay-default" data-wechat-pay="{  timestamp: '1421914022', nonceStr: '8W93zPDk9fNRxRbpqv5yqwCkNRWZspyW', package: 'prepay_id&#x3D;wx20150122160705ac42dc60170063851392', signType: 'MD5', paySign: '5AF3E6B975D35BA23B63277CB45C8830', }">
      <button type="button" class="am-btn am-btn-primary am-btn-block am-wechatpay-btn">
          速速支付!
      </button>
  </div>

API

{
  "id": "",
  "className": "",
  "theme": "",
  "options": {},
  "content": {
    // 订单信息及支付签名
    "order": {
      "timestamp": "", // 支付签名时间戳
      "nonceStr": "", // 支付签名随机串
      "package": "", // 统一支付接口返回的 prepay_id 参数值
      "signType": "", // 加密类型
      "paySign": "" // 支付签名
    },
    "title": "" // 按钮文字
  }
}

微信 JS SDK 调用支付接口要点

JS SDK 权限验证

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化 URL 的 SPA 的 Web App 可在每次 URL 变化时进行调用),具体文档在微信支付 API ,签名和其他配置参数在服务端实现逻辑。

详细步骤见微信官网文档

  wx.config({
    debug: true,
    appId: '', // 必填,公众号的唯一标识
    timestamp: '', // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '', // 必填,微信签名
    jsApiList: [
      'chooseWXPay'
    ] // 必填,需要使用的JS接口列表
  });

使用微信支付统一下单接口生成订单信息

详见微信支付统一下单接口文档

生成支付签名

详见微信支付签名算法

发起支付请求

wx.chooseWXPay({
  timestamp: 0, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
  nonceStr: '', // 支付签名随机串,不长于 32 位
  package: '', // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***)
  signType: 'MD5', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
  paySign: '', // 支付签名
});
侧栏导航
×
Amaze UI 微信
在微信上关注我们