小程序接入微信支付的流程

简介: 近日开发一个顺风小巴的小程序,开发还是比较简单的,只是有些语法真是反人类,主要难点是微信支付,其他的调调接口渲染一下数据就ok了,下面就详细说一下整个流程及中间遇到的坑。

近日开发一个顺风小巴的小程序,开发还是比较简单的,只是有些语法真是反人类,主要难点是微信支付,其他的调调接口渲染一下数据就ok了,下面就详细说一下整个流程及中间遇到的坑。

1、准备工作

a、小程序账号申请

像申请公众号一样,要求企业资质,另外交给企鹅300块钱。

b、微信支付商家平台申请

申请支付功能必不可少的部分,期间踩了一个坑,老板为了节省三百块钱,用一个老的商户平台id绑定到小程序上,结果调试的时候一直报错,提示appid与商家MCHID不匹配,然后小程序无法解绑商户号,只能重新申请小程序和商户号。既耽误了时间又多花了钱。

c、下载商家证书

在商家平台上下载证书,解压放到sdk文件存储证书对应位置

d、服务器https验证

小程序要求服务器必须是https的,并且不是所有https都可以,https://www.qcloud.com/product/ssl 这个地址可以进行测试,测试通过即可使用,否则可能出现真机测试无法获取数据的问题。

e、下载jsapi的SDK

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1 SDK文档下载地址
之后修改SDK的配置文件WxPay.Config.php

const APPID = 'wx97fs3234d88desb';
const APPSECRET = 'ef103ba456be043244238f7b721e957';
const MCHID = '1444333112';
const KEY = 'Niskh5WfdsdfsdWYkr8lrddwsHyE78m2sE';

2、开发

a、微信登录

通过code到服务器获取用户openid,然后存储到小程序本地,用以后续与服务器交互

    wx.login({
        success: function (res1) {
        var code = res1.code;
          wx.request({
            url: 'https://服务器/example/login.php',
            method:'GET',
            data: {
              code: code
            },
            success: function (res) {
              var uid = res.data;
              console.log(uid)
              wx.setStorage({
                key: "uid",
                data: uid
              })
              console.log('同步保存成功')
            }
          }),
            wx.getUserInfo({
              success: function (res) {
              console.log(res.data)
                that.globalData.userInfo = res.userInfo
                typeof cb == "function" && cb(that.globalData.userInfo)
              }
            })
        }
      })

b、获取列表
  wx.request({
      url: 'https://接口地址',
      method: 'GET',
      success: function (res) {
        var noStartList = res.data.noStartList;
        that.setData({
          noStartList: noStartList,
          hiddenLoading: !that.data.hiddenLoading
        });
      }
    })

c、微信支付

小程序端先调用服务器,让服务器创建订单,然后服务器去请求微信支付服务后台生成预支付交易单,返回正确的预支付交易后由小程序端调起支付。

      wx.request({
          url: 'https://调用服务器获取微信统一下单数据',
          method: 'GET',
          data: { uid: uid, id: id },
          success: function (res) {
            var nowTime = new Date()
            var appId = res.data.appid
            var timeStamp1 = Math.round((nowTime.getTime()) / 1000)
            var timeStamp = timeStamp1.toString()
            var nonceStr = res.data.nonce_str
            var package = "prepay_id=" + res.data.prepay_id
            var signType = "MD5"
            var key = "Niskh5234234WYk4323HyE78m2sE"//商户平台的key
            var sign = res.data.sign
            var paySign = md5.hexMD5("appId=" + appId + "&nonceStr=" + nonceStr + "&package=" + package + "&signType=MD5&timeStamp=" + timeStamp + "&key=" + key)
            wx.requestPayment({
              timeStamp: timeStamp,
              //随机字符串,长度为32个字符以下。
              nonceStr: nonceStr,
              //统一下单接口返回的 prepay_id 参数值,提交格式如:prepay_id=*
              package: package,
              //签名算法,暂支持 MD5
              signType: 'MD5',
              paySign: paySign,
              success: function (res) {
              },
              fail: function (res) {
              },
              complete: function (res) {
              }
            })
          }
        })

服务器端逻辑

//①、获取传递参数

//②、生成订单

//3、统一向微信端下单
$input = new WxPayUnifiedOrder();
$input->SetBody("顺风小巴购票");
$input->SetAttach("顺风小巴购票");
$input->SetOut_trade_no($data['oId']);
$input->SetTotal_fee($data['price']*100);
$input->SetTime_start(date("YmdHis"));
$input->SetTime_expire(date("YmdHis", time() + 600));
$input->SetNotify_url("http://服务器/notify.php");
$input->SetTrade_type("JSAPI");
$input->SetOpenid($openId);
$order = WxPayApi::unifiedOrder($input);
header("Content-Type: application/json");
echo json_encode($order);
exit;

这时候还需要在服务器端完善回调函数notify.php

//重写回调处理函数
public function NotifyProcess($data, &$msg)
{
    Log::DEBUG("call back:" . json_encode($data));
    $notfiyOutput = array();

    if(!array_key_exists("transaction_id", $data)){
        $msg = "输入参数不正确";
        return false;
    }
    //查询订单,判断订单真实性
    if(!$this->Queryorder($data["transaction_id"])){
        $msg = "订单查询失败";
        return false;
    }
            //根据 $data["out_trade_no"] 订单号 更新订单状态
            //更新订单状态逻辑代码
    return true;
}

整个支付过程就完成了,尤其注意的就是支付需要的参数及参数加密顺序,其他的调试一下基本就ok了。

相关文章
|
13天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
39 3
|
24天前
|
移动开发 小程序 前端开发
|
1月前
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。
|
30天前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
1月前
|
小程序 前端开发 持续交付
小程序全栈开发中的CI/CD流程与自动化部署是一种高效的开发模式。
本文探讨小程序全栈开发中的CI/CD流程与自动化部署,介绍持续集成与部署的概念,包括自动化构建、测试、代码审查及部署实践。通过提高代码质量、迭代速度及团队协作效率,确保小程序稳定运行与良好用户体验。
50 2
|
1月前
|
小程序 开发者
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
这篇文章介绍了微信小程序的初始化过程,包括如何注册微信小程序账号、下载微信小程序开发者平台,并指导了新建小程序的详细步骤。
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
|
1月前
|
小程序 前端开发 JavaScript
微信小程序实现微信支付(代码和注释很详细)
微信小程序实现微信支付(代码和注释很详细)
|
2月前
|
小程序
尝试使用阿里云服务器搭建微信小程序
华北电力大学核工程大一学生,出于对编程的热爱与大创项目需求,涉足微信小程序搭建。初期在实验指导下克服不熟悉编程的困难,但后期发现教程引导不足,尤其是对于代码定位缺乏清晰指引。建议加强网页图像指导,以适应不同编程水平用户,尤其是新手。
尝试使用阿里云服务器搭建微信小程序
|
1月前
|
前端开发 JavaScript API
微信公众号项目,实现微信支付(具体流程和参数)
微信公众号项目,实现微信支付(具体流程和参数)
|
1月前
|
小程序
uni-app——微信小程序设置全局分享
uni-app——微信小程序设置全局分享
48 0