微信小程序前端微信支付功能 支付流程

article/2025/10/15 5:57:31

小程序支付(纯前端)

前提(实现微信小程序支付功能需要appid主体为企业,以及开通了微信商家服务的小程序才能实现,个人小程序是无法实现这个功能的)

前期准备:
1.开通了微信支付,并且小程序绑定了微信支付;
2.准备好小程序的appid,微信支付的商户号,支付秘钥。

商户系统和微信支付系统主要交互:
1、小程序内调用登录接口,获取到用户的openid 方法见:【小程序登录API】
2、调用商户服务器支付统一下单接口,进行预支付(后台)
3、调用商户服务器再次签名接口,返回支付数据
4、小程序内完成支付,商户服务器接收支付回调通知。
————————————————


 

调用方法及参数说明:

        需要注意的是在调用这个方法的时候需要要配合后端请求相关支付商品的数据,金额 等,以及实现用户登录,让后台知道是哪个用户支付的。

模板:

wx.requestPayment()
wx.requestPayment({timeStamp: preData.timeStamp + "",nonceStr: preData.nonceStr,package: preData.package + "",signType: 'MD5',paySign: preData.paySign,success(res) {console.log('支付成功');},fail(res) {console.log('支付失败');return;},'complete': function (res) {console.log('支付完成');if (res.errMsg == 'requestPayment:ok') {wx.showModal({title: '提示',content: '购买成功'});}return;}
})

示例代码:

//index.js
Page({data: {},//点击支付按钮进行支付payclick: function () {var t = this;wx.login({//获取code换取openIDsuccess: function (res) {//code = res.code //返回codeconsole.log("获取code");console.log(res.code);var opid = t.getOpenId(res.code);}})},//获取openIDgetOpenId: function (code) {var that = this;wx.request({url: "https://api.weixin.qq.com/sns/jscode2session?appid=你的appid&secret=AppSecret(小程序密钥)&js_code=" + code + "&grant_type=authorization_code",data: {},method: 'GET',success: function (res) {console.log("获取openid")console.log(res)that.setData({openid: res.data.openid,session_key: res.data.session_key})that.generateOrder(res.data.openid)},fail: function () {// fail},complete: function () {// complete}})},//生成商户订单generateOrder: function (openid) {var that = thiswx.request({url: 'http://localhost:25492/wx/getda',//后台请求地址method: 'GET',data: {gfee: '商品价钱',gname: '商品名称',openId: openid//(商品价钱和商品名称根据自身需要是否传值, openid为必传)},success: function (res) {console.log("后台获取数据成功");console.log(res);var param = { "timeStamp": res.data.timeStamp, "package": res.data.package, "paySign": res.data.paySign, "signType": "MD5", "nonceStr": res.data.nonceStr };//发起支付that.pay(param);},fail: function (res) {console.log("向后台发送数据失败")}})},//支付pay: function (param) {var that = this;console.log("发起支付")console.log(param)wx.requestPayment({timeStamp: param.timeStamp,nonceStr: param.nonceStr,package: param.package,signType: param.signType,paySign: param.paySign,success: function (res) {console.log("success");console.log(res);},fail: function (res) {console.log("fail")console.log(res);},complete: function (res) {console.log("complete");console.log(res)}})}
})

容易遇到的问题:
一,调用微信预订单接口失败

  1. 商户号未与小程序绑定
  2. 通知地址不是https类型
  3. 交易类型没指定为JSAPI
  4. 订单号重复

二,可以正常调用微信预订单接口,能获得微信支付返回的prepay_id,但是小程序调起收银台失败

  1. 参数错误,会返回调用支付jsapi缺少参数:total_fee,此时与签名没关系,需要检查方法参数,随机字符串和package对应的参数值,还有就是,下预订单使用的用户openid和拉起支付的用户,必须是同一个,不然会报错,我就是遇到这个错误。
  2. 支付验证签名失败,这个与获得签名有关系,返回的签名不正确。自己手动获取签名,要注意参数的顺序以及大小写。使用微信工具类获得签名时,也要注意大小写,并且在要签名的参数中加上签名方式repData.put(“signType”,“MD5”);
     

http://chatgpt.dhexx.cn/article/53GdZihx.shtml

相关文章

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

随着微信小程序越来越广泛的应用,现在小程序几乎无所不能(绝对啦,哈哈),那么就会有很多微信小程序需要有支付的需求,那么该文章将带领大家走一遍如何实现微信小程序的支付功能. 第一步,微信小程序管理后台 -> 微信支付->接入微信支付 及关联(设置)商户信息 如果是第一次…

软件测试之“支付功能”测试

测试思维 要分析测试点之前,我们先来梳理一下测试思维。总结来说,任何事物的测试思路都可以总结如下: 第一步:梳理产品的核心业务流程:明白这是个什么项目,实现了什么业务,以及是怎么实现的&a…

一步步教你如何在SpringBoot项目中引入支付功能

听说微信搜索《Java鱼仔》会变更强哦! 本文收录于JavaStarter ,里面有我完整的Java系列文章,学习或面试都可以看看哦 (一)引言 支付功能如今已经成为一个需要盈利的网站的基本功能了,如今的网站如果想要做…

支付功能怎么测试?

跳槽高峰期,作为测试,不管是面试还是笔试,必然要被考验到的就是”测试思维“。在面试中就是体现在如下面试题中: “说说你项目中的 xx 模块你是如何测试的?” “给你一个购物车,你要怎么测试?”…

面试题:支付功能怎么测试?如何回答?

文章末尾给大家准备了大量福利 前言 九月了,有很多的小伙伴已经全面武装好准备找工作了,九月和十月是黄金期——俗称”金九银十“。那么,作为测试,不管是面试还是笔试,必然要被考验到的就是”测试思维“。在面试中就…

支付功能测试用例(参考微信平台)

支付功能测试用例xmind,功能点以支付方式,支付手段,支付金额划分的 支付方式: 1.余额(零钱)支付 2.储蓄卡支付 3.第三方支付微信,支付宝,京东、百度、) 4.信用卡支付…

vue项目支付功能

目录 1.支付宝方式: 代码: ​ 2.微信支付 二维码展示代码: ​请求后端的支付二维码接口 1.支付宝方式: 支付宝方式:点击支付宝支付, 调用后台接口(携带订单号),后台返回一个form表单(HTML字符串结构)&am…

在线支付功能实现代码

我们都知道,在现在的网站中,基本上都会有支付功能,在线支付作为一个潮流已是现代化网站的必备功能模块,那么几天我就分享一下如果来做这个在线支付功能。 在线支付一般来说有两种实现方式,一种是调用各个银行提供的接口…

Java实现微信支付功能

微信实现支付功能与支付宝实现支付功能是相似的,接入前的准备工作,包括申请APPID、申请mchid、绑定APPID及mchid、配置API key、下载并配置商户证书等,具体可查看微信支付文档 接入前准备-APP支付 | 微信支付商户平台文档中心 (qq.com)正在上…

Java开发支付宝支付功能

之前做开发过程中,没有接触过支付相关的功能,最近做了一个支付相关功能的开发,包括支付宝和微信支付,为了避免以后忘记相关的流程,记录一下这次的开发经验,这里先介绍一下支付宝相关的开发。 首先在进行jav…

支付宝支付功能实现

支付宝支付功能 1、电脑网站支付,手机网站支付,app支付1.1、异步通知介绍1.2、API和请求示例介绍 2、当面付3、小程序支付接入4、代码完整代码 支付宝开发文档中心 注意:个人无法使用此功能,因为个人申请使用是不会通过的 1、电脑…

支付功能

Django rest framework之支付功能 一.支付宝支付 1.进入蚂蚁金服开放平台(查看api): 1.1在正式生产环境中需要创建应用(需审核): 1.2沙箱环境(测试): 可以在文档中查看对…

springboot实现支付宝支付功能

支付系统中容易出现的问题 1,用户在页面下订单后,价格被篡改; 解决方案:通过后端计算订单的总金额 2,订单重复处理。用户支付成功后,支付宝会短时间内多次调用我们的回调接口,如果出现网络波动…

2021年,Flutter 与 React Native该如何选择?,安卓app开发教程

一、Flutter 应用的优势 =========================================================================== 1. 热重载 = 快速编码 Flutter 允许开发人员使用一种更复杂、更快速的方式来创建应用程序。这是 Flutter 的最大优势之一,也是所有顶级移动应用开发公司都颇为看重的…

一大波开发者福利来了,一份微软官方Github上发布的开源项目清单等你签收

目录 微软Github开源项目入口微软开源项目受欢迎程度排名 Visual Studio CodeTypeScriptRxJS.NET Core 基础类库CNTKMicrosoft calculatorMonaco editorMS-DOSRedis windows版.NET Core CLR (公共语言运行时)ASP.NET CoreEntity Framework CorePowerShell如何在其中搜索自己需要…

.Net资讯 | 一大波开发者福利来了, 一份微软官方Github上发布的开源项目清单等你签收...

目录 微软Github开源项目入口微软开源项目受欢迎程度排名 Visual Studio CodeTypeScriptRxJS.NET Core 基础类库CNTKMicrosoft calculatorMonaco editorMS-DOSRedis windows版.NET Core CLR (公共语言运行时)ASP.NET CoreEntity Framework CorePowerShell如何在其中搜索自己需要…

FullCalendar:eventColor,eventBackgroundColor, eventBorderColor, and eventTextColor

<!DOCTYPE html><html><head><meta charsetutf-8 /><title>背景色設定</title><link href../fullcalendar.min.css relstylesheet /><link href../fullcalendar.print.min.css relstylesheet mediaprint /><script src../l…

Flutter 与 React Native 该如何选择

跨平台程序员之间关于 React Native 和 Flutter 的旷日持久的争论越来越白热化了。前几年&#xff0c;React Native 还是开发人员的首选框架&#xff0c;但是自 2017 年 Flutter 发布以来&#xff0c;其已经发展成为 React Native 的一个强有力竞争对手。 最近&#xff0c;随着…

2021年,Flutter 与 React Native该如何选择?

????????关注后回复 “进群” &#xff0c;拉你进程序员交流群???????? 作者 | Wasim Charoliya 译者 | 王强 策划 | 田晓旭 2021 年&#xff0c;跨平台程序员之间关于 React Native 和 Flutter 的旷日持久的争论越来越白热化了。前几年&#xff0c;React Nati…

React Native 三端同构实践

⚠️ 博客中涉及的代码内容可查看 Github: react-native-isomorphism React Native三端同构皆在&#x1f22f;️在不改动 React Native 代码下&#xff0c;公用一套代码架构, 在浏览器中实现同样的展示、交互、功能。 在实际开发过程中, 尤其创业公司, 需求的迭代周期是非常快…