社区
学习
工具库
AI工具
休闲
搜索
简体中文
目录
前言
流程实现
1. OAuth2.0授权
2. 统一支付
3、JS API支付
4、支付通知
首页 微信小程序 微信开发 微信开发之JS API支付的实例详解

微信开发之JS API支付的实例详解

Y2J
Y2J
May 03, 2017 am 11:08 AM

关键字：微信支付 微信支付v3 jsapi支付 统一支付 Native支付 prepay_id 

本文介绍微信支付下的jsapi实现流程

前言

微信支付现在分为v2版和v3版，2014年9月10号之前申请的为v2版，之后申请的为v3版。V3版的微信支付没有paySignKey参数。v2的相关介绍请参考方倍工作室的其他文章。本文介绍的微信支付v3。

流程实现

1. OAuth2.0授权

JSAPI 支付前需要调用 登录授权接口获取到用户的 Openid 。所以需要做一次授权，这次授权是不弹出确认框的。
其实质就是在用户访问

http://www.fangbei.org/wxpay/js_api_call.php
登录后复制

时跳转到

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8888888888888888&redirect_uri=http://www.fangbei.org/wxpay/js_api_call.php&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect
登录后复制

以此来获得code参数，并根据code来获得授权access_token及openid

其实现的详细流程可参考 微信公众平台开发（71）OAuth2.0网页授权

在微信支付的Demo中，其代码为

 1 //使用jsapi接口 2 $jsApi = new JsApi_pub(); 3  4 //=========步骤1：网页授权获取用户openid============ 5 //通过code获得openid 6 if (!isset($_GET['code'])) 7 { 8     //触发微信返回code码 9     $url = $jsApi->createOauthUrlForCode(WxPayConf_pub::JS_API_CALL_URL);10     Header("Location: $url"); 
11 }else12 {13     //获取code码，以获取openid14     $code = $_GET['code'];15     $jsApi->setCode($code);16     $openid = $jsApi->getOpenId();17 }
登录后复制

这一步的最终结果就是获得了当前用户的openid

ou9dHt0L8qFLI1foP-kj5x1mDWsM
登录后复制

2. 统一支付

统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单，返回预支付订单号的接口，目前微信支付所有场景均使用这一接口
统一支付中以下参数从配置中获取，或由类自动生成，不需要用户填写

$this->parameters["appid"] = WxPayConf_pub::APPID;//公众账号ID$this->parameters["mch_id"] = WxPayConf_pub::MCHID;//商户号$this->parameters["spbill_create_ip"] = $_SERVER['REMOTE_ADDR'];//终端ip        $this->parameters["nonce_str"] = $this->createNoncestr();//随机字符串$this->parameters["sign"] = $this->getSign($this->parameters);//签名
登录后复制

在JSAPI支付中，另外填写以下参数

//统一支付接口中，trade_type为JSAPI时，openid为必填参数！$unifiedOrder->setParameter("openid","$openid");//商品描述$unifiedOrder->setParameter("body","方倍工作室");//商品描述
//自定义订单号，此处仅作举例$timeStamp = time();$out_trade_no = WxPayConf_pub::APPID."$timeStamp";$unifiedOrder->setParameter("out_trade_no","$out_trade_no");//商户订单号 $unifiedOrder->setParameter("total_fee","1");//总金额$unifiedOrder->setParameter("notify_url",WxPayConf_pub::NOTIFY_URL);//通知地址 $unifiedOrder->setParameter("trade_type","JSAPI");//交易类型
登录后复制

其他为选填参数

//非必填参数，商户可根据实际情况选填
//$unifiedOrder->setParameter("sub_mch_id","XXXX");//子商户号  
//$unifiedOrder->setParameter("device_info","XXXX");//设备号 
//$unifiedOrder->setParameter("attach","XXXX");//附加数据 
//$unifiedOrder->setParameter("time_start","XXXX");//交易起始时间
//$unifiedOrder->setParameter("time_expire","XXXX");//交易结束时间 
//$unifiedOrder->setParameter("goods_tag","XXXX");//商品标记 
//$unifiedOrder->setParameter("openid","XXXX");//用户标识
//$unifiedOrder->setParameter("product_id","XXXX");//商品ID
登录后复制

这些参数最终组成了这样的xml数据，

<xml>
  <openid><![CDATA[ou9dHt0L8qFLI1foP-kj5x1mDWsM]]></openid>
  <body><![CDATA[方倍工作室]]></body>
  <out_trade_no><![CDATA[wx88888888888888881414411779]]></out_trade_no>
  <total_fee>1</total_fee>
  <notify_url><![CDATA[http://www.fangbei.org/wxpay/notify_url.php]]></notify_url>
  <trade_type><![CDATA[JSAPI]]></trade_type>
  <appid><![CDATA[wx8888888888888888]]></appid>
  <mch_id>10012345</mch_id>
  <spbill_create_ip><![CDATA[61.50.221.43]]></spbill_create_ip>
  <nonce_str><![CDATA[60uf9sh6nmppr9azveb2bn7arhy79izk]]></nonce_str>
  <sign><![CDATA[2D8A96553672D56BB2908CE4B0A23D0F]]></sign></xml>
登录后复制

将这些数据提交给统一支付接口

https://api.mch.weixin.qq.com/pay/unifiedorder
登录后复制

将获得返回 如下数据

<xml>
  <return_code><![CDATA[SUCCESS]]></return_code>  
  <return_msg><![CDATA[OK]]></return_msg>  
  <appid><![CDATA[wx8888888888888888]]></appid>  
  <mch_id><![CDATA[10012345]]></mch_id>  
  <nonce_str><![CDATA[Be8YX7gjCdtCT7cr]]></nonce_str>  
  <sign><![CDATA[885B6D84635AE6C020EF753A00C8EEDB]]></sign>  
  <result_code><![CDATA[SUCCESS]]></result_code>  
  <prepay_id><![CDATA[wx201410272009395522657a690389285100]]></prepay_id>  
  <trade_type><![CDATA[JSAPI]]></trade_type> </xml>
登录后复制

其中包含了最重要的预支付ID参数，prepay_id，值为 

wx201410272009395522657a690389285100
登录后复制

3、JS API支付

前面的准备工作做好了以后，JS API根据prepay_id生成jsapi支付参数
生成代码如下

//=========步骤3：使用jsapi调起支付============$jsApi->setPrepayId($prepay_id);$jsApiParameters = $jsApi->getParameters();
登录后复制

生成的json数据如下

{
    "appId": "wx8888888888888888",
    "timeStamp": "1414411784",
    "nonceStr": "gbwr71b5no6q6ne18c8up1u7l7he2y75",
    "package": "prepay_id=wx201410272009395522657a690389285100",
    "signType": "MD5",
    "paySign": "9C6747193720F851EB876299D59F6C7D"
}
登录后复制

在微信浏览器中调试起js接口，代码如下

<html><head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title>微信安全支付</title>
    <script type="text/javascript">
        //调用微信JS api 支付
        function jsApiCall()
        {
            WeixinJSBridge.invoke(                &#39;getBrandWCPayRequest&#39;,                <?php echo $jsApiParameters; ?>,                function(res){
                    WeixinJSBridge.log(res.err_msg);                    //alert(res.err_code+res.err_desc+res.err_msg);                }
            );
        }        function callpay()
        {            if (typeof WeixinJSBridge == "undefined"){                if( document.addEventListener ){
                    document.addEventListener(&#39;WeixinJSBridgeReady&#39;, jsApiCall, false);
                }else if (document.attachEvent){
                    document.attachEvent(&#39;WeixinJSBridgeReady&#39;, jsApiCall); 
                    document.attachEvent(&#39;onWeixinJSBridgeReady&#39;, jsApiCall);
                }
            }else{
                jsApiCall();
            }
        }    </script></head><body>
    </br></br></br></br>
    <p align="center">
        <button style="width:210px; height:30px; background-color:#FE6714; border:0px #FE6714 solid; cursor: pointer;  color:white;  font-size:16px;" type="button" onclick="callpay()" >贡献一下</button>
    </p></body></html>
登录后复制

当用户点击“贡献一下”按钮时，将弹出微信支付插件，用户可以开始支付。

4、支付通知

支付成功后，通知接口中也将收到支付成功的xml通知

<xml>
  <appid><![CDATA[wx8888888888888888]]></appid>  
  <bank_type><![CDATA[CFT]]></bank_type>  
  <fee_type><![CDATA[CNY]]></fee_type>  
  <is_subscribe><![CDATA[Y]]></is_subscribe>  
  <mch_id><![CDATA[10012345]]></mch_id>  
  <nonce_str><![CDATA[60uf9sh6nmppr9azveb2bn7arhy79izk]]></nonce_str>  
  <openid><![CDATA[ou9dHt0L8qFLI1foP-kj5x1mDWsM]]></openid>  
  <out_trade_no><![CDATA[wx88888888888888881414411779]]></out_trade_no>  
  <result_code><![CDATA[SUCCESS]]></result_code>  
  <return_code><![CDATA[SUCCESS]]></return_code>  
  <sign><![CDATA[0C1D7F2534F1473247550A5A138F0CEB]]></sign>  
  <sub_mch_id><![CDATA[10012345]]></sub_mch_id>  
  <time_end><![CDATA[20141027200958]]></time_end>  
  <total_fee>1</total_fee>  
  <trade_type><![CDATA[JSAPI]]></trade_type>  
  <transaction_id><![CDATA[1002750185201410270005514026]]></transaction_id> </xml>
登录后复制

notify_url收到以后，再返回确认成功消息给微信服务器

<xml>
  <return_code><![CDATA[SUCCESS]]></return_code></xml>
登录后复制

以上是微信开发之JS API支付的实例详解的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
3 周前 By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前 By DDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前 By DDD
节省R.E.P.O.解释（并保存文件）
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制
4 周前 By DDD
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7563
15
CakePHP 教程
1385
52
steam的账户名称是什么格式
84
11
win11激活密钥永久
61
19
NYT连接提示和答案
28
99
显示更多
Related knowledge
微信支付密码忘记了怎么找回 微信支付密码忘记了怎么找回 Feb 23, 2024 pm 09:40 PM

微信中用户可以输入支付密码来购物，那么支付密码忘记了怎么找回呢？用户们需要我的-服务-钱包-支付设置-忘记支付密码就能恢复。这篇支付密码忘记找回方法介绍就能告诉大家具体的操作方法，下面就是详细介绍，赶紧看看吧！微信使用教程微信支付密码忘记了怎么找回答：我的-服务-钱包-支付设置-忘记支付密码具体方法：1、首先点击我的。2、点击里面的服务。3、点击里面的钱包。4、找到支付设置。5、点击忘记支付密码。6、输入自己的信息验证。7、然后输入新的支付密码就可以更改了。

美团外卖怎么设置微信支付 设置微信付款的方法 美团外卖怎么设置微信支付 设置微信付款的方法 Mar 12, 2024 pm 10:34 PM

　　美团外卖app软件内提供的美食小吃店铺非常多，而且所有的手机用户都是通过账号登录的。添加个人的收货地址以及联系电话，享受最便捷的外卖服务。打开软件首页，即可输入商品关键词，在线搜索就能找到相对应的商品结果，上下滑动选购下单即可，平台也会根据用户提供的配送地址，推荐周边附近数十家好评超高的店铺，还能设置不同的支付方式，一键下单完成订单即可，骑手第一时间安排配送速度非常快，还有不同金额的外卖红包领取使用，现在小编在线详细为美团外卖用户们带来设置微信付款的方法。　　1选择好商品后，提交订单，点击立

闲鱼可以用微信支付吗 改成微信付款的方法 闲鱼可以用微信支付吗 改成微信付款的方法 Mar 12, 2024 pm 12:19 PM

　　大家没事的时候，都是会选择逛逛闲鱼这一平台的，大家都能够发现这一平台上，是有着大量的一些商品的存在，都能够让大家看到各种各样的的一些二手的宝贝，虽然是二手的产品，但是这一些产品的质量，绝对都是没有任何的问题，所以大家都能够放心的选购，价格都是特别的实惠，都还是能让大家面对面的与这一些卖家们进行交流沟通，进行一些讲价的操作，完全都是可以的，只要大家谈的妥当的话，那么你们就能够选择进行交易，且大家在这里付款的时候，想要进行微信付款，但是好像平台上是不允许，具体情况如何，跟着小编一起来看看吧。闲鱼

阿里巴巴怎么用微信付款_阿里巴巴1688用微信支付方法 阿里巴巴怎么用微信付款_阿里巴巴1688用微信支付方法 Mar 20, 2024 pm 05:51 PM

阿里巴巴1688是采购批发网，里面的东西要比淘宝便宜很多。那么阿里巴巴怎么用微信付款呢？小编整理了一些相关内容分享给大家，有需要的朋友可以来看看哦。阿里巴巴怎么用微信付款答案：暂不能使用微信付款；1、我们在购买商品的页面中我们点击其中的【更换支付方式】2、然后在弹出的页面中我们可以到只有【支付宝、分阶段付款、收银台】可以选择；

微信支付申请退款的步骤分享 微信支付申请退款的步骤分享 Mar 25, 2024 pm 06:31 PM

1、首先我们需要打开手机上的微信APP，然后点击登录微信账号，这样就进入了微信的首页。2、在微信首页点击右下角的【我】按钮，再选择【支付】选项，我们点击进入支付页面。3、进入【支付】页面后点击【钱包】选项进入，在【钱包】页面点击右上角的【账单】。

推荐：优秀JS开源人脸检测识别项目 推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

滴滴出行怎么设置微信支付 设置微信支付的方法 滴滴出行怎么设置微信支付 设置微信支付的方法 Mar 13, 2024 pm 01:22 PM

　　滴滴出行app为大家日常出行提供更多方便，想去哪里就去那里，而且所有的滴滴车辆都是随叫随到的，再也不需要焦急等待了，数十个打车红包免费领，出行速度更快。打开软件首页，根据个人的行程安排，输入出发点以及目的地，正下方不同价位的车辆自由选择，一键下单发布行程出去，滴滴司机都是秒接单的，以最快的速度到达指定地点，上车前核对手机号即可，当然支付车费的方式非常多，微信支付宝都可以，但大家通常都是用微信，一键设置支付轻松搞定，现在小编在线仔细一一为滴滴出行用户们带来设置微信支付的方法。　　1、我们在手机

微信分付怎么开通？微信分付开通设置 微信分付怎么开通？微信分付开通设置 Mar 14, 2024 am 10:00 AM

微信是一款由腾讯公司推出的即时通讯应用，支持跨平台、跨运营商的消息发送与接收，功能丰富，包括语音、视频聊天、朋友圈分享等，深受广大用户喜爱。而微信分付则是微信钱包中的一种支付功能，为用户提供更便捷的支付体验。我们一起学习一下微信分付的开通方式吧。微信分付怎么开通？微信分付开通设置1、打开手机微信，点击右下角的【我】，进入个人主页，2、点击【服务】选项。3、然后点击【钱包】图标。4、在【钱包】板块下，点击【分付】进入介绍页面。5、在分付介绍页面下方，点击【查看我的分付额度】按钮。6、认真阅读分付的

See all articles