微信支付 JS API支付接口详解_神马软件站
您的位置： >
微信支付 JS API支付接口详解
一、JS API支付接口（getBrandWCPayRequest）
微信JS API只能在微信内置浏览器中使用，其他浏览器调用无效。微信提供getBrandWCPayRequest接口供商户前端网页调用，调用之前微信会鉴定商户支付权限，若商户具有调起支付的权限，则将开始支付流程。这里主要介绍支付前的接口调用规则，支付状态消息通知机制请参加下文。接口需要注意：所有传入参数都是字符串类型！
getBrandWCPayRequest参数如下图所示。
字符串类型
商户注册具有支付权限的公众号成功后即可获得；
字符串类型，32个字节以下
商户生成，从日00:00:00至今的秒数，即当前的时间，且最终需要转换为字符串形式；
随机字符串
字符串类型，32个字节以下
商户生成的随机字符串；
订单详情扩展字符串
字符串类型，4096个字节以下
商户将订单信息组成该字符串，具体组成方案参见接口使用说明中package组包帮劣；由商户按照规范拼接后传入；
字符串类型，参数取值"SHA1"
按照文档中所示填入，目前仅支持SHA1；
字符串类型
商户将接口列表中的参数按照指定方式行签名，签名方式使用signType中标示的签名方式，具体签名方案参见接口使用说明中签名帮劣；由商户按照规范签名后传入；
getBrandWCPayRequest返回值如下表所示。
get_brand_wcpay_request:ok 支付成功
get_brand_wcpay_request:cancel 支付过程中用户取消
get_brand_wcpay_request:fail 支付失败
JS API的返回结果 get_brand_wcpay_request:ok 仅在用户成功完成支付时返回。由于前端交互复杂，get_brand_wcpay_request:cancel 或者 get_brand_wcpay_request:fail 可以统一处理为用户遇到错误或者主动放弃，不必细化区分。
二、JS API支付实现
下面代码是微信官方提供的JS API支付demo
include_once("WxPayHelper.php");
$commonUtil = new CommonUtil();
$wxPayHelper = new WxPayHelper();
$wxPayHelper-&setParameter("bank_type", "WX");
$wxPayHelper-&setParameter("body", "test");
$wxPayHelper-&setParameter("partner", "");
$wxPayHelper-&setParameter("out_trade_no", $commonUtil-&create_noncestr());
$wxPayHelper-&setParameter("total_fee", "1");
$wxPayHelper-&setParameter("fee_type", "1");
$wxPayHelper-&setParameter("notify_url", "htttp://");
$wxPayHelper-&setParameter("spbill_create_ip", "127.0.0.1");
$wxPayHelper-&setParameter("input_charset", "GBK");
&script language="javascript"&
function callpay()
WeixinJSBridge.invoke('getBrandWCPayRequest',&?php echo $wxPayHelper-&create_biz_package(); ?&,function(res){
WeixinJSBridge.log(res.err_msg);
alert(res.err_code+res.err_desc+res.err_msg);
&button type="button" onclick="callpay()"&wx pay test&/button&
将其中的微信支付参数修改成自己所申请得到的，然后将网页上传到微信支付目录下，给测试账号回复该网页地址。用户就可以实现一次JS API支付。
三、效果演示
下面是官方DEMO修改后，发起支付的页面图。
确认交易：
输入支付密码：
交易成功：
以上就是对微信支付JS API 资料的整理，希望能帮到大家，谢谢支持！微信支付仅能成功调用一次问题的解决方法（Android）
作者：xinluqishi
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了微信支付仅能成功调用一次问题的解决方法,感兴趣的小伙伴们可以参考一下
本人使用Android开发有一段时间了，但是本身没有系统学，而且多年专注服务端开发，总觉得因为项目需要接触Android移动端开发只是暂时的，所以没有太上心，结果碰到一个大难题折腾了一天，最后被有经验的小伙伴提示了一下才迎刃而解，感觉无地自容的同时，又非常窃喜，毕竟跨过一个一个的坎，就成长了，在这里丢人等换个地方就成牛了也未可知，哈哈。闲言就絮叨到这里，赶紧分享：&
微信支付调用接口整体的流程有必要简述一下（目前网上的资料大部分都是适配微信支付旧版的代码，最新的微信支付官方文档中并没有服务端的Demo，而且一些接口都变了，参数名称也有变化，希望小伙伴们能够注意）：
&1. 微信支付不需要访问获取Token那个接口了；
&2. 直接访问 获得Prepayid，参数以 xml格式传输就可以；
&3. 有了Prepayid再加上一些其他的官网中提到的参数就可以调起客户端的微信支付接口了；&
此时就出现问题了：第一次调用非常OK，看到了微信支付界面，有自己生成的订单号还有金额，但是放弃支付后再进入，就连微信客户端都调用不起来了，换个订单也是这样，换个手机也是第一单可以调用微信客户端，展示订单号，金额，但是第二单说什么也不行了，定格在自己APP的支付界面，不报错，任何反应也没有。&
原因就出现在这里： 我们申请微信支付的时候，有个地方会让你填写你的应用Key：&
申请以后你看到的就是图片上的应用签名，这个签名是如何生成的在这里有介绍：
问题是这个Key的生成是跟正式发布时打包做签名有关的，我们把Android应用公开release的时候会将这个Key加进去作为应用的key防止被恶意覆盖等等，我们在申请注册微信应用的时候必然要提供正式生成的这个应用的Key给微信官网。&
因此这件事就被忽略了，以至于在开发的过程中，我们在自己的本地运行打包，访问微信服务器调起支付的时候，微信第一次拿到了我们的应用发来的请求，仿佛建立了连接开始了心跳，&
这时微信会异步地根据留存的应用包名和应用Key与你现在发送的包名和应用Key进行验证，我相信即使你第一次进行付款，也是很有可能不成功的，但是这块我就没有验证了，因为这个时候已经有验证结果回调回来了。&
所以跟运维人员拿了Release时把Key打到APK安装包里的命令，进行包含正式Key的打包，命令如下：&
``` cordova build --release android
jarsigner -verbose -sigalg SHA256withRSA -digestalg SHA1 -keystore E:\android-release-key.keystore E:\项目名称\platforms\android\build\outputs\apk\android-release-unsigned.apk android-release-key.keystore
//运行完这条命令需要输入密码
zipalign -v 4 E:\项目名称\platforms\android\build\outputs\apk\android-release-unsigned.apk a.apk
问题就解决了。每次访问都能顺利地调用微信支付了。 不得不感慨下，微信用这一手也严格控制了在他那里注册的应用，注册一个Key用一个，再想用，那么重新走流程吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具微信公众平台开发 JS-SDK开发（图像接口实例） - 博客 - 水墨寒的博客微信公众平台开发 JS-SDK开发（图像接口实例）作者：阅读：33975更新于 22:53
本文并非是对的复制，而是通过一个简单的例子来更深入的了解使用微信JS-SDK，具体文档请参考官方说明文档《》。微信公众平台面向开发者开放微信内网页开发工具包（微信JS-SDK），通过微信JS-SDK提供的11类接口集，开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力，还可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。微信JS-SDK提供的11类接口（分享接口、图像接口、音频接口、智能接口、设备信息、界面操作、地理位置、微信扫一扫、微信小店、微信卡券、微信支付）在使用方式上完全相同，唯一需要注意的是，这11类接口并不是都开放的，有些接口非认证用户是没有权限的，比如分享接口，小店接口、卡券接口、支付接口则必须通过微信认证后才能使用。具体权限问题可参考你的。
开放必须项
开发者ID (应用ID和应用密匙)
在公众号（服务号）设置——功能设置（JS接口安全域名）中填写已备案的域名
服务器环境
简单的后台知识，如PHP
本文将通过PHP（只会PHP）来演示图像接口（其他接口使用方式相似）
首先在微信开发者平台下载它的，链接中包含php、java、nodejs以及python的示例代码供第三方参考，这里使用php包。我把php文件夹重命名为weixin放在网站根目录下，如图：
这里我们只修改sample.php.代码如下：
//设置报错级别，忽略警告，设置字符
error_reporting(E_ALL || ~E_NOTICE);
header("Content-type:text/ charset=utf-8");
require_once "jssdk.php";
$jssdk = new JSSDK("AppID", "AppSecret");
$signPackage = $jssdk-&GetSignPackage();
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&!--因为在手机中，所以添加viewport--&
&meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"&
&title&微信测试&/title&
&button id="weixin" style="display:margin: 2em auto"&微信接口测试&/button&
&script src="http://res./open/js/jweixin-1.0.0.js"&&/script&
wx.config({
debug: true, //调试阶段建议开启
appId: '&?php echo $signPackage["appId"];?&',
timestamp: &?php echo $signPackage["timestamp"];?&,
nonceStr: '&?php echo $signPackage["nonceStr"];?&',
signature: '&?php echo $signPackage["signature"];?&',
jsApiList: [
* 所有要调用的 API 都要加到这个列表中
* 这里以图像接口为例
"chooseImage",
"previewImage",
"uploadImage",
"downloadImage"
var btn = document.getElementById('weixin');
wx.ready(function () {
// 在这里调用 API
btn.onclick = function(){
wx.chooseImage ({
success : function(res){
var localIds = res.localI
// 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
然后将weixin目录上传到你的服务器上，该服务器域名必须和你在微信设置中的域名一致。我上传到了根目录，通过firefox提供的页面二维码功能，在微信上扫一扫即可测试。截图如下：
图1-4分别为一进去（因为开启了debug），所以会显示你成功调用接口；图二表示点击了按钮后，将弹出微信拍照或者从照片中选择；图三是我点击了从手机相册中选择后调出你的手机相册列表；图四是我选择了其中某一张照片，点击完成后返回的该照片信息（图片的本地ID）
接着，来测试一下上传接口，修改HTML代码如下：
&button id="weixin" style="display:margin: 2em auto"&微信接口测试&/button&
&button id="upload" style="display:margin: 2em auto"&上传接口测试&/button&
&button id="getServices" style="display:margin: 2em auto"&获取已上传的图片&/button&
&script src="http://res./open/js/jweixin-1.0.0.js"&&/script&
wx.config({
debug: true, //调试阶段建议开启
appId: '&?php echo $signPackage["appId"];?&',
timestamp: &?php echo $signPackage["timestamp"];?&,
nonceStr: '&?php echo $signPackage["nonceStr"];?&',
signature: '&?php echo $signPackage["signature"];?&',
jsApiList: [
* 所有要调用的 API 都要加到这个列表中
* 这里以图像接口为例
"chooseImage",
"previewImage",
"uploadImage",
"downloadImage"
var btn = document.getElementById('weixin');
//定义images用来保存选择的本地图片ID，和上传后的服务器图片ID
var images = {
localId: [],
serverId: []
wx.ready(function () {
// 在这里调用 API
btn.onclick = function(){
wx.chooseImage ({
success : function(res){
images.localId = res.localI
//保存到images
// 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
document.getElementById('upload').onclick = function(){
var i = 0, len = images.localId.
function wxUpload(){
wx.uploadImage({
localId: images.localId[i], // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
//将上传成功后的serverId保存到serverid
images.serverId.push(res.serverId);
if(i & len){
wxUpload();
wxUpload();
document.getElementById('getServices').onclick = function(){
alert(images.serverId);
重新上传到服务器，刷新Firefox，生成新二维码，微信扫描，截图如下
图1是修改后的页面；图2是点击上传按钮后的loading提示（isShowProgressTips: 1, // 默认为1，显示进度提示）；图3是上传成功后返回的该图片的serverId；图4是点击获取已上传的图片按钮后返回的已上传的图片的信息；上传图片有效期3天，可用微信多媒体接口下载图片到自己的服务器，此处获得的 serverId 即 media_id
通过以上两个简单的例子，基本可以掌握微信JS-SDK的使用方法。11个接口使用方式基本相同，你可以一一尝试。官方的说明是：
通过ready接口处理成功验证
通过error接口处理失败验证
所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：
success：接口调用成功时执行的回调函数。
fail：接口调用失败时执行的回调函数。
complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。
cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。
具体可参考官方API。
&延伸阅读&发布观点加载更多...更多公众号：itheima666黑马程序员行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，共享IT知识及行业资讯。最新文章相关推荐对这篇文章不满意？您可以继续搜索：百度：搜狗：感谢您阅读【Android开发 】微信支付不成功的几个原因，本文可能来自网络，如果侵犯了您的相关权益，请联系管理员。QQ:温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(9816)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'[原创][已解决]微信支付接口，提示：调用支付jsapi缺少参数: $key0$',
blogAbstract:'[已解决]微信支付接口，提示：调用支付jsapi缺少参数: $key0$最近在做c#微信支付功能。webForm的支付没有问题了。我用了几个小时改成MVC模式。然后在微信调用的时候提示“调用支付jsapi缺少参数: $key0$”下面是 官方给的 帮助文档。\n',
blogTag:'微信支付',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:2,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'-1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}