微信小程序支付及退款流程详解


Posted in Javascript onNovember 30, 2017

首先说明一下,微信小程序支付的主要逻辑集中在后端,前端只需携带支付所需的数据请求后端接口然后根据返回结果做相应成功失败处理即可。我在后端使用的是php,当然在这篇博客里我不打算贴一堆代码来说明支付的具体实现,而主要会侧重于整个支付的流程和一些细节方面的东西。所以使用其他后端语言的朋友有需要也是可以看一下的。很多时候开发的需求和相应问题的解决真的要跳出语言语法层面,去从系统和流程的角度考虑。好的,也不说什么废话了。进入正题。

一. 支付

支付主要分为几个步骤:

  • 前端携带支付需要的数据(商品id,购买数量等)发起支付请求
  • 后端在接收到支付请求后,处理支付数据,然后携带处理后的数据请求 微信服务器 的 支付统一下单接口
  • 后端接收到上一步请求微信服务器的返回数据,再次处理,然后返回前端让前端可以开始支付。
  • 前端进行支付动作
  • 前端支付完成后,微信服务器会向后端发送支付通知(也就是微信要告诉你客户已经付过钱了),后端根据这个通知确定支付完成,然后就去做支付完成后的相应动作,比如修改订单状态,添加交易日志啊等等。

    从这几个步骤可以看出,后端主要的作用就是将支付需要的数据传给微信服务器,再根据微信服务器的响应确定支付是否完成。

    这个流程还是蛮容易理解的。形象的说,前端就是个顾客,后端就是店家,微信服务器的统一下单接口就像收银员。顾客跟店家说,我是谁谁谁,现在我要付多少多少钱给你买什么什么。店家就跟收银员说,那个谁谁谁要付多少钱,你准备收钱吧。收银员收到钱后,就去告诉店家,我已经收到钱了,你给他东西吧。
下面就详细的说明一下各个步骤的具体实现。

1. 前端请求支付

    前端请求支付,就是简单的携带支付需要的数据,例如用户标识,支付金额,支付订单 ID 等等跟 **你的业务逻辑有关** 或者跟 **下一步请求微信服务器支付统一下单接口需要的数据有关** 的相关数据,使用微信小程序的 wx.request( ) 去请求后端的支付接口。

2. 后端请求微信服务器

    后端接收到前端发送的支付请求后,可以进行一下相关验证,例如判断一下用户有没有问题,支付金额对不对等等。

    在验证没什么问题,可以向微信服务器申请支付之后,后端需要使用 微信规定的数据格式 去请求微信的支付统一下单接口。

微信规定的请求数据:

这需要较多代码实现。因为需要的数据个数较多,而且还需要加密并以 XML 格式发送。
首先,有以下数据是使用小程序支付必须提供给微信服务器的参数。

  • 小程序 appid。写小程序的大概没有不知道这个的。。。
  • 用户标识 openid。也就是用户的小程序标识,在我上篇博客中说明了如何获取。
  • 商户号 mch_id 。申请开通微信支付商户认证成功后微信发给你的邮件里有
  • 商户订单号 out_trade_no 。商户为这次支付生成的订单号
  • 总金额 total_fee 。订单总金额,很重要的一点是单位是分,要特别注意。
  • 微信服务器回调通知接口地址 notify_url。微信确认钱已经到账后,会往这个地址多次发送消息,告诉你顾客已经付完钱了,你需要返回消息给微信表示你已经收到了通知。。这个地址不能有端口号,同时要能直接接受POST方法请求。
  • 交易类型 trade_type 。微信小程序支付此值统一为 JSAPI
  • 商品信息 Body。类似"腾讯-游戏"这种格式
  • 终端IP地址 spbill_create_ip 。终端地址IP,也就是请求支付的 IP 地址。
  • 随机字符串 nonce_str 。需要后端随机生成的字符串用于保证数据安全。微信要求不长于32位。
  • 签名 sign 。使用上面的所有参数进行相应处理加密生成签名。(具体处理方式可见下文代码,可直接复用。)

在处理好以上所有数据后,将这些数据以 XML 格式整理并以 POST 方法发送到 微信支付统一下单接口 https://api.mch.weixin.qq.com/pay/unifiedorder 。

3.后端接受微信服务器返回数据

微信服务器在接收到支付数据之后,如果数据没有问题,其会返回用于支付的相应数据,其中非常重要的是 名称为 prepay_id 的数据字段,需要将此数据返回前端,前端才能继续支付。

因此,在后端接收到微信服务器的返回数据后,需要进行相应的处理,最终返回到前端如下数据:

  1. appid 不需多说
  2. timeStamp 当前时间戳
  3. nonceStr 随机字符串
  4. package 就是上面提到的 prepay_id,不过切记格式如 “prepay_id= prepay_id_item“。否则会导致错误。
  5. signType 加密方式,一般应该是 MD5
  6. paySign 对以上数据进行相应处理并加密。

到这里,后端的支付接口已经完成了接收前端支付请求,并返回了前端支付所需数据的功能。

4. 前端发起支付

​ 前端在接收到返回数据后,使用 wx.requestPayment() 来请求发起支付。此 API 需要的对象参数各项值就是我们上一步返回的各个数据。

5.后端接受微信服务器回调

​ 前端完成支付后,微信服务器确认支付已经完成。就会向第一步中设置的回调地址发送通知。后端的接收回调接口在接收到通知后,就可以判断支付是否完成,从而决定后续动作。

​ 需要注意的是,在接收到微信服务器的回调通知后,根据通知的result_code字段判断支付是否成功。在接受到成功的通知后,后端需要返回success数据向微信服务器告知已得到回调通知。否则微信服务器会不停的向后端发送消息。另外微信的通知是以XML格式发送的,在接受处理时需要注意。

​ 微信的大概支付流程就是这样。以下是PHP语法的微信支付类,可以比照上面的步骤介绍,加深理解。在需要支付时,直接传入参数实例化此类再调用类的 pay 方法即可。

//微信支付类
class WeiXinPay{
  //=======【基本信息设置】=====================================
  //微信公众号身份的唯一标识
  protected $APPID = appid;//填写您的appid。微信公众平台里的
  protected $APPSECRET = secret;
  //受理商ID,身份标识
  protected $MCHID = '11111111';//商户id
  //商户支付密钥Key
  protected $KEY = '192006250b4c09247ec02edce69f6a2d';
  //回调通知接口
  protected $APPURL =   'https://smart.afei.com/receivesuc';
  //交易类型
  protected $TRADETYPE = 'JSAPI';
  //商品类型信息
  protected $BODY = 'wx/book';
  //微信支付类的构造函数
  function __construct($openid,$outTradeNo,$totalFee){
    $this->openid = $openid; //用户唯一标识
    $this->outTradeNo = $outTradeNo; //商品编号
    $this->totalFee = $totalFee; //总价
  }
  //微信支付类向外暴露的支付接口
  public function pay(){
    $result = $this->weixinapp();
    return $result;
  }
   //对微信统一下单接口返回的支付相关数据进行处理
   private function weixinapp(){
     $unifiedorder=$this->unifiedorder();
     $parameters=array(
     'appId'=>$this->APPID,//小程序ID
     'timeStamp'=>''.time().'',//时间戳
     'nonceStr'=>$this->createNoncestr(),//随机串
     'package'=>'prepay_id='.$unifiedorder['prepay_id'],//数据包
     'signType'=>'MD5'//签名方式
       );
     $parameters['paySign']=$this->getSign($parameters);
     return $parameters;
   }
  /*
   *请求微信统一下单接口
   */
  private function unifiedorder(){
    $parameters = array(
      'appid' => $this->APPID,//小程序id
      'mch_id'=> $this->MCHID,//商户id
      'spbill_create_ip'=>$_SERVER['REMOTE_ADDR'],//终端ip
      'notify_url'=>$this->APPURL, //通知地址
      'nonce_str'=> $this->createNoncestr(),//随机字符串
      'out_trade_no'=>$this->outTradeNo,//商户订单编号
      'total_fee'=>floatval($this->totalFee), //总金额
      'open_id'=>$this->openid,//用户openid
      'trade_type'=>$this->TRADETYPE,//交易类型
      'body' =>$this->BODY, //商品信息
    );
    $parameters['sign'] = $this->getSign($parameters);
    $xmlData = $this->arrayToXml($parameters);
    $xml_result = $this->postXmlCurl($xmlData,'https://api.mch.weixin.qq.com/pay/unifiedorder',60);
    $result = $this->xmlToArray($xml_result);
    return $result;
  }
  //数组转字符串方法
  protected function arrayToXml($arr){
    $xml = "<xml>";
    foreach ($arr as $key=>$val)
    {
      if (is_numeric($val)){
        $xml.="<".$key.">".$val."</".$key.">";
      }else{
         $xml.="<".$key."><![CDATA[".$val."]]></".$key.">";
      }
    }
    $xml.="</xml>";
    return $xml;
  }
  protected function xmlToArray($xml){
    $array_data = json_decode(json_encode(simplexml_load_string($xml, 'SimpleXMLElement', LIBXML_NOCDATA)), true);
    return $array_data;
  }
  //发送xml请求方法
  private static function postXmlCurl($xml, $url, $second = 30)
  {
    $ch = curl_init();
    //设置超时
    curl_setopt($ch, CURLOPT_TIMEOUT, $second);
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE); //严格校验
    //设置header
    curl_setopt($ch, CURLOPT_HEADER, FALSE);
    //要求结果为字符串且输出到屏幕上
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
    //post提交方式
    curl_setopt($ch, CURLOPT_POST, TRUE);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $xml);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 20);
    curl_setopt($ch, CURLOPT_TIMEOUT, 40);
    set_time_limit(0);
    //运行curl
    $data = curl_exec($ch);
    //返回结果
    if ($data) {
      curl_close($ch);
      return $data;
    } else {
      $error = curl_errno($ch);
      curl_close($ch);
      throw new WxPayException("curl出错,错误码:$error");
    }
  }
  /*
   * 对要发送到微信统一下单接口的数据进行签名
   */
  protected function getSign($Obj){
     foreach ($Obj as $k => $v){
     $Parameters[$k] = $v;
     }
     //签名步骤一:按字典序排序参数
     ksort($Parameters);
     $String = $this->formatBizQueryParaMap($Parameters, false);
     //签名步骤二:在string后加入KEY
     $String = $String."&key=".$this->KEY;
     //签名步骤三:MD5加密
     $String = md5($String);
     //签名步骤四:所有字符转为大写
     $result_ = strtoupper($String);
     return $result_;
   }
  /*
   *排序并格式化参数方法,签名时需要使用
   */
  protected function formatBizQueryParaMap($paraMap, $urlencode)
  {
    $buff = "";
    ksort($paraMap);
    foreach ($paraMap as $k => $v)
    {
      if($urlencode)
      {
        $v = urlencode($v);
      }
      //$buff .= strtolower($k) . "=" . $v . "&";
      $buff .= $k . "=" . $v . "&";
    }
    $reqPar;
    if (strlen($buff) > 0)
    {
      $reqPar = substr($buff, 0, strlen($buff)-1);
    }
    return $reqPar;
  }
  /*
   * 生成随机字符串方法
   */
  protected function createNoncestr($length = 32 ){
     $chars = "abcdefghijklmnopqrstuvwxyz0123456789";
     $str ="";
     for ( $i = 0; $i < $length; $i++ ) {
     $str.= substr($chars, mt_rand(0, strlen($chars)-1), 1);
     }
     return $str;
     }
}

以上就是微信支付的相关流程。在理清思路后,流程还是比较清晰和简单的。重点在于需要注意一些细节问题,例如数据格式,加密方法等。

下面说一下微信小程序退款的具体实现

二.退款

小程序退款的流程和付款相似,但有一些细节上的不同。

首先退款的步骤通常如下:

  • 用户前端点击退款按钮后,后端接收到用户的退款请求通过商城后台呈现给商户,商户确定允许退款后,后端再发起向微信退款接口的请求来请求退款。
  • 后端向微信退款接口发送请求后,得到响应信息,确定退款是否完成,根据退款是否完成再去进行改变订单状态等业务逻辑。

退款的步骤相对微信支付来说比较简单。

值得注意的有以下两点:

1.向微信退款接口请求退款后,根据得到的响应是可以直接确定退款是否完成的。不再需要设置专门的回调接口等待微信通知。当然如果需要也是可以在微信商户平台设置回调接口接受从而接受微信回调的,但并不是必须的。

2.退款请求需要在请求服务器安装微信提供的安全证书,也就是说,发起退款请求相比较支付请求在请求时请求方法不能复用,因为微信退款需要携带证书的请求,此证书可在申请微信商户号成功后从微信商户平台自行下载,Linux下的PHP开发环境的证书只需要放在网站根目录的cert文件夹中即可。其他开发环境可能需要导入操作。

下面讲解一下退款的具体步骤

一. 用户发起退款请求

    用户在前端发起退款请求,后端接收到退款请求,将相应订单标记为申请退款,展示在后台.商户查看后,如果同意退款再进行相应操作.此后才进入真正的退款流程.

二. 商户发起退款请求

    商户同意退款后,后端即向微信提供的退款 API 发起请求.

    同请求微信支付API一样.退款请求也需要将需要的参数进行签名后以XML发送到微信的退款API [https://api.mch.weixin.qq.com/pay/refund](https://api.mch.weixin.qq.com/pay/refund)
退款请求需要的参数如下(多个参数在支付API请求时也有使用):

  • 小程序 appid。
  • 商户号 mch_id 。申请开通微信支付商户认证成功后微信发给你的邮件里有
  • 商户订单号 out_trade_no 。退款订单在支付时生成的订单号
  • 退款订单号 out_refund_no 。由后端生成的退款单号,需要保证唯一,因为多个同样的退款单号只会退款一次。
  • 总金额 total_fee 。订单总金额,单位为分。
  • 退款金额 refund_fee 需要退款的金额,单位同样为分
  • 操作员 op_user_id .与商户号相同即可
  • 随机字符串 nonce_str 。同支付请求
  • 签名 sign 。使用上面的所有参数进行相应处理加密生成签名。(具体处理方式与支付相同,可直接复用。)

三. 退款完成

    在发起退款请求后,就可以直接根据请求的响应XML中的  result_code字段来判断退款是否成功,从而对订单状态进行处理和后续操作。不需要像支付那样等待另一个接口的通知来确定请求状态。当然如上文所说,如果需要微信服务器发送通知到后端的话,可以到微信商户平台进行设置。

退款因为流程与支付大同小异,因此退款的PHP类我选择了直接继承支付类,

代码如下,注意区分退款请求方法postXmlSSLCurl和支付请求方法postXmlCurl的区别,这也就是上文提到的退款需要的双向证书的使用。

````
 class WinXinRefund extends WeiXinPay{
  protected \$SSLCERT_PATH = 'cert/apiclient_cert.pem';//证书路径
  protected \$SSLKEY_PATH = 'cert/apiclient_key.pem';//证书路径
  protected \$opUserId = '1234567899';//商户号
function __construct($openid,$outTradeNo,$totalFee,$outRefundNo,$refundFee){
  //初始化退款类需要的变量
  $this->openid = $openid;
  $this->outTradeNo = $outTradeNo;
  $this->totalFee = $totalFee;
  $this->outRefundNo = $outRefundNo;
  $this->refundFee = $refundFee;
} 
public function refund(){
  //对外暴露的退款接口
  $result = $this->wxrefundapi();
  return $result;
}
private function wxrefundapi(){
  //通过微信api进行退款流程
  $parma = array(
    'appid'=> $this->APPID,
    'mch_id'=> $this->MCHID,
    'nonce_str'=> $this->createNoncestr(),
    'out_refund_no'=> $this->outRefundNo,
    'out_trade_no'=> $this->outTradeNo,
    'total_fee'=> $this->totalFee,
    'refund_fee'=> $this->refundFee,
    'op_user_id' => $this->opUserId,
  );
  $parma['sign'] = $this->getSign($parma);
  $xmldata = $this->arrayToXml($parma);
  $xmlresult = $this->postXmlSSLCurl($xmldata,'https://api.mch.weixin.qq.com/secapi/pay/refund');
  $result = $this->xmlToArray($xmlresult);
  return $result;
}
//需要使用证书的请求
function postXmlSSLCurl($xml,$url,$second=30)
{
  $ch = curl_init();
  //超时时间
  curl_setopt($ch,CURLOPT_TIMEOUT,$second);
  //这里设置代理,如果有的话
  //curl_setopt($ch,CURLOPT_PROXY, '8.8.8.8');
  //curl_setopt($ch,CURLOPT_PROXYPORT, 8080);
  curl_setopt($ch,CURLOPT_URL, $url);
  curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,FALSE);
  curl_setopt($ch,CURLOPT_SSL_VERIFYHOST,FALSE);
  //设置header
  curl_setopt($ch,CURLOPT_HEADER,FALSE);
  //要求结果为字符串且输出到屏幕上
  curl_setopt($ch,CURLOPT_RETURNTRANSFER,TRUE);
  //设置证书
  //使用证书:cert 与 key 分别属于两个.pem文件
  //默认格式为PEM,可以注释
  curl_setopt($ch,CURLOPT_SSLCERTTYPE,'PEM');
  curl_setopt($ch,CURLOPT_SSLCERT, $this->SSLCERT_PATH);
  //默认格式为PEM,可以注释
  curl_setopt($ch,CURLOPT_SSLKEYTYPE,'PEM');
  curl_setopt($ch,CURLOPT_SSLKEY, $this->SSLKEY_PATH);
  //post提交方式
  curl_setopt($ch,CURLOPT_POST, true);
  curl_setopt($ch,CURLOPT_POSTFIELDS,$xml);
  $data = curl_exec($ch);
  //返回结果
  if($data){
    curl_close($ch);
    return $data;
  }
  else {
    $error = curl_errno($ch);
    echo "curl出错,错误码:$error"."<br>";
    curl_close($ch);
    return false;
  }
}}

三. 总结

以上就是关于微信支付和退款的流程及相关知识的介绍。文中的 PHP类 均封装直接可用。

因为微信支付和退款涉及的东西较为繁杂,很多人直接看官方文档可能会一头雾水,所以看过此文了解流程和要点后,再去看微信官方文档。一方面可以更清晰的了解小程序的支付和退款流程。另一方面,本文因为篇幅有限及作者能力有限,肯定有无暇顾及或有所纰漏之处。为求稳妥,还是需要多看看官方开发文档。毕竟事涉支付,出个BUG可不是小事。
最后扯点闲话吧。这篇博客本来应该在三个月前就发表的,也算当时我从一无所知到独立完成微信小程序商城前后端的总结系列的第一篇。但是公司突然出现人员和项目的变动,导致管理和项目上都混乱不堪,再加上个人的惰性,导致此篇博客一直拖到三个月后的今天才断断续续写完。这三个月我的心态因为各种事起起伏伏,也颇有一番风味。

以上所述是小编给大家介绍的微信小程序支付及退款流程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Opacity.js
Jan 22 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
js实现select跳转功能代码
Oct 22 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 07 Javascript
windows下更新npm和node的方法
Nov 30 #Javascript
实例教学如何写vue插件
Nov 30 #Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 #Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 #Javascript
vue的状态管理模式vuex
Nov 30 #Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 #Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 #Javascript
You might like
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
PHP实现的json类实例
2015/07/28 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
基于jQuery的图片剪切插件
2011/08/03 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
Python中列表的一些基本操作知识汇总
2015/05/20 Python
Python实现的最近最少使用算法
2015/07/10 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
美国性感内衣店:Yandy
2018/06/12 全球购物
市场开发与营销专业求职信
2013/12/31 职场文书
高三高考决心书
2014/03/11 职场文书
委托书怎样写
2014/08/30 职场文书
工作检讨书大全
2015/01/26 职场文书
甲午风云观后感
2015/06/02 职场文书
追悼会答谢词范文
2015/09/29 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
python四种出行路线规划的实现
2021/06/23 Python
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers