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 支付内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-05-09

uniapp实现微信公众号支付的方法步骤

目录 1.申请企业服务号(必须企业认证) 2.获取appid 和秘钥 3.安全域名设置 4.代码实现 1.申请企业服务号(必须企业认证) https://mp.weixin.qq.com 2.获取appid 和秘钥 菜单 开发-基本配置 获取秘钥 .设置ip白名单 3.安全域名设置 进入公众号设置-功能设置配置 4.代码实现 点击请求优先去请求后台订单支付接口数据 将获取到的数据放入以下请求数据里面  callPay: function(response) { if (typeof Weixin

微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法

这段时间一直比较忙,一忙起来真感觉自己就只是一台挣钱的机器了(说的好像能挣到多少钱似的,呵呵):这会儿难得有点儿空闲时间,想把前段时间开发微信公众号支付遇到问题及解决方法跟大家分享下,这些"暗坑"能不掉就不掉吧,要不然关键时刻出问题,真是让人急的焦头烂额. 双12客户的商城活动正在蓄势进行中,却有用户频频反馈说:支付不了,有问题,并截图如下: 当时问题感觉很奇怪,自己测试多次都ok啊,问题来了都赶紧解决吧,最终找到解决办法: 原因是程序中一个字符串变量被错误的设置为数字类型,解决方法很

java开发微信公众号支付

最近做了微信公众号支付的开发,由于是第一次做也摸索了几天的时间,也只是达到了实现功能的水平,并没有太多考虑到性能问题,所以这篇文章比较适合初学者. 微信公众号支付的总体其实很简单,大致就分为三步.第一步需要获取用户授权:第二步调用统一下单接口获取预支付id:第三步H5调起微信支付的内置的js.下面介绍具体每一步的开发流程. 一    首先要明确微信公众号支付属于网页版支付,所以相较于app的直接调取微信支付要多一步微信授权.也就是需要获取用户的openid.微信公众号使用的交易类型是JSAPI,

微信公众号支付H5调用支付解析

最近项目需要微信支付,然后看了下微信公众号支付,虽然不难,但是细节还是需要注意的,用了大半天时间写了个demo,并且完整的测试了一下支付流程,下面分享一下微信公众号支付的经验. 一.配置公众号微信支付   需要我们配置微信公众号支付地址和测试白名单. 比如:支付JS页面的地址为 http://www.xxx.com/shop/pay/             那此处配置www.xxx.com/shop/pay/ 二.开发流程 借用微信公众号支付api(地址 http://pay.weixin.q

Java版微信公众号支付开发全过程

一.微信官方文档微信支付开发流程(公众号支付) 首先我们到微信支付的官方文档的开发步骤部分查看一下需要的设置. [图片上传失败...(image-5eb825-1531014079742)] 因为微信支付需要较高的权限,只有认证了得服务号才有使用微信支付接口的权限,我们个人很难申请到,所以需要向其他朋友借用账号. 来到文档的业务流程部分,查看微信支付的流程(我觉得这个还是需要十分仔细的了解和查看的,这有助于你理解微信开发的流程). 然后,访问微信支付接口是要传递的参数很多,见统一下单 [图片上传

微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解

本文实例讲述了PHP实现微信公众号支付功能.分享给大家供大家参考,具体如下: 直言无讳,我就是一个初涉微信开发的小白,写这篇博客的原因:一是为了给自己做下备忘记录,以便以后能回忆这条程序猿的坎坷路:二是希望能帮助到同是自学开发的小白们:三是对那些不屑一顾于我等尘埃的大牛们的控诉,小白的道路坎坷,你们凭什么总要一副高高在上的样子?我等敬而不畏... 背景介绍: 随着智能手机的普及,移动支付下的微信.支付宝所提供的便利需求不言而喻,好吧,至少我周围连个小摊贩的早餐都可以微信支付,而且人家手机还比我高

Thinkphp微信公众号支付接口

本文实例为大家分享了Thinkphp微信公众号支付接口,供大家参考,具体内容如下 第一步  先把文件夹的那两个图片 配置成一样的路径 除了域名要改 其他保持一致. 第二步  把 Weixinpay 这个文件夹放在 \ThinkPHP\Library\Vendor  将Weixinpay文件夹放置到这个Vendor文件夹中 第三步  把  WxJsAPIController.class.php 这个php文件  \Home\Controller  这里面 第四步  把 WxJsAPI这个文件夹 

微信公众号支付(一)如何获取用户openId

一.获取apikey,appsecret与商户号 注册公众号.商户号 二.获取用户的OpenId 1.设置[授权回调页面域名] 官方解释:用户在网页授权页同意授权给公众号后,微信会将授权数据传给一个回调页面,回调页面需在此域名下,以确保安全可靠.回调页面域名不支持IP地址. 2.用户同意授权 我是把这个url写在微信菜单下的,当进入这个页面的时候就让用户同意.注意:好像是静默授权的,用户不知道 1.url: https://open.weixin.qq.com/connect/oauth/aut

vue项目使用微信公众号支付总结及遇到的坑

微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档: 使用的vuex,在mutations中 wechatPay (state, data) { state.payObject = data console.log('微信支付开始请求') if (wechat) { wx.chooseWXPay({ timestamp: state.payObject.timeStamp, // 支付签名时间戳 nonceStr: state.payObject.nonceStr, // 支付签

微信公众号服务器验证Token步骤图解

这篇文章主要介绍了微信公众号服务器验证Token步骤图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 服务器验证Token验证分为以下及步骤 一,在微信公众号平台上设置 1.1打开微信公众号平台 1.2打开"开发"中的<基本配置> 1.3点击基本配置页面里的修改配置 1.4输入URL: url填写:http://外网IP:端口号/wx .外网IP请到腾讯云购买成功处查询, http的端口号固定使用80,不可填写其他. T

微信公众号支付(MVC版本)

一.获取微信支付 MCHID,KEY,APPID,APPSecret 四个支付关键值. 微信支付商户平台 https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2F   1.登录微信支付商户平台获取到商户号(MCHID),   2.在"账号中心"栏目下"API安全"栏目里设置API密钥(KEY) 微信公众号: https://mp.weixin.qq.com/      1.登录微信公众在&q