微信支付开发(3) JS API支付

简介: 由于微信支付接口更新,本文档已过期,请查看新版微信支付JS API支付教程。地址 http://www.cnblogs.com/txw1958/p/wxpayv3-jsapi.html   本文介绍如何使用JS API支付接口完成微信支付。

由于微信支付接口更新,本文档已过期,请查看新版微信支付JS API支付教程。地址 http://www.cnblogs.com/txw1958/p/wxpayv3-jsapi.html

 

本文介绍如何使用JS API支付接口完成微信支付。

 

一、JS API支付接口(getBrandWCPayRequest

微信JS API只能在微信内置浏览器中使用,其他浏览器调用无效。微信提供getBrandWCPayRequest接口供商户前端网页调用,调用之前微信会鉴定商户支付权限,若商户具有调起支付的权限,则将开始支付流程。这里主要介绍支付前的接口调用规则,支付状态消息通知机制请参加下文。接口需要注意:所有传入参数都是字符串类型!

getBrandWCPayRequest参数如表6-5所示。

参数

名称

必填

格式

说明

appId

公众号id

字符串类型

商户注册具有支付权限的公众号成功后即可获得;

timeStamp

时间戳

字符串类型,32个字节以下

商户生成,从1970年1月1日00:00:00至今的秒数,即当前的时间,且最终需要转换为字符串形式;

nonceStr

随机字符串

字符串类型,32个字节以下

商户生成的随机字符串;

package

订单详情扩展字符串

字符串类型,4096个字节以下

商户将订单信息组成该字符串,具体组成方案参见接口使用说明中package组包帮劣;由商户按照规范拼接后传入;

signType

签名方式

字符串类型,参数取值"SHA1"

按照文档中所示填入,目前仅支持SHA1;

paySign

签名

字符串类型

商户将接口列表中的参数按照指定方式迚行签名,签名方式使用signType中标示的签名方式,具体签名方案参见接口使用说明中签名帮劣;由商户按照规范签名后传入;

表6-5 getBrandWCPayRequest参数

    getBrandWCPayRequest返回值如表6-6所示。

返回值

说明

err_msg

get_brand_wcpay_request:ok  支付成功
get_brand_wcpay_request:cancel 支付过程中用户取消
get_brand_wcpay_request:fail 支付失败

表6-6 getBrandWCPayRequest返回值

JS API的返回结果 get_brand_wcpay_request:ok 仅在用户成功完成支付时返回。由于前端交互复杂,get_brand_wcpay_request:cancel 或者 get_brand_wcpay_request:fail 可以统一处理为用户遇到错误或者主动放弃,不必细化区分。

 

二、JS API支付实现

下面代码是微信官方提供的JS API支付demo

 1 <?php
 2 include_once("WxPayHelper.php");
 3 
 4 
 5 $commonUtil = new CommonUtil();
 6 $wxPayHelper = new WxPayHelper();
 7 
 8 
 9 $wxPayHelper->setParameter("bank_type", "WX");
10 $wxPayHelper->setParameter("body", "test");
11 $wxPayHelper->setParameter("partner", "1900000109");
12 $wxPayHelper->setParameter("out_trade_no", $commonUtil->create_noncestr());
13 $wxPayHelper->setParameter("total_fee", "1");
14 $wxPayHelper->setParameter("fee_type", "1");
15 $wxPayHelper->setParameter("notify_url", "htttp://www.baidu.com");
16 $wxPayHelper->setParameter("spbill_create_ip", "127.0.0.1");
17 $wxPayHelper->setParameter("input_charset", "GBK");
18 
19 
20 ?>
21 <html>
22 <script language="javascript">
23 function callpay()
24 {
25     WeixinJSBridge.invoke('getBrandWCPayRequest',<?php echo $wxPayHelper->create_biz_package(); ?>,function(res){
26     WeixinJSBridge.log(res.err_msg);
27     alert(res.err_code+res.err_desc+res.err_msg);
28     });
29 }
30 </script>
31 <body>
32 <button type="button" onclick="callpay()">wx pay test</button>
33 </body>
34 </html>

 

将其中的微信支付参数修改成自己所申请得到的,然后将网页上传到微信支付目录下,给测试账号回复该网页地址。用户就可以实现一次JS API支付。

 

三、效果演示

下面是官方DEMO修改后,发起支付的页面图。

确认交易

输入支付密码

交易成功

 

 

 

目录
相关文章
|
6天前
|
JavaScript 应用服务中间件 API
Node.js搭建REST API实战:从基础到部署
【7月更文挑战第18天】通过以上步骤,你可以将你的Node.js REST API从开发环境顺利迁移到生产环境,并利用各种工具和技术来确保应用的稳定性、安全性和可扩展性。
|
6天前
|
安全 Java API
Nest.js 实战 (三):使用 Swagger 优雅地生成 API 文档
这篇文章介绍了Swagger,它是一组开源工具,围绕OpenAPI规范帮助设计、构建、记录和使用RESTAPI。文章主要讨论了Swagger的主要工具,包括SwaggerEditor、SwaggerUI、SwaggerCodegen等。然后介绍了如何在Nest框架中集成Swagger,展示了安装依赖、定义DTO和控制器等步骤,以及如何使用Swagger装饰器。文章最后总结说,集成Swagger文档可以自动生成和维护API文档,规范API标准化和一致性,但会增加开发者工作量,需要保持注释和装饰器的准确性。
Nest.js 实战 (三):使用 Swagger 优雅地生成 API 文档
|
8天前
|
机器学习/深度学习 数据采集 前端开发
网络爬虫开发:JavaScript与Python特性的小差异
我们以前写JavaScript的代码时,在遇到了发送请求时,都是需要去await的。 但是为什么Python代码不需要这样做呢? 这就是因为JavaScript是异步的,Python是同步的。 JavaScript就需要使用关键词await将异步代码块变为同步代码。
|
16天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的校篮球联赛微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的校篮球联赛微信小程序附带文章源码部署视频讲解等
16 2
|
16天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp二手交易微信小程序的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp二手交易微信小程序的附带文章源码部署视频讲解等
15 1
|
15天前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch(&#39;url&#39;).then(r =&gt; r.json()).then(data =&gt; console.log(data)).catch(err =&gt; console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
|
16天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的传统戏曲推广微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的传统戏曲推广微信小程序附带文章源码部署视频讲解等
13 0
|
16天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的“鼻护灵”微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的“鼻护灵”微信小程序附带文章源码部署视频讲解等
29 0
|
16天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的“财来财往”微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的“财来财往”微信小程序附带文章源码部署视频讲解等
15 0
|
16天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的网上花店微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的网上花店微信小程序附带文章源码部署视频讲解等
13 0