当前位置:首页 > 微信 > 正文

vue 微信公众号 jssdk调用微信支付

11-25 微信

标签:ISE   import   客户   error   resolve   signature   order   als   ack   

1、首先要依赖微信js-sdk

    npm install weixin-js-sdk

2、封装代码

import wx from "weixin-js-sdk";

export function wexinPay(data) {
  return new Promise((resolve, reject) => {
    //后台传入数据
    let {
      appId,
      timestamp,
      nonceStr,
      signature,
      packages,
      paySign,
      signType
    } = data
//验证微信环境
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
      appId: appId, // 必填,公众号的唯一标识
      timestamp: timestamp, // 必填,生成签名的时间戳
      nonceStr: nonceStr, // 必填,生成签名的随机串
      signature: signature, // 必填,签名,见附录1
      jsApiList: [‘chooseWXPay‘] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    });
    wx.ready(function() {
      wx.chooseWXPay({
        timestamp: timestamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: nonceStr, // 支付签名随机串,不长于 32 位
        package: packages, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***)
        signType: signType, // 签名方式,默认为‘SHA1‘,使用新版支付需传入‘MD5‘
        paySign: paySign, // 支付签名
        success: function(res) {
          // 支付成功后的回调函数
          resolve(res)
        },
        fail: function(res) {
          //失败回调函数
          reject({
            payFail: res
          })
        }
      });
    });
    wx.error(function(res) {
      reject({
        configFail: res
      })
      // config信息验证失败会执行error函数
    });
  })

}

3、调用支付

//引入
import { wexinPay } from "@/plugins/wechatPay"
//根据订单信息从后台获取微信配置参数(和后台商定数据格式,作相应的处理)
payOrder(data).then(res=>{
  //调用封装的支付函数
  wexinPay(res.data).then(res=>{
    console.log("支付成功")
  }).catch(err=>{
    console.log("支付失败")
  })
})

 

vue 微信公众号 jssdk调用微信支付

标签:ISE   import   客户   error   resolve   signature   order   als   ack   

温馨提示: 本文由杰米博客推荐,转载请保留链接: https://www.jmwww.net/weixin/15498.html

博客主人杰米WWW
杰米博客,为大家提供seo以及it方面技巧喜欢的朋友收藏哦!
  • 11365文章总数
  • 2266821访问次数
  • 建站天数
  • 头条文章

    图文推荐

    站长推荐

    友情链接