微信支付 (JSSDK支付)

• 阅读 1419

官方文档

微信支付 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

微信授权获取code https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#58

准备工作

  • 微信公众平台企业账号
  • 商户号
  • 开通jsapi支付权限
  • 设置了页面授权域名,并且是你网站的域名地址
  • 基本接口权限,尤其是jssdk部分权限,保证尽可能都开通
  • https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3

    1.获取code传给后台

    1.1 获取到code

    // 微信授权,得到code
    getOpendId(appId) {
    const code = this.getQueryString('code')
    this.code = code
    const url = encodeURIComponent(window.location.href)
    if (!code) {
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${url}&response_type=code&scope=snsapi_base&state=0#wechat_redirect`
    } else {
      // 这是我调用的后台接口,详见1.2
      // 需要传入code才能获取到用户的信息
      this.wxScope()
    }
    },

参数说明

微信支付 (JSSDK支付)

说明

  • 我代码中的方式不弹出授权页面,直接跳转,只能获取用户openid
  • 如果想弹出授权页面,设置连接中的scope值为snsapi_userinfo,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息

    1.2 将code传给后台

    // 微信授权登陆接口
    wxScope() {
    const code2 = {
      code: this.code // 后台需要的code
    }
    qryWebAccessToken(code2).then(res => {
      if (res.openid) {
        this.openid = res.openid // 得到用户的openid
      } else {
        console.log('微信登陆失败-授权')
        this.fail = true
        this.wx = true
        Toast('微信登陆失败')
        return
      }
    })
    },

    2. 微信支付 - JSSDK支付

2.1 引入js-weixin的模块,流程如下:

引入模块--生成签名(wx.config需要)--结合接口返回参数--唤起wxpay。

2.1.1 装包(weixin-js-sdk),引入模块

npm i (weixin-js-sdk)

import wx from 'weixin-js-sdk'

2.1.2 生成签名(wx.config需要)

这个文件我命名 为了common.js,一会唤醒支付的时候需要用到

import wx from 'weixin-js-sdk
var AppId = ''
var Timestamp = ''
var Signature = ''
var Noncestr = ''
function GetSignature (callback) {
  // qryWxSignature 这个是调用后台获取签名的接口
  qryWxSignature({
    url: window.location.href.split('#')[0]
  }).then((data) => {
    AppId = data.appId
    Timestamp = data.timestamp
    Signature = data.signature
    Noncestr = data.nonceStr
    wx.config({
      beta: true,
      debug: false,
      appId: AppId,
      timestamp: Timestamp,
      nonceStr: Noncestr,
      signature: Signature,
      // 这里是把所有的方法都写出来了 如果只需要一个方法可以只写一个
      jsApiList: [
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'hideMenuItems',
        'showMenuItems',
        'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem',
        'translateVoice',
        'startRecord',
        'stopRecord',
        'onRecordEnd',
        'playVoice',
        'pauseVoice',
        'stopVoice',
        'uploadVoice',
        'downloadVoice',
        'chooseImage',
        'previewImage',
        'uploadImage',
        'downloadImage',
        'getNetworkType',
        'openLocation',
        'getLocation',
        'hideOptionMenu',
        'showOptionMenu',
        'closeWindow',
        'scanQRCode',
        'chooseWXPay',
        'openProductSpecificView',
        'addCard',
        'chooseCard',
        'openCard',
        'openWXDeviceLib',
        'closeWXDeviceLib',
        'configWXDeviceWiFi',
        'getWXDeviceInfos',
        'sendDataToWXDevice',
        'startScanWXDevice',
        'stopScanWXDevice',
        'connectWXDevice',
        'disconnectWXDevice',
        'getWXDeviceTicket',
        'WeixinJSBridgeReady',
        'onWXDeviceBindStateChange',
        'onWXDeviceStateChange',
        'onScanWXDeviceResult',
        'onReceiveDataFromWXDevice',
        'onWXDeviceBluetoothStateChange'
      ]
    })
    wx.ready(function () {
      console.log(callback, 'callback')
      if (callback) callback()
    })
  })
}
export {
  GetSignature
}

2.1.3 结合接口返回参数--唤起wxpay

参考地址 :https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#58

// 引入
import { GetSignature } from '../../../../static/common'
import wx from 'weixin-js-sdk'
// 点击支付

 payNow() {
      var that = this
      // GetSignature为common.js中的GetSignature内容
      GetSignature(() => {
        // wxpayPreOrder 为后台微信支付接口
        wxpayPreOrder(this.payMsg).then(res => {
          wx.chooseWXPay({
             // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。
             // 但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            timestamp: res.timeStamp, 
            // 支付签名随机串,不长于 32 位
            nonceStr: res.nonceStr, 
            package: res.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
            signType: res.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
            paySign: res.paySign, // 支付签名
            success: function(res) {
              // 支付成功后的回调函数
            },
            fail: function(res) {
              console.log('支付失败')
            },
            complete: function(res) {
              console.log(res, 'complete')
            }
          })
        })
      })
    }
点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
4个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
光头强的博客 光头强的博客
4个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue
密钥管理系统-为你的天翼云资产上把“锁
本文关键词:数据安全,密码机,密钥管理一、你的云上资产真的安全么?1.2021年1月,巴西的一个数据库30TB数据被破坏,泄露的数据包含有1.04亿辆汽车和约4000万家公司的详细信息,受影响的人员数量可能有2.2亿;2.2021年2月,广受欢迎的音频聊天室应用Clubhouse的用户数据被恶意黑客或间谍窃取。据悉,一位身份不明的用户能够将Clubho
NVIDIA安培架构下MIG技术分析
关键词:NVIDIA、MIG、安培一什么是MIG2020年5月,NVIDIA发布了最新的GPU架构:安培,以及基于安培架构的最新的GPU:A100。安培提供了许多新的特性,MIG是其中一项非常重要的新特性。MIG的全名是MultiInstanceGPU。NVIDIA安培架构中的MIG模式可以在A100GPU上并行运行七个作业。多实