一、h5页面支付

h5页面接入微信支付分为两种情况，一种微信内置浏览器调用支付，另一种是在外置浏览器调用支付

内置浏览器支付

内置浏览器支付使用JSAPI支付

前端调用代码

wx.chooseWXPay({timestamp: 0, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符nonceStr: '', // 支付签名随机串，不长于 32 位package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）signType: '', // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致paySign: '', // 支付签名success: function (res) {// 支付成功后的回调函数}
});

JSAPI支付-产品介绍 | 微信支付商户平台文档中心

外置浏览器支付

外置浏览器使用h5支付，要求商户已有H5商城网站，并且已经过ICP备案，即可申请接入

介绍：H5支付是指商户在微信客户端外的移动端网页展示商品或服务，用户在前述页面确认使用微信支付时，商户发起本服务呼起微信客户端进行支付。

1.用户使用微信外部的浏览器访问商户H5页面，当用户选择相关商品购买时，商户系统先调用该接口在微信支付服务后台生成预支付交易单。

2.微信外部的浏览器拉起微信支付中间页，通过H5下单API成功获取H5下单返回的支付中间页（h5_url）后，用户需要通过微信外部的浏览器调起微信支付收银台

3.当用户完成支付，微信会把相关支付结果将通过异步回调的方式通知商户，商户需要接收处理，并按文档规范返回应答

产品介绍-H5支付 | 微信支付商户平台文档中心

二、pc端支付

Native支付：商家在系统中按微信支付协议生成支付二维码，用户扫码拉起微信收银台，确认并完成付款。

前端只需要对接后端接口获取code_url，把code_url转换成二维码即可

三、小程序支付

商户已有微信小程序，用户通过好友分享或扫描二维码在微信内打开小程序时，可以调用微信支付完成下单购买的流程。

注意：小程序不能通过拉起H5页面做jsapi支付，小程序内只能使用小程序支付

uniapp前端代码

uni.requestPayment({"provider": "wxpay", "orderInfo": {"appid": "wx499********7c70e",  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致"noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串"package": "Sign=WXPay",        // 固定值"partnerid": "148*****52",      // 微信支付商户号"prepayid": "wx202254********************fbe90000", // 统一下单订单号 "timestamp": 1597935292,        // 时间戳（单位：秒）"sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名，这里用的 MD5/RSA 签名},success(res) {},fail(e) {}
})

微信原生

wx.requestPayment(Object object) | 微信开放文档

wx.requestPayment({timeStamp: '',nonceStr: '',package: '',signType: 'MD5',paySign: '',success (res) { },fail (res) { }
})

产品介绍-小程序支付 | 微信支付商户平台文档中心

前端如何使用微信支付相关推荐

vue3 前端pc生成微信支付二维码
总体思路:后端会把二维码地址返回给前端. 地址大概是这样的:"weixin://wxpay/bizpayurl?xxxxxxx" pc要做的就是把这个地址以二维码形式展示首先 ...
微信支付-vue 实现微信支付-前端篇
微信支付系列文章微信支付-java后端实现微信支付-vue 前端实现 vue demo: 下载地址文章底部技术栈 vue vue-cli weixin-js-sdk (微信jsSdk) 微信支付 ...
企业号微信支付公众号支付 H5调起支付API示例代码 JSSDK C# .NET
企业号微信支付公众号支付 H5调起支付API示例代码 JSSDK C# .NET 原文:企业号微信支付公众号支付 H5调起支付API示例代码 JSSDK C# .NET 先看效果 1.本文演示的是 ...
微信支付—微信H5支付「微信内部浏览器」
前言微信支付-微信H5外部浏览器支付微信支付-微信H5内部浏览器支付「本文」微信支付-PC端扫码支付「待写」本篇是微信支付系列的第二篇.微信H5内部浏览器支付,关于微信H5外部浏览器唤起微信A ...
尚医通 (三十六) --------- 微信支付
目录一.微信支付介绍二.微信支付开发 1. api 接口 2. 前端 3. 处理支付结果三.取消预约 1. 需求描述 2. 开发微信退款接口 3. 前端一.微信支付介绍 A.微信扫码支付申请 ...
weixin-java-pay实现公众号微信支付与退款
内容来自:https://www.jianshu.com/p/0a0ccc15cb80 pom.xml 文件需要在 pom.xml 加入以下依赖! <dependency><gro ...
【谷粒学院】微信支付功能案例笔记
文章目录 1.引入依赖 2.编写配置文件 3.后端接口代码 4.前端说明 1.引入依赖引入微信支付所需要的相关依赖: <dependencies><dependency>&l ...
微信小程序接入微信支付流程
一.基本介绍 1.支付场景:点击支付按钮唤起微信支付弹窗,输入正确密码后完成支付. 2.基本流程:点击支付按钮首先生成一个订单,然后在后端调用微信api接口进行统一下单,将接口返回的数据回传到前端拉起 ...
QQ小程序支付 QQ钱包支付微信支付
前言由于公司业务需要,最近这段时间对接了QQ小程序支付[包括QQ钱包支付和 QQ小程序内微信支付],由于网络上相关的资料很少,遂留此文,以备后用.[顺便吐槽一下,官方文档不可全信] 由于业务关系, ...
微信支付之Native支付和JSAPI支付详细开发步骤！
目录标题微信支付之扫码Native支付与JSAPI支付进入主题一.Native支付 1. 使用场景 2. 开发步骤 3. 开始开发二.JSAPI支付 1. 使用场景 2. 开发步骤 3. 开始 ...

前端如何使用微信支付