uniapp实现支付功能

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
第四步：后台验证支付结果

uniapp实现支付功能相关推荐

uniapp小程序微信支付功能
目录字段说明前置工作获取openid 微信支付报错问题 uniapp 开发小程序需要实现微信支付功能,下面对相关业务进行说明. 字段说明 AppID:小程序的身份证,微信客户端用来确认你的小程 ...
关于实现uni-app项目在APP端使用微信支付功能
首先在对项目开启支付功能,在项目的manifest.json文件中勾选APP模块配置中的Payment支付模块,并将需要的信息填写完整,如下图除此之外还需要其他的一些配置,下面开结合图片来一步步的详 ...
【微信小程序支付功能】uniapp实现微信小程序支付功能
场景:要实现公司微信小程序的电商模块微信支付功能一.实现步骤和思路在登录状态,登录的时候获取到code,利用code获取到openid:https://blog.csdn.net/weixin_4 ...
uni-app - 最详细 H5 网页接入微信支付功能，提供从详细的示例代码与注释（移动端网页实现微信支付能力，微信公众号前端支付 JSAPI / JS-SDK 详细示例源码）官方最新超级详细教程
前言关于 uni-app 项目中接入微信支付的文章鱼龙混杂,各种 JSAPI / JS-SDK 乱代码.过时.没注释.不讲流程原理,非常难用. 本文实现了 uni-app H5 移动端网页项目,实现 ...
基于spring-boot+uni-app实现app支付功能（微信/支付宝）服务端
基于spring-boot+uni-app实现app支付功能(微信/支付宝)服务端支付宝支付 1 准备工作申请支付能力接口加签方式 2代码依赖支付宝支付配置类支付宝控制层异步通知微信支 ...
UniApp + SpringBoot 实现接入支付宝支付功能和退款功能
一.支付宝开放平台设置注册支付宝支付功能需要个体工商户或企业才可以!需要有营业执照才能去申请哦! 1.登录到控制台进入支付宝开放平台控制台 2.开发设置 3.产品绑定APP支付如果没有绑定AP ...
uni-app支付功能
uni-app支付功能扫码查看原文前言近期一直在使用APP开发多端应用,IOS的APP.安卓的APP和H5网页,其中开发的APP使用到了微信和支付宝的支付,在此给大家分享出来,一起使用前置条件 ...
uniapp实现微信小程序支付功能
我这个项目是一个外卖小程序首先要做支付功能,需要两个条件 1.必须是企业,个人用户不行 2.去微信支付平台提交资料审核首先封装网络请求 api.js // 引进提示 import {errdata ...
uni-app实现支付及项目打包上传
本文主要介绍uni-app项目中如何实现支付功能(支付宝支付.微信支付),及项目如何打包上传. 一.实现支付前置工作,项目要实现支付功能,首先要在根目录manifest.json文件内App模块配置 ...

uniapp实现支付功能

uniapp实现支付功能相关推荐

最新文章

热门文章