微信支付JSAPI

一、什么是JSAPI支付

JSAPI支付是指商户通过调用微信支付提供的JSAPI接口,在支付场景中调起微信支付模块完成收款。

应用场景有:

线下场所:调用接口生成二维码,用户扫描二维码后在微信浏览器中打开页面后完成支付

公众号场景:用户在微信公众账号内进入商家公众号,打开某个主页面,完成支付

PC网站场景:在网站中展示二维码,用户扫描二维码后在微信浏览器中打开页面后完成支付

我们这里采用的是PC网站场景。

二、准备工作

1、申请入口:登录商户平台-->产品中心-->我的产品-->支付产品-->jsapi支付

2、浏览开发文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3,这里面几乎介绍了全部流程。

3、在微信公众平台和微信商户平台拿到或配置一下参数:

         appid:公众平台的appid 

         商户号:公众平台的商户号

        appsecrut:商户平台里的签名密钥(这个要保存好,现在不支持查看,忘了就得重新配置了)

        商户支付密钥Key:api_key 审核通过后,在微信发送的邮件中查看
a、微信商户平台(pay.weixin.qq.com)设置您的JSAPI支付支付目录,设置路径:商户平台-->产品中心-->开发配置

b、在公众平台设置网页授权域名(开发JSAPI支付时,在统一下单接口中要求必传用户openid,而获取openid则需要您在公众平台设置获取openid的域名,只有被设置过的域名才是一个有效的获取openid的域名,否则将获取失败)

三、下单流程:

jsapia支付和H5支付的流程:

H5支付 调用https://api.mch.weixin.qq.com/pay/unifiedorder 接口

当返回值return_code 和result_code都为SUCCESS的时候,使用其中的参数mweb_url :为拉起微信支付收银台的中间页面,可通过访问该url来拉起微信客户端,完成支付,mweb_url的有效期为5分钟。

jsapi支付:调用https://api.mch.weixin.qq.com/pay/unifiedorder 接口  

(商户系统先调用该接口在微信支付服务后台生成预支付交易单,返回正确的预支付交易会话标识后再按Native、JSAPI、APP等不同场景生成交易串调起支付)

回到这里:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6  在微信浏览器里面打开H5网页中执行JS调起支付

在jsapi预支付的过程中和H5支付的区别为:

1,trade_type不同->MWEB-H5支付,JSAPI -JSAPI支付

2,jsapi支付的时候需要传递openid,用户在商户appid下的唯一标识。openid如何获取参考:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

首先需要获取到code值:

(补充以下链接参数访问之后,地址发生改变,其中就有code值,,,其中code值无法直接将地址从地址栏中粘贴出来,alert("页面首部展示路径  :  "+$location.absUrl())会看出来有值)

参考链接(请在微信客户端中打开此链接体验):
scope为snsapi_base
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect

获取到code之后即可根据code值获取到openid 

public String getOpenId(String code, String appId){
		String openId ="";
		String secret =Config.getValue("weixin.appsecret");
		log.error("appid:______________"+appId);
		log.error("SECRET:______________"+secret);
		String url = "https://api.weixin.qq.com/sns/oauth2/access_token?" + "appid=" + appId
				+ "&secret=" + secret 
				+ "&code="+ code 
				+ "&grant_type=authorization_code";
		//http连接
		HttpClient client = new HttpClient(); 
		GetMethod method = new GetMethod(url); 
		client.getParams().setContentCharset("UTF-8");
		method.setRequestHeader("ContentType","application/x-www-form-ACCESS_TOKEN_OPENIDencoded;charset=UTF-8");
		try {
			client.executeMethod(method);
			String SubmitResult =method.getResponseBodyAsString();
			log.debug("------openId请求----------------"+SubmitResult);
			Map map=new HashMap();
			map = (Map)(new ObjectMapper()).readValue(SubmitResult, Map.class);
			openId = (String) map.get("openid");	//获取openID
			String errcode = String.valueOf((Integer) map.get("errcode"));	//获取错误码
			log.error("【获取openId的具体内容】  : "+SubmitResult);
			log.debug("【openId请求---errcode】 :  "+errcode);
			log.debug("【openId请求---openId】 : "+openId);
		} catch (HttpException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		} 
		return openId;
	}

 

        

 

 

### 回答1: Uniapp是一种跨平台的开发框架,可以用于同时开发iOS、Android和H5应用。而H5是指在网页上运行的应用程序。微信支付JSAPI是微信提供的一种支付接口,通过调用JSAPI接口,可以在H5应用中实现微信支付功能。 在Uniapp中使用微信支付JSAPI,可以通过以下步骤进行操作: 1. 首先,在Uniapp项目中引入微信支付的相关配置文件和SDK库文件。 2. 在需要使用微信支付的页面中,引入微信支付的JS文件,并初始化微信支付参数。支付参数包括商户号、appid、签名等信息。 3. 创建统一下单接口的后端处理程序,用于生成预支付订单并返回支付预处理参数给前端。 4. 在支付页面中,调用微信支付JSAPI的方法,传入预支付处理参数和支付回调方法。 5. 当用户点击支付按钮后,会弹出微信支付界面,用户可以选择支付方式进行支付操作。 6. 支付成功后,微信会将支付结果返回给前端,并通过支付回调方法进行处理,可以展示支付成功的提示信息和更新订单状态等操作。 需要注意的是,使用微信支付JSAPI需要在微信开放平台上注册并申请相关的权限。同时,在使用过程中,还需要确保支付参数的正确性、支付安全性和业务逻辑的完善性。 总之,Uniapp可以很好地支持H5应用中的微信支付JSAPI,通过合理的配置和调用,可以方便地在H5应用中实现微信支付功能,为用户提供更加便捷的支付体验。 ### 回答2: Uniapp是一款跨平台的应用开发框架,可以让开发者使用Vue.js语法来开发同时兼容多个平台的应用程序。Uniapp支持在H5平台中使用微信支付JSAPI。 微信支付JSAPI是微信提供的一组用于在网页中实现微信支付功能的JavaScriptAPI接口。通过调用微信支付JSAPI,开发者可以在H5页面中调起微信支付功能,用户可以使用微信支付完成支付操作。 在Uniapp中使用微信支付JSAPI,首先需要引入微信支付的JS文件。可以在页面的头部引入:<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>。 然后,在需要使用微信支付的地方,可以通过uni.request方法向服务器请求获取支付参数。获取到支付参数后,可以使用wx.requestPayment方法调起微信支付界面,并传入支付参数。支付成功后,微信会返回支付结果给开发者的回调函数,开发者可以在回调函数中处理支付结果。 需要注意的是,在使用微信支付JSAPI的过程中需要保证支付参数的安全性,避免支付参数被恶意篡改。通常可以在服务器端生成支付参数,并通过服务器端返回给前端,以确保支付参数的安全性。 总结起来,Uniapp可以在H5平台中使用微信支付JSAPI来实现微信支付功能,开发者需要引入微信支付的JS文件,通过uni.request方法获取支付参数,调用wx.requestPayment方法调起支付,处理支付结果的回调函数,并确保支付参数的安全性。 ### 回答3: Uniapp 是一款跨平台开发框架,可以同时开发小程序、H5 和APP。Uniapp 提供了对微信支付的支持,可以使用微信支付的 JSAPI(JavaScript API)来进行支付功能的开发。 Uniapp H5 微信支付 JSAPI 的实现过程如下: 1. 首先,需要在微信支付商户平台上注册并获取到自己的商户号(mch_id),同时生成随机字符串(nonce_str)和当前时间戳(timestamp)。 2. 接下来,在前端页面中引入微信支付的 JS 文件,可以通过在页面头部添加以下代码进行引入: ``` <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> ``` 3. 在页面中设置要支付的订单信息,包括订单号(out_trade_no)、订单总金额(total_fee)等,并将这些信息以及商户号、随机字符串和时间戳等传递给后端服务器。 4. 后端服务器在接收到前端传递的支付信息后,根据微信支付 API 的要求,生成签名(sign)并返回给前端。 5. 前端页面收到后端返回的签名后,调用微信支付的 JSAPI 方法,传入订单信息和签名等参数,即可发起支付请求。 6. 微信客户端会弹出支付窗口,用户输入密码或进行指纹验证后,支付完成。 注意事项: - 在使用 Uniapp 进行微信支付开发时,需要确保页面已经获得了微信公众号的授权,因为微信支付是需要通过公众号的权限进行的。 - 需要合理处理支付结果的回调,根据支付结果进行相应的处理,如跳转到支付成功页面或给予支付失败的提示等。 通过使用 Uniapp H5 微信支付 JSAPI,我们可以方便地在 Uniapp 框架下进行微信支付的开发,实现支付功能的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值