社群
學習
工具庫
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 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
2 週前 By DDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

記事本++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信箱登陸入口在哪裡
7542
15
CakePHP 教程
1381
52
steam的賬戶名稱是什麼格式
83
11
win11激活密鑰永久
55
19
NYT連接提示和答案
21
86
顯示更多
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

大家沒事的時候，都是會選擇逛逛閒魚這一平台的，大家都能夠發現這一平台上，是有著大量的一些商品的存在，都能夠讓大家看到各種各樣的一些二手的寶貝，雖然是二手的產品，但是這一些產品的質量，絕對都是沒有任何的問題，所以大家都能夠放心的選購，價格都是特別的實惠，都還是能讓大家面對面的與這一些賣家們進行交流溝通，進行一些講價的操作，完全都是可以的，只要大家談的妥當的話，那麼你們就能夠選擇進行交易，且大家在這裡付款的時候，想要進行微信付款，但是好像平台上是不允許，具體情況如何，跟著小編一起來看看吧。閒魚

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

1.首先我們需要打開手機上的微信APP，然後點選登入微信帳號，這樣就進入了微信的首頁。 2.在微信首頁點選右下角的【我】按鈕，再選擇【付款】選項，我們點選進入支付頁面。 3.進入【付款】頁面後點選【錢包】選項進入，在【錢包】頁面點選右上角的【帳單】。

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

阿里巴巴1688是採購批發網，裡面的東西要比淘寶便宜很多。那麼阿里巴巴怎麼能用微信付款呢？小編整理了一些相關內容分享給大家，有需要的朋友可以來看看喔。阿里巴巴怎麼用微信付款答案：暫不能使用微信付款；1、我們在購買商品的頁面中我們點擊其中的【更換支付方式】2、然後在彈出的頁面中我們可以到只有【支付寶、分階段付款、收銀台】可以選擇；

建議：優秀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