专栏首页企鹅号快讯微信支付之微信小程序支付

微信支付之微信小程序支付

今天给大家介绍一下微信小程序是如果实现支付的流程,在开发之前我们首先要获取到商户的appId和mchId最后就是商户的key值了。这些值在商户申请成功之后都会通过邮件的形式发送给商户,所以如果还没有拿到这些值的情况下,是不能够进行微信支付的。

上面的那些值全部拿到之后,我们就可以开始微信支付开发了。

微信支付的流程大致分为四步骤:

1.在小程序中获取用户的登录信息,成功后可以获取到用户的code值

微信官方api地址:点击打开链接

微信官方api地址:点击打开链接

4.在微信小程序中支付订单,最终实现微信的支付功能

微信官方api地址:点击打开链接

具体的流程图如下所示:

下面我们就开始详细的介绍一下微信支付的整个流程:

首先是获取用户的信息,也就是小程序中的登录接口:

[javascript]view plaincopy

//app.js

App({

onLaunch:function() {

wx.login({

success:function(res) {

if(res.code) {

//发起网络请求

wx.request({

url:'https://test.com/onLogin',

data: {

code: res.code

}

})

}else{

console.log('获取用户登录态失败!'+ res.errMsg)

}

}

});

}

})

小程序的官方写法是这样的,通过login登录来获取用户的code值。因为这个code值,在请求用户的openid需要用到。

服务端代码如下:

[java]view plaincopy

publicMap onLogin(String code){

Mapresult=newHashMap();

String url=ConstantUtils.getSessionKeyUrl+"?appid="+ ConstantUtils.appId+

"&secret="+ConstantUtils.secret+"&js_code="+code+"&grant_type="+ConstantUtils.grantType;

JSONObject httpResult=HttpUtils.httpGet(url);

result.put("openid",httpResult.get("openid"));

result.put("session_key",httpResult.get("session_key"));

result.put("expires_in",httpResult.get("expires_in"));

returnresult;

}

具体的接口介绍这里就不做过多的介绍,因为微信官方api里面写的很清楚了。

请求这个接口之后我们就可以获取到用户的openid了,这个参数是在接下来统一下订单的接口需要用到的。

最后就是统一下单的接口,这个接口主要是为了获取支付接口所需要的prepay_id字段值。统一下订单接口是发生在我们自己的服务端这边的,我们需要请求微信的:https://api.mch.weixin.qq.com/pay/unifiedorder接口。这个接口有很多注意点,特别是sign签名的生成规则,我在初期好多次都是因为sign签名验证失败导致最后下单失败的。还有一点就是total_fee总金额是以分为单位,而且只能是整数,不能是分数。

下面看我服务端的代码:

[java]view plaincopy

publicMap createOrder(String openId){

Mapresult=newHashMap();

result.put("status","1");

result.put("payType","weixin");

result.put("orderId","12345678");

String formData=orderService.commitData(openId);

String httpResult = HttpUtils.httpXMLPost(ConstantUtils.createOrderUrl,formData);

try{

Map resultMap = WXPayUtil.xmlToMap(httpResult);

result.put("package","prepay_id="+ resultMap.get("prepay_id"));

result.put("nonceStr",resultMap.get("nonce_str"));

}catch(Exception e) {

e.printStackTrace();

}

String times= WXPayUtil.getCurrentTimestamp()+"";

result.put("timeStamp",times);

Map packageParams =newHashMap();

packageParams.put("appId", ConstantUtils.appId);

packageParams.put("signType", ConstantUtils.signType);

packageParams.put("nonceStr",result.get("nonceStr")+"");

packageParams.put("timeStamp",times);

packageParams.put("package", result.get("package")+"");//商户订单号

String sign="";

try{

sign= WXPayUtil.generateSignature(packageParams, ConstantUtils.key);

}catch(Exception e) {

e.printStackTrace();

}

result.put("paySign",sign);

returnresult;

}

请求xml生成函数代码如下:

[java]view plaincopy

publicString commitData(String openId){

String nonceStr= WXPayUtil.generateUUID();

String body="JSAPI支付测试";

Map packageParams =newHashMap();

packageParams.put("appid", ConstantUtils.appId);

packageParams.put("body",body);

packageParams.put("mch_id", ConstantUtils.mchId);

packageParams.put("nonce_str",nonceStr);

packageParams.put("notify_url", ConstantUtils.notifyUrl);//支付成功后的回调地址

packageParams.put("openid",openId+"");//支付方式

packageParams.put("out_trade_no","12345678");//商户订单号

packageParams.put("sign_type", ConstantUtils.signType);

packageParams.put("spbill_create_ip","127.0.0.1");

packageParams.put("total_fee","1");//支付金额,这边需要转成字符串类型,否则后面的签名会失败

packageParams.put("trade_type", ConstantUtils.tradeType);//支付方式

String sign="";

try{

sign= WXPayUtil.generateSignature(packageParams, ConstantUtils.key);

}catch(Exception e) {

e.printStackTrace();

}

String formData ="";

formData +=""+ ConstantUtils.appId+"";//appid

formData +=""+ body+"";

formData +=""+ ConstantUtils.mchId+"";//商户号

formData +=""+nonceStr+"";

formData +=""+ ConstantUtils.notifyUrl+"";

formData +=""+openId+"";

formData +=""+"12345678"+"";

formData +=""+ ConstantUtils.signType+"";

formData +=""+"127.0.0.1"+"";

formData +=""+"1"+"";

formData +=""+ ConstantUtils.tradeType+"";

formData +=""+sign+"";

formData +="";

returnformData;

}

sign签名的拼接规则工具类都给我们实现好了,我们直接调用就可以了。

最后也是最关键的一步就是小程序里面的微信支付过程了,官方支付的代码是:

[javascript]view plaincopy

wx.requestPayment(

{

'timeStamp':'',

'nonceStr':'',

'package':'',

'signType':'MD5',

'paySign':'',

'success':function(res){},

'fail':function(res){},

'complete':function(res){}

})

关于字段的解释大家可以去官网上面看看,里面说的特别详细,地址就在上面给出的。

最后支付还是需要我们真实用手机付钱才可以,支付的最小单位可以是1分钱,测试的时候我们支付一分钱就可以了

本文来自企鹅号 - 林志强媒体

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 手把手教你前端本地文件操作与上传

    前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用户可通过以下三种方式操作触发: 通过input...

    企鹅号小编
  • 小程序新增搜索框历史记录列表并可搜索内容关键词

    1、前几日发现小程序新增了一个功能,即在小程序的入口之一搜索框出现了搜索历史列表,如图 新增的历史列表按照搜索行为的先后顺序进行排列,与现在时间距离越近的越靠在...

    企鹅号小编
  • 波音展示无人电动货运飞机原型 借机检验自动驾驶技术

    腾讯科技讯 1月11日消息,波音公司周三展示了一台无人电动垂直起降货运飞机(CAV)原型,对此,波音方面表示,这一原型还将用来检验类似飞机的自动驾驶技术。 波音...

    企鹅号小编
  • 微信支付之微信小程序支付

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/...

    林老师带你学编程
  • 给Angular应用增添搜索Search功能

    (1) dashboard Component里增添搜索Component的selector:

    Jerry Wang
  • 硬核看房利器——Web 全景的实现

    疫情期间,打破社交距离限制的交互模式被推向前台,为不少行业的传统交易提供了想象的空间。

    winty
  • UWP 将图片裁剪成圆形(椭圆)

    2018-06-15 13:21

    walterlv
  • spring之通过FactoryBean配置Bean

    绝命生
  • 如何让你的品牌曝光度势不可挡?

    业做seo的目的比较明确,通过seo获得订单或品牌推广,获得订单我们可以理解,因为可以量化,而品牌推广则是一个模糊的概念,除非做得十分成功,不然品牌推广工作很难...

    蝙蝠侠IT
  • Java基础总结大全(4)

    最新通知 ●回复"每日一练"获取以前的题目! ●【新】Android视频更新了!(回复【安卓视频】获取下载链接) ●【新】Ajax知识点视频更新了!(回复【学习...

    Java学习

扫码关注云+社区

领取腾讯云代金券