北京华网天下

微信支付：app内唤起为微信打开支付组件进行支付

2024-05-15

来源：网络整理

业务场景：

H5支持微信支付和支付宝支付。该应用程序无法发布，需要支持在应用程序和浏览器中同时使用。

所以我们借此机会对前端接入和第三方支付进行了研究。这次我们只讨论微信支付和支付宝支付。

微信支付

文档地址：微信支付

概述

普通商户微信支付方式主要包括以下7种方式：

支付码支付：例如在大型连锁店、超市，支付时可以扫描用户个人支付码进行支付。触发场景一般为：用户打开个人支付码->

收银扫码->门店收银->商户后台->微信支付系统

支付方式：仅支持微信支付。您可以调用微信的API直接调用微信的支付组件。比如，一些早期的公众号就嵌入了支付页面。

支付：商户后台系统首先调用微信支付统一下单接口。微信后台系统返回链接参数。商户后端系统根据该值生成二维码图像。用户使用微信客户端扫码发起支付。注：有效期为2小时。过期后，扫描二维码将不再发起支付。

应用支付：调用应用打开微信支付组件进行支付。

H5支付：用户在浏览器端打开h5，激活微信支付组件。

小程序支付：小程序直接调用小程序微信支付接口。小程序无法通过启动H5页面进行支付。小程序内只能使用小程序支付。

人脸识别支付：需要实际硬件场景。

与前端密切相关的主要有支付、H5支付、小程序支付。

这次我们重点关注支付、H5支付、小程序支付。

支付

由于是在微信环境下使用，所以前置配置项较多。微信在涉及微信生态的互动上一直非常克制和严谨。

需要配置支付域名和网页授权域名。具体可以参考文档，微信公众平台企业号，商户号，激活支付权限，设置页面授权域名，是你网站的域名地址，基本接口权限，特别是一些权限。确保尽可能打开它们

主要流程在微信文档中解释的很清楚：

总结一下，h5通过调用微信提供的特殊功能来唤起微信支付控制。

收购流程

我主要补充一下，需要预装才能获取用户。您可以获得您的昵称、性别和位置。那么获取时需要修改输入参数，会有弹窗强制用户授权。即使你不注意，只要用户授权，你就可以获得它的信息。如果你刚刚得到它，用户的体验是页面重新加载一次。

支付功能介绍：

支付是指商户调用微信支付提供的接口，在支付场景中激活微信支付模块，完成收款。

应用场景包括：

线下场馆：调用接口生成二维码。用户扫描二维码并在微信浏览器中打开页面完成支付。

公众号场景：用户在微信公众号中进入商户公众号，打开某个主页面，完成支付。

PC网站场景：网站上显示二维码，用户扫描二维码并在微信浏览器中打开页面完成支付。

H5支付概览

H5支付是指前端在浏览器中调用微信小程序，支付成功后返回浏览器。

前端发起请求，需要后端支持，请求微信支付服务，返回前端微信支付链接。我们的回调地址会以返回链接后面的形式写出来。当前端打开该链接时，即可调用微信支付。完成微信支付后，您将返回回调地址。

常见的链接如下所示：

= %3A%2F%2F

任务流程图

主页面跳转：

泳道图

当心

1、当我们将h5页面嵌入到App中使用时，出现的问题是：微信支付成功或取消支付后，iOS端停留在微信上，无法返回到App。它将打开

我们专门制作了一个供 iOS 使用的转账页面。当浏览器打开时，我们将以URL的形式调用应用程序并打开支付结果页面。

2、请注意微信编码后的长度不能超过800，微信支付会报错。

我在实际支付的时候遇到了一个问题：因为是打包在一起的，所以在后台返回了。

后台返回：浏览器h5支付，微信内部浏览器支付是支付，是封装的，所以返回时即使不设置，也不会跳转到原来的页面。一般情况下，微信h5支付api都是写的，用来指示支付是否成功。支付后又会回到原来的支付页面，所以我想了想，改变了主意，设置了。需要在浏览器界面配置徽标。浏览器配置返回加载可识别数据的接口，但是uni. 由于重新加载而无法识别数据。所以区别就在于在浏览器界面配置logo，和配置uni。微信浏览器中的数据进行区分。这是在原项目的基础上的另一个想法，都是为了实现功能。

小程序支付

小程序需要通过微信认证，激活微信支付能力。需要商户资质，个人开发一般很难做到。

// 微信小程序发起支付 uni.requestPayment({ provider: "wxpay", orderInfo: order_id, timeStamp: timeStamp, nonceStr: nonceStr, package: package, signType: signType, paySign: paySign, success: () => { // this.$u.toast("支付成功"); this.navigateTo("/pa/success", false); }, fail: (e) => { }, });

uni.原文

调用方式比较简单，因为是在微信环境内，兼容性问题较少。

wx.requestPayment({ "timeStamp":"",// 时间戳 "nonceStr": "",//随机字符串，长度为32个字符以下。 "package": "",//统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=* "signType": "MD5",//签名方式 "paySign": "",//签名 "success":function(res){}, "fail":function(res){}, "complete":function(res){} })

使用支付宝支付

文件地址支付宝付款

支付宝付款方式有很多，文档也很详细。具体内容可以直接查看文档。这里我们重点关注移动网站支付。

移动网站支付概述

商户在网页上调用支付宝提供的网页支付接口，激活支付宝客户端中的支付模块。商户网页会跳转至支付宝完成支付。支付完成后，会跳转回商户网页，最终显示支付结果。如果支付宝客户端无法激活，一定时间后会自动进入网页支付流程。

前端调用方法：

您需要从前端页面以表单的形式发起请求。浏览器会自动跳转到支付宝的相关页面（通常是收银或合同页面）。用户在该页面完成相关业务操作后，会跳转回商户指定页面。

任务流程图

主页面跳转：

前端核心代码如下

// 后台接口返回来的是form标签字符串 let _str = `

`; _str = _str.replace(/form/, 'form target="_blank"'); div.innerHTML=_str; document.body.appendChild(div); document.forms.alipaysubmit.submit();