uniapp实现支付功能

article/2025/10/15 4:57:49

uniapp实现支付功能
详细参考:
https://gitee.com/copperpeas/uniapp-payment

uniapp-payment
介绍
uniapp支付

微信支付流程
测试接入的是uniapp官方预下单接口

APP应用首先去微信等开发平台申请开通支付,部分支付渠道需要配置支付目录,授权域名,回调函数

预下单返回参考:

"data": {"appid": "wx0411fa6a39d61297","noncestr": "Xu70l0bOQSQIDIPH","package": "Sign=WXPay","partnerid": "1230636401","prepayid": "wx271034552844601252843eae1384334800","timestamp": 1569551695,"sign": "44B127098800419D542B688054F95A8F"},

参考官方微信支付 https://pay.weixin.qq.com/wiki/doc/api/index.html

小程序支付:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1

简单流程: 第一步:调用登录接口,获取到用户的openid等 第二步:Code,价格等发送给后台,后台发送微信生成预支付订单,并且返回订单信息 第三步:小程序拿到预下单订单信息,发起支付,调起支付APP 第四步:后台验证支付结果

小程序第三步调起支付给APP调起支付参数不一样,大体流程是一致的

商户系统和微信支付系统主要交互:

1、小程序内调用登录接口,获取到用户的openid,api参见公共api【小程序登录API】

2、商户server调用支付统一下单,api参见公共api【统一下单API】

3、商户server调用再次签名,api参见公共api【再次签名】

4、商户server接收支付通知,api参见公共api【支付结果通知API】

5、商户server查询支付结果,api参见公共api【查询订单API】

拿到预下单后调用支付

uni.requestPayment({timeStamp: paymentData.timeStamp,nonceStr: paymentData.nonceStr,package: paymentData.package,signType: 'MD5',paySign: paymentData.paySign,success: (res) => {uni.showToast({title: "感谢您的赞助!"})},fail: (res) => {uni.showModal({content: "支付失败,原因为: " + res.errMsg,showCancel: false})},complete: () => {this.loading = false;}
})

APP支付 https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=8_3

简单流程:

第一步:获取支付类型,APPid,支付金额 第二步:发送给后台,后台发送微信生成预支付订单,并且返回订单信息 第三步:拿到预下单订单信息,发起支付,调起支付APP 第四步:后台验证支付结果

商户系统和微信支付系统主要交互说明:

步骤1:用户在商户APP中选择商品,提交订单,选择微信支付。

步骤2:商户后台收到用户支付单,调用微信支付统一下单接口。参见【统一下单API】。

步骤3:统一下单接口返回正常的prepay_id,再按签名规范重新生成签名后,将数据传输给APP。参与签名的字段名为appid,partnerid,prepayid,noncestr,timestamp,package。注意:package的值格式为Sign=WXPay

步骤4:商户APP调起微信支付。api参见本章节【app端开发步骤说明】

步骤5:商户后台接收支付通知。api参见【支付结果通知API】

步骤6:商户后台查询支付结果。api参见【查询订单API】

拿到预下单后调用支付

uni.requestPayment({provider: e.id,orderInfo: orderInfo.data,success: (e) => {console.log("success", e);uni.showToast({title: "感谢您的赞助!"})},fail: (e) => {console.log("fail", e);uni.showModal({content: "支付失败,原因为: " + e.errMsg,showCancel: false})},complete: () => {this.providerList[index].loading = false;}
})

微信有预下单,而支付宝不存在

支付宝支付流程
支付宝支付参考 https://docs.open.alipay.com/ 左边支付栏目 支付宝APP支付 https://docs.open.alipay.com/204/105297

简单流程:
第一步:获取支付类型,APPid,支付金额
第二步:发送给后台,后台针对支付宝请求参数说明,组装数据,返回订单信息
第三步:拿到组装单订单信息,发起支付,调起支付APP
第四步:后台验证支付结果

在这里插入图片描述


http://chatgpt.dhexx.cn/article/TIL2Lfht.shtml

相关文章

微信小程序支付功能的实现

前言 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙&#…

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

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

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

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

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

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