uni-app 微信、支付宝APP支付流程

这篇具有很好参考价值的文章主要介绍了uni-app 微信、支付宝APP支付流程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、微信支付

1、登录微信开放平台,添加移动应用,审核通过后可获取应用ID(AppID,支付订单中需要使用)
2、使用商户号和登录密码登录微信商户平台,进入 “账户中心” > “API安全” > “设置APIv2密钥” 设置API密钥(用于服务器生成订单),详情参考API证书及密钥
APP支付流程
3、在manifest.json文件“App模块配置”项的“Payment(支付)”下,勾选“微信支付”项
uniapp支付流程,PHP,微信,微信,微信小程序,小程序,uniapp
4、微信支付请求示例代码 phpSDK下载

//订单对象,从服务器获取
var orderInfo = {
  "appid": "wx499********7c70e",  // 应用ID(AppID)
  "partnerid": "148*****52",      // 商户号(PartnerID)
  "prepayid": "wx202254********************fbe90000", // 预支付交易会话ID
  "package": "Sign=WXPay",        // 固定值
  "noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
  "timestamp": 1597935292,        // 时间戳(单位:秒)
  "sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名,这里用的 MD5 签名
};
//获取支付渠道
var wxpaySev = null;
plus.payment.getChannels(function(channels){
    for (var i in channels) {
        var channel = channels[i];
        if (channel.id === 'wxpay') {
            wxpaySev = channel;
        }
    }
    //发起支付
    plus.payment.request(wxpaySev, orderInfo, function(result) {
        var rawdata = JSON.parse(result.rawdata);
        console.log("支付成功");
    }, function(e) {
        console.log("支付失败:" + JSON.stringify(e));
    });
  }, function(e){
      console.log("获取支付渠道失败:" + JSON.stringify(e));
});

二、支付宝支付

1、登录 支付宝开放平台 ,进入控制台页面创建移动应用,填写应用信息并提交审核,在应用详情页面的能力列表中添加APP支付功能,进入开发设置完成加密方式、IP白名单等开发信息,设置添加功能和配置密钥后(获取公钥、私钥,用于服务器生成订单),将应用提交审核,详情参考上线应用应用上线后,完成签约才能在生产环境使用支付功能

2、打开项目的manifest.json文件,在“App模块配置”项的“Payment(支付)”下,勾选“支付宝支付”
uniapp支付流程,PHP,微信,微信,微信小程序,小程序,uniapp
3、示例代码 phpSDK下载

var orderInfo = '';  //从服务器获取的订单
//获取支付宝支付对象
var alipaySev = null;  // 支付宝支付对象
plus.payment.getChannels(function(channels){
    for (var i in channels) {
        var channel = channels[i];
        if (channel.id === 'alipay') {
            alipaySev = channel;
        }
    }
    //发起支付
    plus.payment.request(alipaySev, orderInfo, function(result){
          var rawdata = JSON.parse(result.rawdata);
          console.log("支付成功");
      }, function(e){
          console.log("支付失败:" + JSON.stringify(e));
    });
  }, function(e){
      console.log("获取支付渠道失败:" + JSON.stringify(e));
});

总结

1、支付的sdk如果可以尽量用uniapp提供的SDK 不然可能会导致支付调不成功(不要问我是怎么知道的,都是泪)
2、如果需要其他的可以参考uniapp提供的 其他支付文章来源地址https://www.toymoban.com/news/detail-545324.html

到了这里,关于uni-app 微信、支付宝APP支付流程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月05日
    浏览(97)
  • 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2023年04月15日
    浏览(81)
  • WebStorm开发uni-app ,用vue2实现手机APP(apk) + 微信小程序多端项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月11日
    浏览(75)
  • 语法速通 uni-app随笔【uni-app】【微信小程序】【vue】

    其中, pages 目录/ index 目录【必有】: index.js 编写业务逻辑 【初始数据,生命周期函数】 index.json 编写配置 index.wxml 编写模板 【可理解为本页html】 index.wxss 【可理解为本页css】 直接输入敲回车,连尖括号都不需要就可以标签补全 1)初始数据写死 在 index.wxml 引入变

    2024年02月12日
    浏览(174)
  • UNI-APP开发微信小程序的基本流程

    需提前准备的工具:HBuilder X ,微信开发者工具 登录小程序官网,如已有账号,则直接登录。 无账号,申请完账号后,进入账号填写相关信息,获取appId。 获取appId:【开发-开发管理-开发设置】 【文件】-【新建】-【项目】: 点击【manifest.json】,将微信小程序的配置信息填

    2024年02月06日
    浏览(49)
  • 微信小程序uni-app

    小程序 是一种不需要下载、安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一下就能打开应用,也实现了用完即走的理念,用户不用安装太多应用,应用随处可用,但又无须安装卸载。 微信开发文档 1、工作原理 网页开发,渲染线程和脚本是互斥的

    2024年02月10日
    浏览(123)
  • 微信小程序授权(uni-app)

    概述 为了避免重复开发,自己封装了一个通用用户授权回调方法,只需要传入需要授权的scope,权限中文描述、回调函数,就可以实现一整套小程序是否授权、打开授权设置,调用后续操作函数的工作 功能 可以根据自己的实际应用进行微调 目前使用的uni-app版本,可以根据自

    2024年02月16日
    浏览(86)
  • uni-app:vue3 + uni-app 在微信小程序中无法使用app.component全局注册组件

    按上文中的代码执行后,会发现在微信小程序开发中全局注册的组件是无法显示的,这是uniapp的一个未解决bug, 在uniapp中出了可以通过vue实例的component方法注册全局组件外,uniapp支持另一种全局注册的方式,就是通过 easycom 扫描注册,步骤如下 easycom 的扫描流程是:通过代码

    2024年02月16日
    浏览(98)
  • uni-app微信小程序,APP都适用自定义顶部导航

    *使用自定义的导航样式,首先需要把原生的顶部的导航方式给隐藏掉(\\\"navigationStyle\\\": \\\"custom\\\") *手机顶部手机状态栏的高度 *微信小程序中胶囊的位置信息存储(使用store存储) *由于微信小程序中带有导航胶囊,所以需要根据胶囊去获取一定的参数信息 在微信小程序中,我们只需要获

    2024年02月06日
    浏览(64)
  • uni-app微信小程序使用echarts

    前言:本来是使用的ucharts,但因为无法监听图例点击交互,满足不了需求,所以只能放弃。 首先,下载echart组件。可以先随便建个文件夹,然后 npm init。接着下载依赖 然后找到 node_modulesmpvue-echarts下的文件,如图 只留下src,其他的删掉(没有用到)。然后复制 mpvue-echart

    2024年02月10日
    浏览(74)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包