微信支付 (JSSDK支付)

等级 454 0 0

官方文档

微信支付 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')
            }
          })
        })
      })
    }
收藏
评论区

相关推荐

微信支付 (JSSDK支付)
官方文档 微信支付 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter7_7&index6 微信授权获取code https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JSSDK.html58 准备工作 微信公
微信小程序支付功能全流程实践
前言 微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能。在小程序内可调用微信的API完成支付功能,方便、快捷。小程序开发者在开发小程序时,支付流程是必然要接触到,今天胡哥就小程序支付的全流程为大家一一细说,让小伙伴能快速得掌握小程序支付能力,避免踩坑! 知己知彼,方能百战不殆 小程序支付流程图 小程序支付交互流程图(https:/
微信小程序modal
首先创建一个组件component,组件命名可以为modal modal.wxml的内容为 <view class'modalmask' wx:if'{{show}}' bindtap'clickMask' <view class'modalcontent' <scrollview scrolly class'mainc
微信小程序轮播图
实现效果 wxml代码 <view style"height:20rpx;"</view <view class"swiper"
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题 image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png) 错误代码 var date '20210306 17:00:00' var dateT
微信小程序部分api 会触发 onShow onHide
解决部分api触发小程序 onShow onHide 首先要明白 微信小程序的 onShow() onHide()分为页面级的和应用级的,应用级的就是app.js里面的那几个,页面级的就是pages里的 当使用了下列api时,均会触发页面级和应用级的onShow onHide 1. 点击右上角小圆点关闭小程序。 2. 图片预览:wx.preview
金三银四了,掌握 JS 这 36 个概念,助你一臂之力
作者:Mahdhi Rezvi 译者:前端小智 来源:dmitripavlutin 点赞再看,微信搜索【大迁世界(https://mp.weixin.qq.com/s/sY9ufGGKfcdaAQ7KJQs3HA)】,B站关注【前端小智(https://space.bilibili.com/31089477)】这个没有大厂背景,但有着
vue h5 对接支付宝,微信支付,微信js支付
vue h5 实现支付(支付宝,微信) h5端实现支付难度不大,只是有些小的点需要注意下,其他的看文档撸就行了。 支付宝很简单,后端返回一个 html ,前端插入调用就行了,微信支付分两种:1、微信内支付(jsapi,微信内浏览器)2、微信外支付(h5支付)。 一、支付宝支付 // 前端啥都不用管,交给后端去干,返回 html 调用点击就好了 /
7个关于"this"面试题,你能回答上来吗?
作者:Shadeed 译者:前端小智 来源:dmitripavlutin 点赞再看,微信搜索【大迁世界(https://mp.weixin.qq.com/s/sY9ufGGKfcdaAQ7KJQs3HA)】,B站关注【前端小智(https://space.bilibili.com/31089477)】这个没有大厂背景,但有着一股向上积
微信小程序字符串展示为二维码
微信小程序中要将一个字符串展示为二维码的形式,需要引入该js文件 // Core code comes from https://github.com/davidshimjs/qrcodejsvar QRCode;(function () { / Get the type by string length
基于Vue3+TypeScript+ Vue-Cli4.0构建手机端模板脚手架
vue3h5template基于 Vue3TypeScript VueCli4.0 vant ui sass rem 适配方案axios 封装 jssdk 配置 vconsole 移动端调试,构建手机端模板脚手架项目地址: 建议手机端查看 Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本
微信小程序 - 引入字体图标
网站图标要想做到清晰无锯齿,使用普通图片或者雪碧图都很难达到这个目的,一般我们都会引入字体图标(svg转font,使用图标像使用字体一样,详见《web页面使用字体图标》,那么如何在微信小程序中使用自定义图标呢?请看详细步骤:1、从上选择喜欢的图标加入购物车,在购物车弹窗中点击“下载代码”后,解压阿里图库 加入购物车购物车 下载代码图标文件内容2.、进入导入第
推荐几个微信小程序开发小技巧
前段时间在下开发了个微信小程序,开发过程中总结了一些我觉得对我有用的小技巧,提炼出来,相当于一个总结复盘,也希望可以帮助到大家。如果对大家确实有帮助,别忘了点赞哦 🌟 ~1\. 开发中可能遇到的坑以及 Tips本来想写个小技巧的,结果我总结了一堆坑,没上手之前完全想象不到微信小程序的开发体验是如此之差、如此之烂,从微信
计划助手V1.0-微信小程序(QQ小程序)-源代码分享
疫情期间在家感觉好无聊啊,于是利用空闲时间做了一个用来记录和管理小目标时间的小程序,命名为《小沙漏》。 QQ版本小程序同步上线,QQ小程序叫《时间小沙漏》,欢迎大家前来体验,后期也会添加其他的新功能哦 【区别】:微信小程序的代码与QQ小程序的源码是不一样的。 微信小程序的源码基于微信小程序云开发,需要在有网络的情况下使用,具有同步功能,所有记录在删除小
微信小程序体验composition-api(类似vue3)
微信小程序compositionapi用该是什么样子? 使用使用起来应该像是这个样子wxue(options) setup配置应该是包含一个setup选项是一个函数,返回的函数可以this.xxx调用,返回的数据可以this.data.xxx用到,如下import wxue, reactive from 'wxue'wxue( setup(option