JS交互微信之JSAPI支付

前言

本篇为JS交互微信系列篇的第四篇微信JSAPI支付,记录在微信内置浏览器内用调用微信支付过程。

一、 介绍

JSAPI支付是用户在微信中打开商户的H5页面,商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付。

应用场景:

  • 用户在微信公众账号内进入商家公众号,打开某个主页面,完成支付
  • 用户的好友在朋友圈、聊天窗口等分享商家页面连接,用户点击链接打开商家页面,完成支付
  • 将商户页面转换成二维码,用户扫描二维码后在微信浏览器中打开页面后完成支付

二、 准备

1. 准备内容

要拥有两个账号:

  1. 微信服务号,要通过认证(企业才拥有资格)
  2. 微信商户平台号(微信支付平台)

2. 平台配置

2.1 微信支付(商户平台)中

要开通产品中心的JSAPI支付。然后 产品中心=>开发配置=>支付配置=>公众号支付配置绑定支付授权目录,写已通过ICP备案的域名。另外,要在ip白名单中,配置测试地址ip和线上生产地址ip,不然各种回调都会失败!

2.2 微信公众平台中

由于在微信内支付需要获取用户的 openid,要获取它则必须通过网页授权配置。在公微信公众平台中, 公众号设置=>功能设置=>网页授权域名中按要求填写。

三、 开发

在支付流程方面,重点依然都在后端处理,前端方面步骤比较简单。本文只叙述前端内容。

1. 用户授权,获取code

在将要进入支付的前一页面,直接接入微信授权,然后跳转进要支付的那个页面。举个例子:有a、b两个页面,在b页面用到支付,b页面由a页面跳转而来。那么在a页面跳b页面的时候,别直接跳转b的url,而是跳转到:https://open.weixin.qq.com/connect/oauth2/authorize?appid={appId}&redirect_uri={b.html}&response_type=code&scope=snsapi_base#wechat_redirect我们注意到,这里有这两个需要自己写的参数:appidredirect_uri,意义是:

  • appid——服务号id
  • redirect_uri——获取授权后回调的页面地址,比如b页面

另外,还有一个注意的点是,b.html这个url我们要进行encode转码,不然地址解析可能会出现问题!

// url转码
let url = 'a.html';
url = escape(url);

2. 得到code,换取凭证获取openid

上一步执行完后,在微信浏览器中,我们会得到一个链接,类似:b.html?&code={code}&state=#/在此处,我们得到了一个code值,这就是我们获取 openid的凭证了。获取方法当然是把值传给后台,后台去处理啦~

3. 接收后端返回的我们需要的参数值

在上一步中,我们拿到code值后,就可以提交一些信息给后端了,比如商品相关属性、总价等,另外加上code值,传给后端。后端一顿操作后,返回给前端。我们需要的参数如下(后端返回下面这些参数):

// 微信支付需要参数
orderInfo: {
    package: '',    // 前端需要从后台获取该数据
    paySign: '',    // 微信签名,前端需要从后台获取该数据
    appId: '',  // 需要在微信绑定商户号,成功之后会生成有appid
    signType: '',   // 微信签名方式,默认为"MD5",也可以从后台获取
    nonceStr: '',   // 随机串,前端需要从后台获取该数据
    timeStamp: '',  // 时间戳,自1970年以来的秒数,前端需要从后台获取该数据
}

4. 交互微信

上个步骤拿到需要交互微信的参数后,就开始调用微信的支付接口了,如下:

// 微信支付
WeixinJSBridge.invoke('getBrandWCPayRequest', {
    appId: _this.orderInfo.appId,   // 上一步得到的参数
    nonceStr: _this.orderInfo.nonceStr, // 上一步得到的参数
    package: _this.orderInfo.package,   // 上一步得到的参数
    signType: _this.orderInfo.signType, // 上一步得到的参数
    timeStamp: _this.orderInfo.timeStamp,   // 上一步得到的参数
    paySign: _this.orderInfo.paySign    // 上一步得到的参数
}, res => {
    // 调用后要做的事儿
    // codes...

    // 根据get_brand_wcpay_request的值判断支付状态
    if (res.err_msg === "get_brand_wcpay_request:ok") {
        // ok:支付成功
        // 支付成功要做的事儿,比如跳转支付完成后的页面等
    } else if (res.err_msg === "get_brand_wcpay_request:cancel") {
        // cancel:用户取消支付
        // 取消支付要做的事儿,比如进入重新支付步骤等
    } else if (res.err_msg === "get_brand_wcpay_request:fail") {
        // fail:支付失败
        // 支付失败要做的事儿,比如进入支付失败步骤等
    } 
    // 注:使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
})

5. 常见错误码

名称

描述

原因

解决方案

INVALID_REQUEST

参数错误

参数格式有误或者未按规则上传

订单重入时,要求参数值与原请求一致,请确认参数问题

NOAUTH

商户无此接口权限

商户未开通此接口权限

请商户前往申请此接口权限

NOTENOUGH

余额不足

用户帐号余额不足

用户帐号余额不足,请用户充值或更换支付卡后再支付

ORDERPAID

商户订单已支付

商户订单已支付,无需重复操作

商户订单已支付,无需更多操作

ORDERCLOSED

订单已关闭

当前订单已关闭,无法支付

当前订单已关闭,请重新下单

SYSTEMERROR

系统错误

系统超时

系统异常,请用相同参数重新调用

APPIDNOTEXIST

APPID不存在

参数中缺少APPID

请检查APPID是否正确

MCHIDNOTEXIST

MCHID不存在

参数中缺少MCHID

请检查MCHID是否正确

APPIDMCHIDNOT_MATCH

appid和mch_id不匹配

appid和mch_id不匹配

请确认appid和mch_id是否匹配

LACK_PARAMS

缺少参数

缺少必要的请求参数

请检查参数是否齐全

OUTTRADENO_USED

商户订单号重复

同一笔交易不能多次提交

请核实商户订单号是否重复提交

SIGNERROR

签名错误

参数签名结果不正确

请检查签名参数和方法是否都符合签名算法要求

XMLFORMATERROR

XML格式错误

XML格式错误

请检查XML参数格式是否正确

REQUIREPOSTMETHOD

请使用post方法

未使用post传递参数

请检查请求参数是否通过post方法提交

POSTDATAEMPTY

post数据为空

post数据不能为空

请检查post数据是否为空

NOT_UTF8

编码格式错误

未使用指定编码格式

请使用UTF-8编码格式

三、 完成

至此,调用微信JSAPI来完成在微信内的支付就完成了。

本文分享自微信公众号 - 流眸(zxm0146),作者:流眸

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js页面全屏/退出全屏

      在做前端PC端项目中,我们经常会遇到让页面全屏的需求。大多情况下,这样可以使得用户在该页面更加专注,屏蔽掉该页面之外的干扰。

    流眸
  • 开发姿势篇——基础开发

      近期学习了一下大厂h5开发实战内容,并且参考实战手册做一些记录。大概包括以下几个方面内容:

    流眸
  • 进入移动Web世界

    那么问题来了,为什么会有一个默认的viewport呢?我们知道,pc端页面,在移动端查看的时候,由于像素不匹配,但是为了能够给用户展现一个比较完整的页面,因此会...

    流眸
  • 干货 | 手把手教你开通小程序里的微信支付

    今天,知晓程序就来为你总结,小程序对接微信支付的全过程。希望这篇文章,可以帮你为小程序尽快接入支付功能、尽快上线。

    知晓君
  • 微信公众号支付功能开发(Java版)

    下单和修改支付状态是用户的业务系统干的事,我们来说说如何快速发起支付和接收异步通知。

    Java团长
  • 开发 | 只需 3 步,教你在小程序中接入微信支付

    最近需要在微信小程序中用到在线支付功能,发现要在小程序里实现微信支付还是很方便的。

    知晓君
  • 浅谈移动支付测试

    现在在线支付是微信钱包和alipay的天下,不管你是买瓶水,还是买个大件电器,都可以在线支付解决。不仅支付方便快捷,而且不用找零。

    赵云龙龙
  • 微信小程序支付功能全流程实践

    微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能。在小程序内可调用微信的API完成支付功能,方便、快捷。小程序开发者在开发小程序时,支付流程是必然...

    胡哥有话说
  • 干货 | 使用小程序支付的常见问题

    知晓程序员,专注微信小程序开发! 最近,小程序群内也有不少同学问到支付相关的问题,连胜老师今天给大家分享一下小程序支付的几个问题。 一、小程序支付和公众号支付是...

    连胜
  • 当付费问答遇上微信社交:会比知乎、悟空问答更强劲吗?| 晓组织 #25

    前段时间,我们开发了一款名叫「闪电答」的小程序。一句话介绍,「闪电答」是一个帮人赚钱的话题传播工具。

    知晓君

扫码关注云+社区

领取腾讯云代金券