微信开发之JS API支付的实例详解-pembangunan WeChat-php.cn

Jadual Kandungan

前言

流程实现

1. OAuth2.0授权

2. 统一支付

3、JS API支付

4、支付通知

Rumah

applet WeChat

pembangunan WeChat

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

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

Salin selepas log masuk

时跳转到

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

Salin selepas log masuk

以此来获得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[&#39;code&#39;])) 7 { 8     //触发微信返回code码 9     $url = $jsApi->createOauthUrlForCode(WxPayConf_pub::JS_API_CALL_URL);10     Header("Location: $url"); 
11 }else12 {13     //获取code码，以获取openid14     $code = $_GET[&#39;code&#39;];15     $jsApi->setCode($code);16     $openid = $jsApi->getOpenId();17 }

Salin selepas log masuk

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

ou9dHt0L8qFLI1foP-kj5x1mDWsM

Salin selepas log masuk

2. 统一支付

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

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

Salin selepas log masuk

在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");//交易类型

Salin selepas log masuk

其他为选填参数

//非必填参数，商户可根据实际情况选填
//$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

Salin selepas log masuk

这些参数最终组成了这样的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>

Salin selepas log masuk

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

https://api.mch.weixin.qq.com/pay/unifiedorder

Salin selepas log masuk

将获得返回如下数据

<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>

Salin selepas log masuk

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

wx201410272009395522657a690389285100

Salin selepas log masuk

3、JS API支付

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

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

Salin selepas log masuk

生成的json数据如下

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

Salin selepas log masuk

在微信浏览器中调试起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>

Salin selepas log masuk

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

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>

Salin selepas log masuk

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

<xml>
  <return_code><![CDATA[SUCCESS]]></return_code></xml>

Salin selepas log masuk

Atas ialah kandungan terperinci 微信开发之JS API支付的实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang lalu By DDD

Penjimatan di R.E.P.O. Dijelaskan (dan simpan fail)

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows - Cara Mencari Orang Panda

4 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7564

Tutorial CakePHP

1386

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

101

Tunjukkan Lagi

Related knowledge

Bagaimana untuk mendapatkan semula kata laluan pembayaran WeChat anda jika anda terlupa Feb 23, 2024 pm 09:40 PM

Dalam WeChat, pengguna boleh memasukkan kata laluan pembayaran mereka untuk membuat pembelian, tetapi bagaimanakah mereka mendapatkan kata laluan pembayaran mereka jika mereka terlupa? Pengguna perlu pergi ke My-Services-Dompet-Tetapan Pembayaran-untuk mendapatkan semula kata laluan pembayaran mereka jika mereka terlupa. Pengenalan tentang cara mendapatkan semula kata laluan pembayaran anda jika anda terlupa kata laluan ini akan memberitahu anda kaedah operasi khusus Berikut ialah pengenalan terperinci, jadi sila lihat! Tutorial penggunaan WeChat. Bagaimana untuk mencari kata laluan pembayaran WeChat jika anda terlupa. 2. Klik pada perkhidmatan di dalam. 3. Klik pada dompet di dalam. 4. Cari tetapan pembayaran. 5. Klik Lupa kata laluan pembayaran. 6. Masukkan maklumat anda sendiri untuk pengesahan. 7. Kemudian masukkan kata laluan pembayaran baharu untuk menukarnya.

Bagaimana untuk menyediakan pembayaran WeChat untuk Meituan Takeout Bagaimana untuk menyediakan pembayaran WeChat Mar 12, 2024 pm 10:34 PM

Terdapat banyak kedai makanan dan makanan ringan yang disediakan dalam aplikasi bawa pulang Meituan, dan semua pengguna telefon mudah alih log masuk melalui akaun mereka. Tambah alamat penghantaran peribadi anda dan nombor telefon untuk menikmati perkhidmatan bawa pulang yang paling mudah. Buka halaman utama perisian, masukkan kata kunci produk, dan cari dalam talian untuk mencari hasil produk yang sepadan Leret ke atas dan ke bawah untuk memilih dan membuat pesanan Platform ini juga akan mengesyorkan berpuluh-puluh restoran berdekatan dengan ulasan tinggi berdasarkan alamat penghantaran yang diberikan oleh pengguna. Kedai juga boleh menyediakan kaedah pembayaran yang berbeza Anda boleh membuat pesanan dengan satu klik untuk menyelesaikan pesanan dengan serta-merta dan kelajuan penghantaran adalah sangat cepat amaun untuk digunakan Sekarang editor dalam talian secara terperinci untuk pengguna takeout Meituan Kami menunjukkan kepada anda cara untuk menyediakan pembayaran WeChat. 1. Selepas memilih produk, serahkan pesanan dan klik Sekarang

Bolehkah Xianyu membayar dengan WeChat Bagaimana untuk menukar kepada kaedah pembayaran WeChat? Mar 12, 2024 pm 12:19 PM

Apabila semua orang tiada apa-apa untuk dilakukan, mereka akan memilih untuk menyemak imbas platform Xianyu Semua orang boleh mendapati bahawa terdapat sejumlah besar produk pada platform ini, yang membolehkan semua orang melihat pelbagai produk terpakai. produk tangan, sama sekali tidak ada masalah dengan kualiti produk ini, jadi semua orang boleh membelinya dengan yakin Harganya sangat berpatutan, dan mereka masih membenarkan semua orang untuk bersemuka dengan produk ini untuk berkomunikasi dan menjalankan beberapa operasi tawar-menawar harga Selagi semua orang berunding dengan betul, maka anda boleh memilih untuk menjalankan transaksi, dan apabila semua orang membayar di sini, mereka ingin membuat pembayaran WeChat, tetapi nampaknya platform Ia tidak dibenarkan editor untuk mengetahui situasi tertentu. Xianyu

Cara membayar dengan WeChat di Alibaba_Cara membayar dengan WeChat di Alibaba 1688 Mar 20, 2024 pm 05:51 PM

Alibaba 1688 ialah laman web pembelian dan borong, dan barangan di sana jauh lebih murah daripada Taobao. Jadi bagaimana Alibaba menggunakan pembayaran WeChat? Editor telah menyusun beberapa kandungan yang relevan untuk dikongsi dengan anda Rakan yang memerlukan boleh datang dan melihat. Bagaimana Alibaba menggunakan pembayaran WeChat? Jawapan: Pembayaran WeChat tidak boleh digunakan buat masa ini; kepada [Alipay, bayaran berperingkat] , juruwang] boleh dipilih;

Berkongsi langkah untuk memohon bayaran balik dengan WeChat Pay Mar 25, 2024 pm 06:31 PM

1. Mula-mula, kita perlu membuka APP WeChat pada telefon mudah alih, dan kemudian klik untuk log masuk ke akaun WeChat, supaya kita memasuki halaman utama WeChat. 2. Klik butang [Saya] di penjuru kanan sebelah bawah halaman utama WeChat, kemudian pilih pilihan [Pembayaran] Kami klik untuk memasuki halaman pembayaran. 3. Selepas memasuki halaman [Pembayaran], klik pilihan [Dompet] untuk masuk dan klik [Bil] di penjuru kanan sebelah atas halaman [Dompet].

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Apr 03, 2024 am 11:55 AM

Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web

Bagaimana untuk menyediakan pembayaran WeChat pada Didi Chuxing Bagaimana untuk menyediakan pembayaran WeChat Mar 13, 2024 pm 01:22 PM

Aplikasi Didi Chuxing menyediakan lebih banyak kemudahan untuk perjalanan harian semua orang. Buka halaman utama perisian, masukkan titik permulaan dan destinasi mengikut jadual perjalanan peribadi anda, dan bebas memilih daripada kenderaan dengan julat harga yang berbeza terus di bawah tiba di lokasi yang ditetapkan secepat mungkin Untuk lokasi, hanya semak nombor telefon bimbit anda sebelum menaiki bas Sudah tentu, terdapat banyak cara untuk membayar tambang, termasuk WeChat dan Alipay, tetapi semua orang biasanya menggunakan WeChat. Mudah untuk menyediakan pembayaran dengan satu klik Sekarang editor dalam talian untuk membayar Didi dengan berhati-hati satu demi satu pengguna membawa kaedah menyediakan pembayaran WeChat. 1. Kami menggunakan telefon bimbit

Bagaimana untuk mengaktifkan WeChat Pay? Tetapan pengaktifan WeChat Pay Mar 14, 2024 am 10:00 AM

WeChat ialah aplikasi pemesejan segera yang dilancarkan oleh Tencent Ia menyokong pemesejan dan penerimaan silang platform dan pengendali Ia mempunyai fungsi yang kaya, termasuk suara, sembang video, dan perkongsian dalam Moments. WeChat Pay ialah fungsi pembayaran dalam WeChat Wallet, memberikan pengguna pengalaman pembayaran yang lebih mudah. Mari belajar cara mengaktifkan WeChat Pay. Bagaimana untuk mengaktifkan WeChat Pay? Tetapan Pengaktifan WeChat Pay 1. Buka WeChat pada telefon mudah alih anda, klik [Saya] di sudut kanan bawah untuk memasuki laman utama peribadi, 2. Klik pilihan [Perkhidmatan]. 3. Kemudian klik ikon [Dompet]. 4. Di bawah bahagian [Dompet], klik [Split Payment] untuk memasuki halaman pengenalan. 5. Di bahagian bawah halaman pengenalan pembayaran, klik butang [Lihat had pembayaran saya]. 6. Baca edaran dengan teliti

See all articles