iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序支付功能完整流程记录(前端)
  • 820
分享到

微信小程序支付功能完整流程记录(前端)

摘要

目录一,注册微信支付商户号(由上级或法人注册)二,注册小程序账号(由上级或者领导注册)三,登录商户号绑定小程序四,后端工程师书写接口五,前端工程师调用接口1. 获取openid(当前

微信小程序中,常见付款给商家的场景,下面列出企业小程序中,从0起步完整微信支付流程。

一,注册微信支付商户号(由上级或法人注册)

接入微信支付 - 微信商户平台

此商户号,需要由主管及更上级领导进行注册,会成为公司收款账户(不是由前端程序员注册!!!不是由前端程序员注册!!!不是由前端程序员注册!!!)

注册非常简单,重点是需要提供企业资料,一般程序员没有权限获取这些材料,所以需要由上级注册

企业注册需要材料:营业执照对公银行账户信息法人身份证

二,注册小程序账号(由上级或者领导注册)

注册流程简单,企业一般注册为企业小程序,非个人,需要上传营业执照等。

小程序

三,登录商户号绑定小程序

登录之前注册好的商户账号,将当前小程序ID绑定至此商户,表明此小程序可以调用此商户支付相关接口。

微信支付 - 中国领先的第三方支付平台 | 微信支付提供安全快捷的支付方式

四,后端工程师书写接口

返回核心数据如下:

"appId": "xxxx",
        "nonceStr": "xxxx",
        "packageValue": "prepay_id=xxxxx",
        "paySign": "xxxxxx",
        "signType": "MD5",
        "timeStamp": "xxxxxx"

这个接口是你们公司后端程序员自己写的接口,由后端工程师书写,JAVA,PHPc++node.net等...不是前端写!不是前端写!不是前端写!如果没有此接口就与后端工程师沟通,让他书写。

五,前端工程师调用接口

1. 获取openid(当前用户真实id)

openid为当前用户真实id,无法直接用任何接口获得,需要先调用微信login接口登录,获取登录凭证code,在通过此code(登录凭证,5分钟有效),向微信服务器换取用户openid。

原生小程序登录:

wx.login({
  success (res) {
    if (res.code) {
     // code: 用户登录凭证(有效期五分钟)
     // 使用 code 可以换取 openid、uNIOnid、session_key 等核心信息
    } else {
      console.log('登录失败!' + res.errMsg)
    }
  }
})

uniapp登录:

uni.login({
  provider: 'weixin',
  success (res) {
    if (res.code) {
     //code: 用户登录凭证(有效期五分钟)
     //使用 code 可以换取 openid、unionid、session_key 等核心信息
    } else {
      console.log('登录失败!' + res.errMsg)
    }
  }
})

发送请求调用微信官方接口,用code凭证换取用户openid(真实用户id)

原生小程序:wx.request     uniapp: uni.request, 流程无差别

uni.request({
  url: `https://api.weixin.qq.com/sns/jscode2session`, //微信官方接口
  data: {
    appid: '小程序appId',
    secret: '小程序密钥,在小程序appId下一行,放一块在',
    js_code: '刚才获取的code', 
    grant_type: 'authorization_code' //固定值
  },
  success: (res) => {
    //获取openid:用户真实唯一id
    console.log(res.data.openid);
  }
})

2. 调用公司后端接口,获取支付核心数据

// 调用后端接口
uni.request({
  url: '你们公司的后端接口地址,获取支付核心数据',
  method: 'POST',
  data: { 接口需要什么参数就传给接口,包含扣款金额,订单id等 },
  success(obj) {
    console.log(obj)
  }
})

此接口必须返回以下6个核心数据,都是由后台计算生成。

"appId": "xxxx",
        "nonceStr": "xxxx",
        "packageValue": "prepay_id=xxxxx",
        "paySign": "xxxxxx",
        "signType": "MD5",
        "timeStamp": "xxxxxx"

3. 调用微信官方支付接口,弹出支付界面

uni.request({
  url: '你们公司的后端接口地址,获取支付核心数据',
  method: 'POST',
  data: { 接口需要什么参数就传给接口,包含扣款金额,订单id等 },
  success(obj) {
 
    //调用微信官方支付接口弹出付款界面,输入密码扣款
    wx.requestPayment({
      timeStamp: obj.xxxx.timeStamp,  //后端返回的时间戳
      nonceStr:  obj.xxxx.nonceStr,   //后端返回的随机字符串
      package:  obj.xxxx.packageValue, //后端返回的prepay_id
      signType: 'MD5', //后端签名算法,根据后端来,后端MD5这里即为MD5
      paySign:  obj.xxxx.paySign,  //后端返回的签名
      success (res) {
        console.log('用户支付扣款成功', res)
      },
      fail (res) { 
        console.log('用户支付扣款失败', res)
      }
     })
 
  }
})

调用后,弹出付款界面,模拟器需要扫码支付。

点击真机调试会直接弹出微信付款界面。

六,总结

  • 前端调用uni.login/wx.login调用微信接口,获取code,code相当于临时身份证
  • 前端调公司后台获取openid的接口,获取openid
  • 前端调公司后台预支付接口,传递openid、商品id、商品单价、商品数量,获取那5个参数。【时间戳timeStamp,随机字符串nonceStr,预支付id package,签名算法signType,签名paySign】
  • 前端调用uni/wx.requestPayment调用微信支付方法,传递5个参数,获取支付结果(成功或失败)

到此这篇关于微信小程序支付功能完整流程的文章就介绍到这了,更多相关微信小程序支付流程内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 微信小程序支付功能完整流程记录(前端)

本文链接: https://www.lsjlt.com/news/196694.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序支付功能完整流程记录(前端)
    目录一,注册微信支付商户号(由上级或法人注册)二,注册小程序账号(由上级或者领导注册)三,登录商户号绑定小程序四,后端工程师书写接口五,前端工程师调用接口1. 获取openid(当前...
    99+
    2023-02-18
    微信小程序支付流程前端 微信小程序的支付流程 微信小程序支付功能怎么实现
  • 微信小程序支付完整流程(前端)
     微信小程序中,常见付款给商家的场景,下面列出企业小程序中,从0起步完整微信支付流程。 一,注册微信支付商户号(由上级或法人注册)    接入微信支付 - 微信商户平台 此商户号,需要由主管及更上级领导进行注册,会成为公司收款账户(...
    99+
    2023-08-31
    微信小程序 小程序
  • 微信小程序支付完整流程
    1、注册微信支付商户号(由上级或法人注册) 注册链接:https://pay.weixin.qq.com/index.php/apply/applyment_home/guide_normal 此商户...
    99+
    2023-09-21
    微信小程序 小程序 javascript
  • 微信小程序支付流程(前端)
    微信小程序的支付只要用到官方的支付API : wx.requestPayment(Object object) 官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/paym...
    99+
    2023-08-19
    微信小程序 前端 小程序 微信 javascript
  • 微信小程序调用支付接口的完整流程记录
    目录当然在开发之前,我们需要有下面这些东西:步骤如下:总结官方的文档路径------》文档路径:developers.weixin.qq.com/miniprogram&hellip...
    99+
    2024-04-02
  • springboot对接微信支付的完整流程(附前后端代码)
    展示图:   对接的完整流程如下 首先是配置 gzh.appid=公众号appid wxPay.mchId=商户号 wxPay.key=支付密钥 wxPay.noti...
    99+
    2024-04-02
  • 微信小程序如何开发微信支付功能
    本篇内容主要讲解“微信小程序如何开发微信支付功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序如何开发微信支付功能”吧!用户请求开发者后台,发起下单请求发起请求前在小程序端调用&nbs...
    99+
    2023-06-26
  • 小程序微信支付
    微信小程序实现支付功能 1. 准备工作 在开始实现微信小程序支付功能之前,我们需要先完成以下准备工作: 注册微信支付商户号,并完成商户资质审核;微信支付开发文档;在小程序中引入微信支付JSAPI;获取...
    99+
    2023-09-04
    小程序 微信 微信小程序
  • 微信小程序支付功能如何开通
    要开通微信小程序支付功能,您需要完成以下步骤:1. 注册微信支付商户账号:访问微信支付官方网站(pay.weixin.qq.com)...
    99+
    2023-08-16
    微信小程序
  • 微信小程序支付功能怎么实现
    实现微信小程序支付功能,需要以下步骤:1. 首先,在微信公众平台申请开通支付功能,并获取到支付相关的配置信息,包括 appID、商户...
    99+
    2023-08-16
    微信小程序
  • 微信小程序支付功能如何实现
    这篇文章主要介绍了微信小程序支付功能如何实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序支付功能如何实现文章都会有所收获,下面我们一起来看看吧。微信小程序支付功能开发文档如下:小程序端,保留大部分的...
    99+
    2023-06-26
  • 微信小程序完整项目实战(前端+后端)
    基于微信小程序的在线商城点单系统 前言:闲来无事,想以后自己开一个小超市或者小吃店,能够支持线上下单,既方便客户也方便自己。系统采用C#语言作为后端实现与小程序的交互,给用来学习或者想自己开个小店的朋友当个参考。 文末获取源码联系 精彩...
    99+
    2023-08-16
    小程序 c# 后端 javascript html
  • java微信小程序支付
    这篇文章将为大家详细讲解有关java微信小程序支付,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Java 微信小程序支付 前言 微信小程序支付是一种方便快捷的支付方式,它允许用户在微信小程序中直接进行支付...
    99+
    2024-04-02
  • 微信小程序支付java
    这篇文章将为大家详细讲解有关微信小程序支付java,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。微信小程序支付 Java 实现 微信小程序支付提供了便捷的支付机制,使开发者能够轻松地在其小程序中集成支付功...
    99+
    2024-04-02
  • 【微信支付】java-微信小程序支付-V3接口
    一、对接前准备 最开始需要在微信支付的官网注册一个商户; 在管理页面中申请关联小程序,通过小程序的 appid 进行关联;商户号和appid之间是多对多的关系 进入微信公众平台,功能-微信支付中确认关联 具体流程请浏览官方文档:接入前准备-...
    99+
    2023-10-27
    微信 微信小程序 小程序
  • 小程序通过小程序云实现微信支付功能实例
    目录一、开通微信支付 1.1 关联商户号1.2 添加商户号1.3 管理员授权二、云函数开发2.1 新建云函数2.2 云函数代码2.3 云函数上传并部署三、小程序调用3.1 ...
    99+
    2024-04-02
  • springboot整合IJPay实现微信支付-V3---微信小程序
    前言 微信支付适用于许多场合,如小程序、网页支付、但微信支付相对于其他支付方式略显麻烦,我们使用IJpay框架进行整合 一、IJpay是什么? JPay 让支付触手可及,封装了微信支付、支...
    99+
    2023-09-23
    微信小程序 微信 小程序 spring Powered by 金山文档
  • 小程序发起微信支付功能怎么实现
    这篇文章主要讲解了“小程序发起微信支付功能怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“小程序发起微信支付功能怎么实现”吧!wx.requestPayment(OBJECT)发起微信...
    99+
    2023-06-26
  • 微信支付V3 小程序支付API Java版
    本文目的:快速接通微信支付V3 无需关注细节,实现支付功能,修改配置即可调用 文章目录 接入准备微信支付流程整理(小程序版)一、导入微信支付扩展包二、微信支付工具类1.签名工具类2.微信...
    99+
    2023-10-27
    微信 小程序 java
  • Python3 微信支付(小程序支付)V3接口
    起因:         因公司项目需要网上充值功能,从而对接微信支付,目前也只对接了微信支付的小程序支付功能,在网上找到的都是对接微信支付V2版本接口,与我所对接的接口版本不一致,无法使用,特此记录下微信支付完成功能,使用Django完成后...
    99+
    2023-09-12
    微信 小程序 微信小程序
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作