当前位置:   article > 正文

微信小程序接入支付功能并实现支付_微信小程序支付功能实现

微信小程序支付功能实现

微信支付是微信公众平台提供的一种在线支付服务,可以为用户提供快速、方便、安全的支付体验。而在微信小程序中实现微信支付,则可以为应用程序提供更多的功能和服务,提高用户体验和商业价值。因此,在本文中,我们将介绍如何在微信小程序中实现微信支付。 

用户在选购下单后,会传递给后端一个订单数据,后端根据信息插入到订单表和订单详情表里,微信平台从后端获取订单数据,会生成预交易支付单,返回后端预支付交易标识,传回前端,前端调用支付接口,开始支付,支付完成后返回结果给后端,判断支付是够成功,库存是否足够 决定用户是否下单成功,若未成功设置30分钟的有效期。成功支付后交于仓库进行分拣发货处理。

第一步,微信小程序管理后台 -> 微信支付->接入微信支付 及关联(设置)商户信息

如果是第一次接入, 直接申请接入,然后选择弹出窗口的"我还没有商户号"选项接入即可

接入商户,过程比较简单,随着指引一步一步走即可. 做完引导后所需的工作后,你需要确认做下面的两步,因为在后面的code时需要:

      1.设置支付授权目录:  依次找到  商户平台->产品中心->开发配置,然后点击下面的添加进行添加支付目录

     个人感觉类似微信小程序开发添加的request合法域名, 上面添加的这个目录,应该和你在后期在程序后台写的最终方法调用名一致,假设这里你设置的是  https://abc.cn/mypay/payOP

    2. 设置API密钥:  依次找到  商户平台->账号中心->API安全->设置APIv2密钥 设置后,可以把密钥拷贝出来记住,下面的code部分也需要该信息

第二步:开发小程序的支付页面,此处只简单介绍页面,重点介绍js部分

在微信小程序中,可以通过 wx.requestOrderPayment() 方法来调起微信支付模块,进行支付流程。需要注意的是,在调用支付模块之前,需要先引入支付模块,并进行相应的设置和参数传递。 

wx.requestOrderPayment(Object args)

仅接入了交易组件、小程序支付管理服务的小程序需要使用,普通小程序可直接使用 wx.requestPayment。

     1.配置页面信息, 假设页面只有一个输入金额的输入框,加一个按钮,那么在点击按钮后,执行js的操作部分如:

  1. formSubmit:function(e){
  2. let pp = e.detail.value;
  3. if(pp.money.trim()=="")
  4. {
  5. wx.showToast({
  6. title: "请输入捐赠金额!", //显示文本
  7. icon: 'none', //使用图标
  8. duration: 1000 //显示时间
  9. })
  10. return false;
  11. }
  12. // 注意,下面的reqest代码部分,that.data.userInfo.wid存储的就是当前用户的openid,这个信息一般会在用户登录后进行了存储,如果你没有存储,可以通过wx.login去获取,此处不再赘述
  13. let that = this;
  14. wx. request({
  15. url:'刚刚在上面设置的安全支付目录地址',
  16. header: {
  17. 'content-type': 'application/json' // 默认值
  18. },
  19. method: 'POST',
  20. data: {
  21. // 需要传递给服务端的参数,比如订单ID、金额、用户等
  22. id:that.data.userInfo.wid,
  23. money:pp.money
  24. },
  25. success: function (ress){
  26. // success
  27. // 假设服务端返回的数据中包含了支付所需的参数
  28. let res = ress.data;
  29. if (res.status){
  30. let out_trade_no = res.out_trade_no;//记录商户订单号 ,为后续缴费成功回调做记录
  31. // 调用wx.requestOrderPayment发起微信支付
  32. wx.requestOrderPayment ({
  33. 'timeStamp': res.timeStamp,
  34. 'nonceStr': res.nonceStr,
  35. 'package': res.package,
  36. 'signType': 'MD5',
  37. 'paySign': res.paySign,
  38. 'success': function(res3){
  39. wx.showToast({
  40. title: "支付成功,感谢您的善心!",
  41. icon: 'success', //使用图标
  42. duration: 1000 //显示时间
  43. })
  44. //此处负责回调,把先前的订单状态值为已付款
  45. },
  46. 'fail':function (res2){
  47. console.log (res2);
  48. }
  49. })
  50. }
  51. },
  52. fail: function () {
  53. // 调用服务端接口失败的处理
  54. } ,
  55. complete: function () {
  56. // 处理结束
  57. }
  58. })
  59. },

在这个示例中,首先通过 wx.request 调用服务端的接口  获取支付参数(如 timeStampnonceStrpackagesignType 和 paySign)。然后,使用这些参数调用 wx.requestOrderPayment 发起微信支付。成功发起支付后,可以在 success 回调中处理支付成功的逻辑,在 fail 回调中处理支付失败的逻辑。 

需要注意的是,在处理支付结果时,应该清晰地告知用户支付结果和原因,并提供相应的解决方案或退款流程,以增加用户信任度和满意度。

第三步: 服务器后台代码部分,这里以php为例进行讲解,其它语言可以适当翻译改动

  1. //支付调用的主函数, 名称需要和设置的商户支付授权目录一致
  2. public function payOP(){
  3. //获取opid和fee
  4. $wid= $this->uri->segment(3,0); //获取小程序传过来的openid
  5. $fee = $this->uri->segment(4,0);//获取小程序传过来的捐款
  6. //设置参数
  7. $appid = 'xxxxx';//小程序的appid ,如果是公众号 就是公众号的appid
  8. $body = '本次支付的介绍,文字信息随便写';
  9. $mch_id = '商户平台登录账号';
  10. $nonce_str = $this->nonce_str();//随机字符串,下面会提供函数
  11. $notify_url = '微信支付回调函数,说实话这个没啥用,不设应该不行,你就设置成你的reqest域名吧';
  12. $openid = $wid;//当前支付用户的openid
  13. $out_trade_no = date('YmdHis_', time()).ceil(microtime()*1000);//商户订单号,需唯一
  14. $spbill_create_ip = '114.114.114.114';//随便一个真实存在的ip,必须要设置
  15. $total_fee = $fee*100;//因为充值金额最小是1 而且单位为分 如果是充值1元所以这里需要*100
  16. $trade_type = 'JSAPI';//交易类型 默认
  17. //这里是按照顺序的 因为下面的签名是按照顺序 排序错误 肯定出错
  18. $post['appid'] = $appid;
  19. $post['body'] = $body;
  20. $post['mch_id'] = $mch_id;
  21. $post['nonce_str'] = $nonce_str;//随机字符串
  22. $post['notify_url'] = $notify_url;
  23. $post['openid'] = $openid;
  24. $post['out_trade_no'] = $out_trade_no;
  25. $post['spbill_create_ip'] = $spbill_create_ip;//终端的ip
  26. $post['total_fee'] = $total_fee;//总金额 最低为一块钱 必须是整数
  27. $post['trade_type'] = $trade_type;
  28. $sign = $this->sign($post);//签名
  29. $post_xml = '<xml>
  30. <appid>'.$appid.'</appid>
  31. <body>'.$body.'</body>
  32. <mch_id>'.$mch_id.'</mch_id>
  33. <nonce_str>'.$nonce_str.'</nonce_str>
  34. <notify_url>'.$notify_url.'</notify_url>
  35. <openid>'.$openid.'</openid>
  36. <out_trade_no>'.$out_trade_no.'</out_trade_no>
  37. <spbill_create_ip>'.$spbill_create_ip.'</spbill_create_ip>
  38. <total_fee>'.$total_fee.'</total_fee>
  39. <trade_type>'.$trade_type.'</trade_type>
  40. <sign>'.$sign.'</sign>
  41. </xml> ';
  42. //统一接口prepay_id
  43. $url = 'https://api.mch.weixin.qq.com/pay/unifiedorder';
  44. $xml = $this->http_request($url,$post_xml);
  45. $array = $this->xml($xml);//全要大写
  46. if($array['RETURN_CODE'] == 'SUCCESS' && $array['RESULT_CODE'] == 'SUCCESS'){
  47. $time = time();
  48. $tmp='';//临时数组用于签名
  49. $tmp['appId'] = $appid;
  50. $tmp['nonceStr'] = $nonce_str;
  51. $tmp['package'] = 'prepay_id='.$array['PREPAY_ID'];
  52. $tmp['signType'] = 'MD5';
  53. $tmp['timeStamp'] = "$time";
  54. $data['status'] = true;
  55. $data['timeStamp'] = "$time";//时间戳
  56. $data['nonceStr'] = $nonce_str;//随机字符串
  57. $data['signType'] = 'MD5';//签名算法,暂支持 MD5
  58. $data['package'] = 'prepay_id='.$array['PREPAY_ID'];//统一下单接口返回的 prepay_id 参数值,提交格式如:prepay_id=*
  59. $data['paySign'] = $this->sign($tmp);//签名,具体签名方案参见微信公众号支付帮助文档;
  60. $data['out_trade_no'] = $out_trade_no;
  61. echo json_encode($data);
  62. }else{
  63. $data['status'] = false;
  64. $data['text'] = "错误";
  65. $data['RETURN_CODE'] = $array['RETURN_CODE'];
  66. $data['RETURN_MSG'] = $array['RETURN_MSG'];
  67. echo json_encode($data);
  68. }
  69. }
  70. 下面是一些上述代码需要调用的函数
  71. //随机32位字符串
  72. private function nonce_str(){
  73. $result = '';
  74. $str = 'QWERTYUIOPASDFGHJKLZXVBNMqwertyuioplkjhgfdsamnbvcxz';
  75. for ($i=0;$i<32;$i++){
  76. $result .= $str[rand(0,48)];
  77. }
  78. return $result;
  79. }
  80. //签名 $data要先排好顺序
  81. private function sign($data){
  82. $stringA = '';
  83. foreach ($data as $key=>$value){
  84. if(!$value) continue;
  85. if($stringA) $stringA .= '&'.$key."=".$value;
  86. else $stringA = $key."=".$value;
  87. }
  88. $wx_key = '***************';//这里就是我上面讲解的设置了API的那个密钥 !!!
  89. $stringSignTemp = $stringA.'&key='.$wx_key;
  90. return strtoupper(md5($stringSignTemp));
  91. }
  92. private function xml($xml)
  93. {
  94. $p = xml_parser_create();
  95. xml_parse_into_struct($p, $xml, $vals, $index);
  96. xml_parser_free($p);
  97. $data = "";
  98. foreach ($index as $key=>$value) {
  99. if($key == 'xml' || $key == 'XML') continue;
  100. $tag = $vals[$value[0]]['tag'];
  101. $value = $vals[$value[0]]['value'];
  102. $data[$tag] = $value;
  103. }
  104. return $data;
  105. }
  106. private function http_request($url,$data = null,$headers=array())
  107. {
  108. $curl = curl_init();
  109. if( count($headers) >= 1 ){
  110. curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
  111. }
  112. curl_setopt($curl, CURLOPT_URL, $url);
  113. curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
  114. curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
  115. if (!empty($data)){
  116. curl_setopt($curl, CURLOPT_POST, 1);
  117. curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
  118. }
  119. curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
  120. $output = curl_exec($curl);
  121. curl_close($curl);
  122. return $output;
  123. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/538527
推荐阅读
相关标签
  

闽ICP备14008679号