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

微信小程序支付完整流程(前端)

微信小程序小程序 2023-08-31 09:08:30 300人浏览 独家记忆
摘要

 微信小程序中,常见付款给商家的场景,下面列出企业小程序中,从0起步完整微信支付流程。 一,注册微信支付商户号(由上级或法人注册)    接入微信支付 - 微信商户平台 此商户号,需要由主管及更上级领导进行注册,会成为公司收款账户(

 微信小程序中,常见付款给商家的场景,下面列出企业小程序中,从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);  }})

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

// 调用后端接口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个参数,获取支付结果(成功或失败)

来源地址:https://blog.csdn.net/m0_74429971/article/details/127471923

--结束END--

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

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

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

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

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

下载Word文档
猜你喜欢
  • 微信小程序支付完整流程(前端)
     微信小程序中,常见付款给商家的场景,下面列出企业小程序中,从0起步完整微信支付流程。 一,注册微信支付商户号(由上级或法人注册)    接入微信支付 - 微信商户平台 此商户号,需要由主管及更上级领导进行注册,会成为公司收款账户(...
    99+
    2023-08-31
    微信小程序 小程序
  • 微信小程序支付完整流程
    1、注册微信支付商户号(由上级或法人注册) 注册链接:https://pay.weixin.qq.com/index.php/apply/applyment_home/guide_normal 此商户...
    99+
    2023-09-21
    微信小程序 小程序 javascript
  • 微信小程序支付功能完整流程记录(前端)
    目录一,注册微信支付商户号(由上级或法人注册)二,注册小程序账号(由上级或者领导注册)三,登录商户号绑定小程序四,后端工程师书写接口五,前端工程师调用接口1. 获取openid(当前...
    99+
    2023-02-18
    微信小程序支付流程前端 微信小程序的支付流程 微信小程序支付功能怎么实现
  • 微信小程序支付流程(前端)
    微信小程序的支付只要用到官方的支付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
  • 小程序微信支付
    微信小程序实现支付功能 1. 准备工作 在开始实现微信小程序支付功能之前,我们需要先完成以下准备工作: 注册微信支付商户号,并完成商户资质审核;微信支付开发文档;在小程序中引入微信支付JSAPI;获取...
    99+
    2023-09-04
    小程序 微信 微信小程序
  • 微信小程序完整项目实战(前端+后端)
    基于微信小程序的在线商城点单系统 前言:闲来无事,想以后自己开一个小超市或者小吃店,能够支持线上下单,既方便客户也方便自己。系统采用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
    微信 微信小程序 小程序
  • springboot整合IJPay实现微信支付-V3---微信小程序
    前言 微信支付适用于许多场合,如小程序、网页支付、但微信支付相对于其他支付方式略显麻烦,我们使用IJpay框架进行整合 一、IJpay是什么? JPay 让支付触手可及,封装了微信支付、支...
    99+
    2023-09-23
    微信小程序 微信 小程序 spring Powered by 金山文档
  • 微信支付V3 小程序支付API Java版
    本文目的:快速接通微信支付V3 无需关注细节,实现支付功能,修改配置即可调用 文章目录 接入准备微信支付流程整理(小程序版)一、导入微信支付扩展包二、微信支付工具类1.签名工具类2.微信...
    99+
    2023-10-27
    微信 小程序 java
  • Python3 微信支付(小程序支付)V3接口
    起因:         因公司项目需要网上充值功能,从而对接微信支付,目前也只对接了微信支付的小程序支付功能,在网上找到的都是对接微信支付V2版本接口,与我所对接的接口版本不一致,无法使用,特此记录下微信支付完成功能,使用Django完成后...
    99+
    2023-09-12
    微信 小程序 微信小程序
  • 小程序开通微信支付的流程是什么
    这篇文章主要介绍“小程序开通微信支付的流程是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“小程序开通微信支付的流程是什么”文章能帮助大家解决问题。  小程序开通微信支付的流程  最先便是务必要掌...
    99+
    2023-06-26
  • 跳转微信小程序和支付宝小程序
    跳转微信小程序和支付宝小程序 1. 微信小程序 参考链接 获取微信小程序 URL Scheme 1.1 获取小程序连接 这里需要获取长期有效的 Scheme,方式如下: 联系小程序开发者其他渠道 示例 小程序 Scheme : 测试地址,可...
    99+
    2023-08-16
    微信小程序 小程序
  • 微信小程序登陆(全流程-前后端)
    环境要求 注册一个小程序 微信开发者工具 idea(springboot) 目录 项目准备 用户登陆 前端开发,传递code index.wxss index.js 后端编写,调用微信接口,获取openId 现在用户的所有信息都拿不到...
    99+
    2023-08-31
    微信小程序 小程序 微信
  • 微信小程序支付踩坑notify_url(支付回调)
    最近做了微信小程序支付,支付成功之后发现notify_url回调地址竟然没有访问。 检查了无数次代码,下单结果里面的回调地址看了又看,都没有错啊。 把回调地址复制出来到浏览器上面,外网也是可以访问的啊。 然后我再分析,为什么以前公众号支付都...
    99+
    2023-09-20
    微信小程序 小程序 微信
  • 微信小程序中如何实现微信支付
    微信支付是微信公众平台提供的一种在线支付服务,可以为用户提供快速、方便、安全的支付体验。而在微信小程序中实现微信支付,则可以为应用程序提供更多的功能和服务,提高用户体验和商业价值。因此,在本文中,我们将介绍如何在微信小程序中实现微信支付。 ...
    99+
    2023-08-16
    微信小程序 微信 小程序 前端 javascript
  • PHP实现微信支付流程(Native支付)
    最近项目需要做微信支付的功能,想着把流程以及遇到的坑记录下来 1.到微信商户平台中去开通Native支付(产品中心-Native支付-申请开通) 2.微信商户平台中下载证书以及设置api密钥(账户中心-api安全),查看指引中很详细的说...
    99+
    2023-08-31
    php 微信 Powered by 金山文档
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作