淺析微信支付：公衆平臺卡券功能開通、HTML5線上發券（JS-SDK接口）、查看卡券詳情

時間  2019-11-08
標籤 淺析 微信 支付 公衆 平臺 功能 開通 html5 html 線上 sdk 接口 查看 詳情 欄目 HTML5 简体版
原文   原文鏈接

本文是【淺析微信支付】系列文章的第十六篇，主要講解如何使用微信公衆平臺的卡券功能、如何使用HTML5在網頁展現用戶領券以及微信卡券和商戶平臺代金券的關係。html

淺析微信支付系列已經更新十六篇了喲～，沒有看過的朋友們能夠看一下哦。前端

淺析微信支付：開通免充值產品功能及如何進行接口升級指引git

淺析微信支付：商戶平臺代金券或立減優惠開通、指定用戶代金券發放、查詢等github

淺析微信支付：商戶平臺開通現金紅包、指定用戶發放、紅包記錄查詢redis

淺析微信支付：支付驗收示例和驗收指引json

淺析微信支付：如何使用沙箱環境測試api

前幾篇文章主要介紹瞭如何在【微信商戶平臺】使用代金券和滿減優惠折扣等產品功能，有很多小夥伴說到，【微信公衆平臺】也有一個卡券功能，那麼他們有什麼差異呢？這個卡券功能該如何使用？本文會給你們一個解釋。緩存

二者的差異

首先，咱們來解釋商戶平臺和微信平臺各自優惠券的區別，若是有人試過，那麼應該知道，二者是不通用的，不通用的，不通用的！！！安全

至於這裏要重點標識不通用？由於在開通微信卡券功能後，在商戶平臺也會出現微信卡券對應優惠券信息，雖然沒有發券的功能，只是展現，但若是咱們走接口發券，就會出現 發券失敗，不支持發送xxx類型的優惠券 的錯誤，這時就尷尬了；bash

還沒完，由於平臺不一樣，因此微信卡券和支付優惠券發送、領取的方式（接口）也是不一樣的，包括用戶領取時跳轉到的頁面也不相同，這個也請你們注意。

因此，咱們須要將這兩種券做爲兩種不一樣種類的券來處理就能夠了。

公衆平臺卡券功能開通

登錄公衆平臺 https://mp.weixin.qq.com，點擊左側[功能-添加功能插件]，進入插件庫頁面，進入[卡券功能]，能夠開通卡券功能。

申請條件： 必須開通微信支付功能！！！！

功能介紹： 卡券功能，是提供給商戶或第三方的一套派發優惠券，經營管理會員的工具，可在公衆平臺或經過接口建立卡券，多種渠道投放給用戶，用戶用券時需覈銷卡券，覈銷後可查看數據、進行對帳。

主要能力：

●朋友共享的優惠券——可利用社交鏈快速擴散傳播，一人領券，本人和朋友皆可看到並使用。查看視頻介紹

●普通優惠券——傳統優惠券電子版，領取後僅本人可見可用，支持多種類型：折扣券、代金券、兌換券、團購券、優惠券。

●會員卡——支持折扣、積分等玩法，並提供會員管理、數據報表等豐富工具，便於商戶高效運營會員。

●微信買單——無需進行微信支付開發，同時與會員卡，代金券，折扣券打通，爲你積累用戶消費數據，用於經營參考

●儲值功能——會員卡商戶無需申請，可直接經過API接口，使用「餘額展現」功能，將會員餘額顯示在微信會員卡首頁。具備預付卡資質的商家可申請「儲值」功能，申請成功後，可經過API接口設置此入口，幫助會員經過微信支付爲會員卡充值。

●第三方代制模式——經商戶受權後，可代子商戶快速接入並使用卡券功能，支持經過公衆平臺或API接口實現該功能。

官方開發文檔地址：

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141229
複製代碼

這裏就已知小夥伴們已經開通卡券功能，如何手動建立優惠券能夠在公衆平臺上操做，很簡單，這裏就不說了，本文主要講如何使用接口的方式來建立卡券、用戶領取、查詢卡券詳情。

微信卡券指引

官方文檔地址：

https://mp.weixin.qq.com/cgi-bin/readtemplate?t=cardticket/faq_tmpl&type=info&token=&lang=zh_CN#0
複製代碼

下面是卡券功能開通指引對應的申請渠道、申請條件：

卡券功能開通指引

有須要的小夥伴能夠通讀一下上面官方文檔，讀完以後就會對微信卡券有所認識了，差很少基礎業務都能作到心中有數咯。

若是是開發者，直接看下面微信卡券接口文檔就行，畢竟咱們更關心接口相關的信息，官方文檔以下：

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141229
複製代碼

下載卡券資料包：

https://mp.weixin.qq.com/zh_CN/htmledition/comm_htmledition/res/cardticket/wx_card_document.zip?token=&lang=zh_CN
複製代碼

根據官方文檔的步驟，須要整整七步，下面爲具體步驟：

  1. 獲取access_token
  2. 上傳卡券logo
  3. 建立卡券
  4. 建立二維碼投放
  5. 顯示二維碼
  6. 設置測試白名單
  7. 覈銷卡劵

官方的文檔主要是使用了沙箱測試帳號來測試並驗證，關於接口測試號申請能夠經過如下連接來取得：

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
複製代碼

下面咱們來一步步分析接口。

獲取access_token

頁面地址：http://mp.weixin.qq.com/debug/

接口類型：基礎支持

接口列表：獲取access_token接口

注意事項：參數填寫開發者的appid和secret

點擊檢查問題，便可返回access_token，access_token的有效期是兩小時，兩小時以後須從新獲取

接口地址：獲取access_token接口 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

這裏的獲取微信全局access_token接口就不講了，能看到這篇文章的小夥伴應該早就寫過了，哈哈哈。

上傳卡券logo

頁面地址：http://mp.weixin.qq.com/debug/

接口類型：基礎支持

接口列表：上傳圖片素材接口

access_token: 上一步得到的access_token

buffer：你選擇的圖片

點擊檢查問題，便可獲取圖片url，在下一步建立卡劵的參數中須要

接口地址：上傳圖片接口 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1451025056

此接口就是上傳商戶logo，能夠得到一個卡券logo連接，基本上就用一次，若是不想使用此接口來上傳logo，能夠在公衆平臺手動建立優惠券時上傳logo，上傳後能夠在logo圖片上鼠標右鍵-複製圖片路徑，也是同樣的（不想調接口的能夠用這個歪招哈哈哈哈）。

建立卡券

頁面地址：http://mp.weixin.qq.com/debug/

接口類型：卡劵接口

接口列表：建立卡劵接口

access_token:第一步得到的access_token

建立卡券接口地址：

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1451025056
複製代碼

如下爲調用接口示例：

https://api.weixin.qq.com/card/create?access_token=xxx
複製代碼

JSON示例：

{
    "card": {
        "card_type": "CASH", 
        "cash": {
            "base_info": {
                "logo_url": "https://mmbiz.qlogo.cn/mmbiz_png/E5Q3G4ku9nf7UiafOetcAPLyfia7kdWWWauHukNN7ZXnggtZcTzEPGa8IUDiaLIv14EkNdPvmbCFyHibh0G8tia7Eibw/0?wx_fmt=png", // 此處是上傳logo的圖片地址
                "pay_info": {
                    "swipe_card": {
                        "use_mid_list": [
                            "xxx" // 商戶號
                        ], 
                        "create_mid": "xxx", // 商戶號
                        "is_swipe_card": true
                    }
                }, 
                "brand_name": "測試代金券", 
                "code_type": "CODE_TYPE_NONE", 
                "title": "111", 
                "color": "Color090",  // 主題顏色
                "service_phone": "18888888888", 
                "description": "不可與其餘優惠同享如需團購券發票，請在消費時向商戶提出", 
                "date_info": {
                    "type": "DATE_TYPE_FIX_TIME_RANGE", 
                    "begin_timestamp": 1536768000,  // 開始時間
                    "end_timestamp": 1536940800 // 結束時間
                }, 
                "can_share": false, 
                "center_title": "當即使用", 
                "center_app_brand_user_name": "gh_7195ea80d2e6@app", 
                "center_app_brand_pass": "pages/index/index", 
                "can_give_friend": false, 
                "sku": {
                    "quantity": 500000
                }, 
                "get_limit": 30, 
                "custom_url_name": "當即使用", 
                "custom_url": "http://www.qq.com", 
                "custom_url_sub_title": "6個漢字tips", 
                "promotion_url_name": "更多優惠", 
                "promotion_url": "http://www.qq.com"
            }, 
            "advanced_info": {
                "use_condition": {
                    "accept_category": "鞋類", 
                    "reject_category": "阿迪達斯", 
                    "can_use_with_other_discount": true, 
                    "least_cost": "51"
                }, 
                "abstract": {
                    "abstract": "微信餐廳推出多種新季菜品，期待您的光臨", 
                    "icon_url_list": [
                        "http://mmbiz.qpic.cn/mmbiz/p98FjXy8LacgHxp3sJ3vn97bGLz0ib0Sfz1bjiaoOYA027iasqSG0sjpiby4vce3AtaPu6cIhBHkt6IjlkY9YnDsfw/0"
                    ]
                }, 
                "text_image_list": [
                    {
                        "image_url": "http://mmbiz.qpic.cn/mmbiz/p98FjXy8LacgHxp3sJ3vn97bGLz0ib0Sfz1bjiaoOYA027iasqSG0sjpiby4vce3AtaPu6cIhBHkt6IjlkY9YnDsfw/0", 
                        "text": "此菜品精選食材，以獨特的烹飪方法，最大程度地刺激食 客的味蕾"
                    }, 
                    {
                        "image_url": "http://mmbiz.qpic.cn/mmbiz/p98FjXy8LacgHxp3sJ3vn97bGLz0ib0Sfz1bjiaoOYA027iasqSG0sj piby4vce3AtaPu6cIhBHkt6IjlkY9YnDsfw/0", 
                        "text": "此菜品迎合大衆口味，老小皆宜，養分均衡"
                    }
                ], 
                "time_limit": [
                    {
                        "type": "MONDAY", 
                        "begin_hour": 0, 
                        "end_hour": 10, 
                        "begin_minute": 10, 
                        "end_minute": 59
                    }, 
                    {
                        "type": "HOLIDAY"
                    }
                ], 
                "business_service": [
                    "BIZ_SERVICE_FREE_WIFI", 
                    "BIZ_SERVICE_WITH_PET", 
                    "BIZ_SERVICE_FREE_PARK", 
                    "BIZ_SERVICE_DELIVER"
                ]
            }, 
            "reduce_cost": 5
        }
    }
}
複製代碼

經過以上接口和參數能夠建立一個優惠券信息，json示例也可使用官方的，這裏有幾個問題須要重點說一下：

  1. use_mid_list 商戶號須要填寫本商戶的
  2. color 顏色能夠根據文檔中選擇
  3. begin_timestamp、end_timestamp 這兩個時間很是重要，首先結束時間必須大於開始時間，而且須要大於必定的限度，測試時最好跨度大於一天；還須要注意的是時間格式必須是10位數值，例如：1536768000，其餘格式會報錯。
  4. time_limit 下的值根據文檔中的要求填寫
  5. sku、get_limit 參數按要求填寫
  6. logo_url 使用微信官方的logo圖片地址

注意事項：date_info中用的是Unix時間戳，注意把begin_timestamp修改小於當前時間，end_timestamp修改爲今天以後的時間，這樣在後面覈銷卡劵測試才能成功

建立二維碼投放

頁面地址：mp.weixin.qq.com/debug

接口類型：卡劵接口

接口列表：建立二維碼ticket接口

access_token：第一步得到的access_token

接口文檔地址：

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1451025062
複製代碼

接口調用示例：

https://api.weixin.qq.com/card/qrcode/create?access_token=TOKEN
複製代碼

json參數：

{
    "action_name":"QR_CARD",
    "expire_seconds":1800,
    "action_info":{
        "card":{
            "card_id":"pFS7Fjg8kV1IdDz01r4SQwMkuCKc",
            "code":"198374613512",
            "openid":"oFS7Fjl0WsZ9AMZqrI80nbIq8xrA",
            "is_unique_code":false,
            "outer_str":"12b"
        }
    }
}
複製代碼

顯示二維碼

在上一步的返回中點擊字段show_qrcode_url字段中的連接，便可顯示卡券領取二維碼。 打開微信掃一掃，而後領取卡劵，若是顯示卡劵未經過審覈，那麼須要下一步設置測試白名單，若是能夠領取就忽略第六步。

設置測試白名單

文檔地址：

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1451025062
複製代碼

覈銷卡劵

文檔地址：

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1451025239
複製代碼

注意事項：僅支持審覈經過且在有效期內的卡劵

HTML5網頁發券（JS-SDK）

上面經過二維碼發券的方式，我以爲官方文檔已經解釋清楚了，且接口也比較簡單，因此這裏就不贅述，主要須要講的是這裏的 HTML5網頁發券（JS-SDK），官方文檔連接以下：

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1451025062
複製代碼

HTML5線上發券（JS-SDK接口）

看了上面的圖，小夥伴大概知道是什麼意思了吧，簡單點說，就是用戶在咋們系統H5中點擊按鈕，能夠彈出微信官方的領取優惠券界面，官方的頁面是微信提供的，咱們無需開發，只須要關注如何調用官方的方法便可。

官方解釋以下：微信提供的addCard接口供商戶前端網頁調用，用於將一張或多張卡券添加到用戶卡包

接口地址以下(在如下頁面搜索addCard便可直達)：

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
複製代碼

批量添加卡券接口

上面是添加卡券的接口，咱們重點關注這幾個參數:

  1. cardId：卡券ID，若是是商戶平臺，則是批次ID
  2. cardExt：卡券的擴展參數。需進行 JSON 序列化爲字符串傳入
  3. cardExt>openid：指定領取者的 openid，只有該用戶能領取。 bind_openid 字段爲 true 的卡券必須填寫，bind_openid 字段爲 false 不可填寫。
  4. cardExt>code：用戶領取的 code，僅自定義 code 模式的卡券須填寫，非自定義 code 模式卡券不可填寫
  5. cardExt>nonce_str：隨機字符串，由開發者設置傳入，增強安全性（若不填寫可能被重放請求）。隨機字符串，不長於 32 位。推薦使用大小寫字母和數字，不一樣添加請求的 nonce_str 須動態生成，若重複將會致使領取失敗。
  6. cardExt>signature：簽名，商戶將接口列表中的參數按照指定方式進行簽名,簽名方式使用 SHA1，具體簽名方案參見：卡券簽名
  7. cardExt>timestamp：時間戳，東八區時間,UTC+8，單位爲秒
  8. cardExt>outer_str：領取渠道參數，用於標識本次領取的渠道值。
  9. cardExt>fixed_begintimestamp：卡券在第三方系統的實際領取時間，爲東八區時間戳（UTC+8,精確到秒）。當卡券的有效期類爲 DATE_TYPE_FIX_TERM 時專用，標識卡券的實際生效時間，用於解決商戶系統內起始時間和領取微信卡券時間不一樣步的問題。

根據代金券批次ID獲得組合的cardList

首先，獲取cardList接口須要先獲取access_token，再獲取api_ticket，最後組裝成想要的集合，下面是示例代碼。

根據代金券批次ID獲得組合的cardList:

/**
 * 根據代金券批次ID獲得組合的cardList
 *
 * @param cardId 卡包ID
 * @return cardList
 * @author yclimb
 * @date 2018/9/21
 */
public JSONArray getCardList(String cardId) {
    if (StringUtils.isBlank(cardId)) {
        return null;
    }
    try {

        // 獲取[商戶名稱]公衆號的 access_token
        String accessToken = this.getAccessToken(WXConstants.WX_MINI_PROGRAM_CODE);
        String timestamp = String.valueOf(WXPayUtil.getCurrentTimestamp());
        String nonce_str = WXPayUtil.generateNonceStr();

        // 卡券的擴展參數。需進行 JSON 序列化爲字符串傳入
        JSONObject cardExt = new JSONObject();
        //cardExt.put("code", "");
        //cardExt.put("openid", "");
        //cardExt.put("fixed_begintimestamp", "");
        //cardExt.put("outer_str", "");
        cardExt.put("timestamp", timestamp);
        cardExt.put("nonce_str", nonce_str);

        /**
         * 1.將 api_ticket、timestamp、card_id、code、openid、nonce_str的value值進行字符串的字典序排序。
         * 2.將全部參數字符串拼接成一個字符串進行sha1加密，獲得signature。
         * 3.signature中的timestamp，nonce字段和card_ext中的timestamp，nonce_str字段必須保持一致。
         */
        Map<String, String> map = new HashMap<>(8);
        //map.put("code", "");
        //map.put("openid", "");
        map.put("api_ticket", this.getWxCardApiTicket(accessToken));
        map.put("timestamp", timestamp);
        map.put("card_id", cardId);
        map.put("nonce_str", nonce_str);
        cardExt.put("signature", WXPayUtil.SHA1(WXPayUtil.dictionaryOrder(map, 2)));

        // 卡券對象
        JSONObject cardInfo = new JSONObject();
        cardInfo.put("cardId", cardId);
        cardInfo.put("cardExt", cardExt.toJSONString());

        // 須要添加的卡券列表
        JSONArray cardList = new JSONArray(1);
        cardList.add(cardInfo);

        return cardList;
    } catch (Exception e) {
        WXPayUtil.getLogger().error(e.getMessage(), e);
    }
    return null;
}
複製代碼

獲取微信全局accessToken：

/**
 * 獲取微信全局accessToken
 *
 * @param code 標識
 * @return accessToken
 */
public String getAccessToken(String code) {

    // 取redis數據
    String key = WXConstants.WECHAT_ACCESSTOKEN + code;
    String accessToken = (String) redisTemplate.opsForValue().get(key);
    if (accessToken != null) {
        return accessToken;
    }

    // 經過接口取得access_token
    JSONObject jsonObject = restTemplate.getForObject(MessageFormat.format(WXURL.BASE_ACCESS_TOKEN, WXPayConstants.APP_ID, WXPayConstants.SECRET), JSONObject.class);
    String token = (String) jsonObject.get("access_token");
    if (StringUtils.isNotBlank(token)) {
        // 存儲redis
        redisTemplate.opsForValue().set(key, token, 7000, TimeUnit.SECONDS);
        return token;
    } else {
        log.error("獲取微信accessToken出錯，微信返回信息爲：[{}]", jsonObject.toString());
    }
    return null;
}
複製代碼

獲取卡券 api_ticket 的 api：

/**
 * 獲取卡券 api_ticket 的 api
 * 請求路徑：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={0}&type=wx_card
 *
 * @param access_token token
 * @return api_ticket json obj
 * @author yclimb
 * @date 2018/9/21
 */
public String getWxCardApiTicket(String access_token) {
    if (StringUtils.isBlank(access_token)) {
        return null;
    }
    try {

        // redis key
        String redisKey = RedisKeyUtil.keyBuilder(RedisKeyEnum.IMALL_WXCARD_APITICKET, access_token);

        // 從redis中獲取緩存
        Object obj = redisTemplate.opsForValue().get(redisKey);
        if (obj != null) {
            return obj.toString();
        }

        // 獲取卡券 api_ticket
        String api_ticket = restTemplate.getForObject(WXURL.BASE_API_TICKET, String.class, access_token);
        WXPayUtil.getLogger().info("getWxCardApiTicket:api_ticket:{}", api_ticket);
        if (StringUtils.isBlank(api_ticket)) {
            return null;
        }
        JSONObject jsonObject = JSON.parseObject(api_ticket);
        if (0 != jsonObject.getIntValue("errcode")) {
            return null;
        }

        // 設置到redis中，下次取直接拿緩存便可，防止屢次生成
        String ticket = jsonObject.getString("ticket");
        redisTemplate.opsForValue().set(redisKey, ticket, jsonObject.getIntValue("expires_in"), TimeUnit.SECONDS);

        return ticket;
    } catch (Exception e) {
        WXPayUtil.getLogger().error(e.getMessage(), e);
    }
    return null;
}
複製代碼

以上代碼能夠獲取cardList，將此參數替換到微信官方方法中便可喚起領券頁面；須要注意的是，公衆平臺和商戶平臺的券領取的方式不一樣，這裏是以公衆平臺爲例子，若是小夥伴要用商戶平臺這樣爲用戶發券，是沒法成功的喲。

查看卡券詳情

開發者能夠調用該接口查詢某個card_id的建立信息、審覈狀態以及庫存數量。

接口調用：

HTTP請求方式：POST
URL：https://api.weixin.qq.com/card/get?access_token=TOKEN
參數：card_id，卡券ID
複製代碼

接口文檔(進入連接後查詢 查看卡券詳情 可快速定位)：

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1451025272
複製代碼

此接口官方介紹已經很詳細，這裏就不細講了，你們參考官方文檔便可。

結語

以上爲微信公衆平臺-卡券功能相關的解釋和源碼，小夥伴們必定要注意看看官方文檔哦，具體的源碼能夠看做者的github，裏面對每一個方法有詳細的註釋。

若是小夥伴有遇到解決不了的問題，能夠關注做者微信公衆號，加入討論羣中發出疑問，和小夥伴們一塊兒解決哦～

預告：下一篇文章會講發放獎勵的另外一種方式 公衆平臺-社交立減金活動，敬請期待！！！

​若是想要提早一覽源碼的小夥伴，能夠先看看個人 github，地址以下： ​ ​​https://github.com/YClimb/wxpay-sdk/blob/master/README.md ​

關注做者微信公衆號，點擊下方討論羣，掃碼便可加入微信支付討論羣與小夥伴一塊兒探討哦～

到此本文就結束了，關注公衆號查看更多推送！！！

關注個人公衆號
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程