2. 程式人生 > >電商專案day18(微信支付)

電商專案day18(微信支付)

阿新 • • 發佈：2019-01-04

今日目標:

二維碼的簡介

二維碼的入門demo

微信平臺支付介面呼叫

檢測支付狀態

支付日誌

一.二維碼簡介以及入門demo

1.簡介:

二維碼又稱 QR Code，QR 全稱 Quick Response，是一個近幾年來移動裝置上超流行的一種編碼方式，它比傳統的 Bar Code 條形碼能存更多的資訊，也能表示更多的資料類

2.優勢

    資訊容量大, 可以容納多達 1850 個大寫字母或 2710 個數字或 500 多個漢字
 應用範圍廣, 支援文字,聲音,圖片,指紋等等...
 容錯能力強, 即使圖片出現部分破損也能使用
 成本低, 容易製作

3.二維碼的容錯級別

L 級（低） 7％的碼字可以被恢復。
M 級（中） 的碼字的 15％可以被恢復。
Q 級（四分）的碼字的 25％可以被恢復。
H 級（高） 的碼字的 30％可以被恢復。

4.二維碼的生成外掛qrious

qrious 是一款基於 HTML5 Canvas 的純 JS 二維碼生成外掛。通過 qrious.js 可以快速生成各種二維碼，你可以控制二維碼的尺寸顏色，還可以將生成的二維碼進行 Base64 編碼。

5.入門demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="js/qrious.min.js"></script>
<body>
<img id="qrious">
</body>
<script type="text/javascript">
    var qr = window.qr = new QRious({
        element: document.getElementById('qrious'),
        size: 250,
        value: 'http://www.baidu.com'
    })
</script>
</html>

匯入qrious的js外掛

二.微信支付簡介

微信掃碼支付的申請步驟:

1.註冊公眾號(型別:服務號)

2.認證公眾號

認證後才能申請  一次300

3.提交申請微信支付材料

登入公眾平臺，點選左側選單【微信支付】，開始填寫資料等待稽核，稽核時間為 1-5個工作日內。

4.開戶成功,登陸商戶平臺進行驗證

資料稽核通過後，請登入聯絡人郵箱查收商戶號和密碼，並登入商戶平臺填寫財付通備付金打的小額資金數額，完成賬戶驗證。

5.線上簽署協議

本協議為線上電子協議，簽署後方可進行交易及資金結算，簽署完立即生效。

開發文件簡介:

網址:

https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_5

我們介紹掃碼支付:native

兩種模式介紹:

第一種模式:微信平臺返回支付的二維碼 

詳細的業務流程,檢視維信開發文件

第二種模式:微信平臺返回一個路徑,我們在客戶端,自己生成,二維碼

同一下單api:

介面連結:

URL地址：https://api.mch.weixin.qq.com/pay/unifiedorder

因為需要的引數很多,我們必須要封裝的引數都要封裝

注：引數值用XML轉義即可，CDATA標籤用於說明資料不被XML解析器解析。

查詢訂單:

應用場景:

該介面提供所有微信支付訂單的查詢，商戶可以通過查詢訂單介面主動查詢訂單狀態，完成下一步的業務邏輯。

需要呼叫查詢介面的情況：

  1. ◆ 當商戶後臺、網路、伺服器等出現異常，商戶系統最終未接收到支付通知；
  2. ◆ 呼叫支付介面後，返回系統錯誤或未知交易狀態情況；
  3. ◆ 呼叫付款碼支付API，返回USERPAYING的狀態；
  4. ◆ 呼叫關單或撤銷介面API之前，需確認支付狀態；

介面連結:

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

SDK安裝:

維信需要xml格式的資料,我們可以通過維信提供的sdk 來轉

所以我們可以組裝成map格式的資料,然後通過通過SDK轉化為xml格式的字串

我們通過原生的HttpClient來發送請求

在這我們通過工具類來組裝,底層我們封裝

 

三.電商二維碼生成

思路分析:我們首先封裝,微信介面需要的資料,注意微信要的是xml格式的資料,我們必須通過微信的sdk將map格式轉化為xml格式,然後通過httpClient傳送請求,獲得資料同樣轉化為map格式

後臺程式碼:

@Service
@Transactional
public class PayServiceImpl implements PayService {

    //將需要的引數通過value值注入
    @Value("${appid}")
    private String appid;
    @Value("${partner}")
    private String partner;
    @Value("${partnerkey}")
    private String partnerkey;
    @Value("${notifyurl}")
    private String notifyurl;//回撥地址
    @Override
    public Map<String, Object> createNative(String out_trade_no, String total_fee) throws Exception {

        //1.組裝請求引數
        Map<String,String> paramMap = new HashMap<>();
        paramMap.put("appid",appid);
        paramMap.put("mch_id",partner);
        paramMap.put("nonce_str", WXPayUtil.generateNonceStr());//獲得隨機字串
        paramMap.put("tbody","品優購");
        paramMap.put("tout_trade_no",out_trade_no);//訂單編號
        paramMap.put("total_fee",total_fee);//總費用
        paramMap.put("spbill_create_ip","127.0.0.1");//本地ip
        paramMap.put("tnotify_url",notifyurl);//通知地址
        paramMap.put("trade_type","Native");//支付型別
        paramMap.put("product_id","1");//這個顯示不是必須傳的,但是native支付至必須傳
        //將map格式的資料轉換為xml資料格式
        String xmlParam = WXPayUtil.generateSignedXml(paramMap, partnerkey);
        //2.基於httpClient傳送請求
        HttpClient httpClient = new HttpClient("URL地址：https://api.mch.weixin.qq.com/pay/unifiedorder");
        httpClient.setHttps(true);
        httpClient.setXmlParam(xmlParam);//設定請求引數
        httpClient.post();
        //3.處理相應結果
        String content = httpClient.getContent();
        System.out.println(content);
        Map<String, String> resultMap = WXPayUtil.xmlToMap(content);//轉為map資料
        //我們必須自己封裝返回給前臺
        Map<String,Object> map = new HashMap<>();
        map.put("code_url",resultMap.get("code_url"));
        map.put("out_trade_no",out_trade_no);
        map.put("total_fee",total_fee);
        
        return map;
    }

 controller層:

public class PayController {

    /**
     * 生成二維碼
     */
    @Reference
    private PayService payService;
    @RequestMapping("/createNative")
    public Map<String,Object> createNative(){
        IdWorker idWorker = new IdWorker();
        try {
            //注意我們在這先是寫死的id號
           return payService.createNative(idWorker.nextId()+"","1");
        } catch (Exception e) {
            e.printStackTrace();
            return new HashMap<>();
        }
    }
}

前臺程式碼:

 //控制層 
app.controller('payController' ,function($scope,$controller   ,payService){
	
	$controller('baseController',{$scope:$scope});//繼承

    //生成二維碼
    $scope.createNative=function () {
        payService.createNative().success(function (response) {
            //接受後端傳過來的支付訂單號和支付金額
            $scope.out_trade_no=response.out_trade_no;
            $scope.total_fee=response.total_fee;

            //基於qrious生成二維碼
            new QRious({
                element: document.getElementById('qrious'),
                size: 300,
                value: response.code_url,
                level:'H'
            })

        })
    }

});

service層:

//服務層
app.service('payService',function($http){

    //讀取列表資料繫結到表單中
    this.createNative=function(){
        return $http.get('pay/createNative.do');
    }

});

四.檢測支付狀態

注意:我們在實現過程中,在二維碼生成的時候就繼續呼叫  查詢狀態

 /**
     * 呼叫查詢狀態介面
     * @param out_trade_no
     * @return
     */
    @Override
    public Map queryPayStatus(String out_trade_no) throws Exception {
        //1.組裝請求資料
        //1、組裝請求引數
        Map<String,String> paramMap = new HashMap<>();
        paramMap.put("appid",appid);
        paramMap.put("mch_id",partner);
        paramMap.put("nonce_str", WXPayUtil.generateNonceStr());
        paramMap.put("out_trade_no",out_trade_no);
        String xmlParam = WXPayUtil.generateSignedXml(paramMap, partnerkey);
        //2.傳送HttpClient請求
        HttpClient httpClient = new HttpClient("https://api.mch.weixin.qq.com/pay/orderquery");
        httpClient.setHttps(true);
        httpClient.setXmlParam(xmlParam);//設定請求引數
        httpClient.post();
        //3.返回相應資料
        String content = httpClient.getContent();
        System.out.println(content);
        Map<String, String> xmlMap = WXPayUtil.xmlToMap(content);
        return xmlMap;
    }
/**
     * 查詢支付狀態
     */
    @RequestMapping("/queryPayStatus")
    public Result queryPayStatus(String out_trade_no){
        try {

            int count=0;

            while (true){
                //每隔3秒呼叫一次
                Thread.sleep(3000);

                //超過5分鐘，跳轉迴圈（支付超時）
                count++;
                if(count>100){
                    return new Result(false,"timeout");
                }

                Map resultMap = payService.queryPayStatus(out_trade_no);
                //判斷交易狀態
                if(resultMap.get("trade_state").equals("SUCCESS")){

                    //支付成功後，更新訂單和支付日誌狀態
                    //payService.updateStatus(out_trade_no, (String) resultMap.get("transaction_id"));


                    //支付成功
                    return new Result(true,"支付成功");
                }
            }


        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false,"支付失敗");
        }
    }
}

前臺程式碼:

 //查詢支付狀態
    $scope.queryPayStatus=function () {
        payService.queryPayStatus($scope.out_trade_no).success(function (response) {
            if(response.success){
                //支付成功
                location.href="paysuccess.html#?money="+$scope.total_fee;
            }else {
                if(response.message=="timeout"){
                    //支付超時
                    $scope.createNative();
                }
                //支付失敗
                location.href="payfail.html";
            }
        })
    }
    //獲取支付金額
    $scope.getMoney=function () {
        $scope.money=$location.search()["money"];
    }

//查詢支付狀態
    this.queryPayStatus=function (out_trade_no) {
        return $http.get('pay/queryPayStatus.do?out_trade_no='+out_trade_no);
    }

注意:路由傳參前面新增#號     

五.支付日誌

需求分析以及思路介紹
        1、儲存訂單時，插入一條支付操作。（前提：線上支付）tb_pay_log  此時：訂單和支付日誌中的中的支付狀態都是"未支付"
        
        
        2、當用戶微信掃碼支付成功後，修改訂單和支付日誌中的中的支付狀態，為"已支付"，修改支付時間為當前時間。
    
    tb_order tb_order_item
    
    
    tb_pay_log    支付日誌表，記錄支付行為
    
        以下欄位，是儲存訂單時，記錄一筆支付資訊，需要操作的欄位
          `out_trade_no` varchar(30) NOT NULL COMMENT '支付訂單號',   //分散式儲存 idWorker
          `create_time` datetime DEFAULT NULL COMMENT '建立日期',
          `total_fee` bigint(20) DEFAULT NULL COMMENT '支付金額（分）',
          `trade_state` varchar(1) DEFAULT NULL COMMENT '交易狀態', //未支付狀態
          `user_id` varchar(50) DEFAULT NULL COMMENT '使用者ID',      
          `order_list` varchar(200) DEFAULT NULL COMMENT '訂單編號列表',  //一筆支付可能對應多筆訂單  1,2,3
          `pay_type` varchar(1) DEFAULT NULL COMMENT '支付型別',  //微信支付
        
        
        以下欄位是微信支付成功後，需要更新的欄位：
        `pay_time` datetime DEFAULT NULL COMMENT '支付完成時間',
        `transaction_id` varchar(30) DEFAULT NULL COMMENT '交易號碼',  //微信返回，支付成功後需要更新的資料
        `trade_state` varchar(1) DEFAULT NULL COMMENT '交易狀態',
    
    儲存訂單的同時，生成一筆支付。
        儲存多個訂單，也只生成一筆支付。
    
    
    線上支付時，儲存支付日誌
    
    讀取支付日誌，顯示支付訂單號和支付金額
    
    支付成功後，修改訂單和支付日誌狀態
    `pay_time` datetime DEFAULT NULL COMMENT '支付完成時間',
    
    `trade_state` varchar(1) DEFAULT NULL COMMENT '交易狀態',  已支付：2
     `transaction_id` varchar(30) DEFAULT NULL COMMENT '交易號碼',

首先我們在儲存訂單是,插入一條支付操作,使用者儲存支付的所有資訊

//如果是線上支付則,儲存一筆訂單
		if (order.getPaymentType().equals("1")){
        	//建立payLog物件
			TbPayLog payLog = new TbPayLog();
			/*	`out_trade_no` varchar(30) NOT NULL COMMENT '支付訂單號',   //分散式儲存 idWorker
		  `create_time` datetime DEFAULT NULL COMMENT '建立日期',
		  `total_fee` bigint(20) DEFAULT NULL COMMENT '支付金額（分）',
		  `trade_state` varchar(1) DEFAULT NULL COMMENT '交易狀態', //未支付狀態
		  `user_id` varchar(50) DEFAULT NULL COMMENT '使用者ID',
		  `order_list` varchar(200) DEFAULT NULL COMMENT '訂單編號列表',  //一筆支付可能對應多筆訂單  1,2,3
		  `pay_type` varchar(1) DEFAULT NULL COMMENT '支付型別',  //微信支付*/
			payLog.setOutTradeNo(idWorker.nextId()+"");
			payLog.setCreateTime(new Date());
			payLog.setTotalFee((long)(totalMoney*100));//轉化為分
			payLog.setTradeState("1");
			payLog.setUserId(order.getUserId());
			//[1 , 2 , 3]我們通過切割的方式
			payLog.setOrderList(ids.toString().replace("[","").replace("]","").replace(" ",""));
			payLog.setPayType("1");
			//儲存
			payLogMapper.insert(payLog);
			//將日誌儲存redis中
			redisTemplate.boundHashOps("payLog").put(order.getUserId(),payLog);

交易成功後跟新支付日誌

 @Autowired
    private TbPayLogMapper payLogMapper;
    @Autowired
    private TbOrderMapper orderMapper;
    /**
     * 跟新支付日誌狀態
     * @param out_trade_no
     * @param transaction_id
     */
    @Override
    public void updateStatus(String out_trade_no, String transaction_id) {
        //跟新日誌狀態
        TbPayLog payLog = payLogMapper.selectByPrimaryKey(out_trade_no);
        payLog.setPayTime(new Date());
        payLog.setTradeState("2");
        payLog.setTransactionId(transaction_id);
        payLogMapper.updateByPrimaryKey(payLog);

        //跟新訂單狀態

        String orderList = payLog.getOrderList();
        String[] split = orderList.split(",");
        for (String orderId : split) {
            TbOrder tbOrder = orderMapper.selectByPrimaryKey(Long.parseLong(orderId));
            tbOrder.setStatus("2");//已支付
            tbOrder.setPaymentTime(new Date());
        }
        //清除當前redis中關聯支付日誌的資訊
        redisTemplate.boundHashOps("payLog").delete(payLog.getUserId());
    }

注意:最後一定把存在redis中的關聯支付日誌資訊刪除

從新打包,測試

 

相關推薦

電商專案day18(微信支付)

今日目標: 二維碼的簡介 二維碼的入門demo 微信平臺支付介面呼叫 檢測支付狀態 支付日誌 一.二維碼簡介以及入門demo 1.簡介: 二維碼又稱 QR Code，QR 全稱 Quick Response，是一個近幾年來移動裝置上超流行的一種編碼方式，它比傳統的

Java專案呼叫微信支付到指定銀行卡

public static EnterpriceToCustomer WXPayToBC(String encBankAcctNo, String encBankAcctName, String bank_code, String desc, String amount) throws Ex

“雙十一”眾生相：電商狂造 微信折腰

“90後”女大學生放棄北大保送復旦！她到底有多厲害？　　東北網12月6日訊(記者 姜姍姍) 在東北農業大學有這樣一個自強不息的女大學生，她放棄北大直博被保送到復旦大學藥學院。她本科期間獲得國家獎學金、國家勵志獎學金、新東方自強獎學金、第一屆全國大學生生命聯賽國家二等獎……被評為黑龍江省“三好學生”。她就是生命

教你再小的小門店也能社交電商-神手微信管理營銷軟體

神手微信管理營銷CRM教你再小的小門店也能社交電商！       現在大家有沒有發現一種現象，你去水果店買水果，去餐廳吃飯，他們除了放支付二維碼外，很多前臺還會再放一個二維碼，用來添加個人微信的或者公眾號的。 你結賬的時候，他們會引導你加，然後可以有優惠打折什麼的。

電商專案之掃碼支付

支付重要細節： 1、主動輪詢和回撥的區別 2、避免單邊賬 3、同步請求的加簽和驗證簽名   4、回撥的驗證（簽名、金額、訂單號、訂單狀態、交易狀態、商戶id） 5、過濾掉重複的通知 6、一定要驗證並確保可接受的非同步通知是支付寶發出的

電商第三方支付微信支付

先接入微信介面：支付方式：使用者掃描二維碼支付介面型別：掃碼支付之模式二 先copy一份模式二的業務流程時序圖業務流程說明： （1）商戶後臺系統根據使用者選購的商品生成訂單。 （2）使用者確認支付後呼叫微信支付【統一下單API】生成預支付交易； （3）微信支付系統收到請求後生

微信小程式電商專案實戰-前言

各位CSDN的朋友，我們都知道，現在微信小程式電商平臺特別火爆，所以我將以一個生鮮電商專案為例，為大家講述微信小程式的實戰化開發，價值幾萬元的成熟專案，你可千萬不要錯過哦。另外大家可以關注我微信公眾號和

微信小程式電商專案商品詳情頁開發實戰之資料繫結與事件應用

各位CSDN的朋友，我們都知道，現在微信小程式電商平臺特別火爆，所以我將以一個生鮮電商專案為例，為大家講述微信小程式的實戰化開發，價值幾萬元的成熟專案，你可千萬不要錯過哦。另外大家可以關注我微信公眾號和

電商平臺接入第三方支付介面之微信支付接入訂單系統

邊做邊更新……………… 先接入微信介面： 支付方式：使用者掃描二維碼支付 介面型別：掃碼支付之模式二 先copy一份模式二的業務流程時序圖 業務流程說明： （1）商戶後臺系統根據使用者

全面詳細的微信支付思路流程以及專案程式碼分享

之前一直沒有接觸微信支付這方面的業務，現在因專案需要，需要用到此功能，開始各種百度，稍微瞭解了一下，微信支付分為： 支付寶支付、APP支付、掃碼支付，但是對於H5支付和支付寶支付現在還是沒有徹底搞明白他兩的區別，希望大佬們可以稍微提點一二，小弟先在此謝過！ 大體思路如下： 1】.獲取co

【Django REST framework電商專案筆記】第10章 購物車, 訂單和支付寶支付功能（上）

購物車功能實現 在交易 trade 應用上 在商品詳情頁點選加入購物車，彈出提示框（去結算、繼續購物），右上角會新增商品到購物車 這是從後臺取出來的資料，可以顯示商品、數量、總價等資訊 新增商品，在商品數量上加一，直接更新數量即可 注意shoppingcart

【Django REST framework電商專案筆記】第10章 購物車, 訂單和支付寶支付功能（中）

訂單管理介面實現 首先理解一下購物車和訂單之間的關係。 我們現在是做了一種最簡單的實現就是把購物車中所有商品進行一起的結算 orderInfo model 裡面有一個order_sn是不能為空的。 點選去結算之後為它生成一個訂單。然後讓使用者去支付頁面進行支付。

【Django REST framework電商專案筆記】第10章 購物車, 訂單和支付寶支付功能（下）

Pycharm遠端除錯程式碼 第三方支付和第三方登入都有一個回撥的URl。一般指向伺服器的ip地址。 要完成能夠通過pycharm去除錯遠端的伺服器，回撥時就可以除錯程式碼。 如何將程式碼上傳到遠端伺服器 1、點選tools下的deploy點選configura

vue專案使用微信公眾號支付總結

微信公眾號支付 1. 使用jssdk呼叫微信支付，具體檢視開發文件； 使用的vuex，在mutations中 wechatPay (state, data) { state.payObject = data console.log('微信支付開始請求')

電商專案之對接支付寶的DEMO

第一步：在支付寶官網下載一個TradePayDemo的原始碼 第二步：設定支付寶閘道器（進入支付寶沙箱網站https://openhome.alipay.com/platform/appDaily.htm?tab=info） open_api_domain = https://openapi

電商專案之支付模組

一、功能 1、支付寶對接 2、支付回撥 3、查詢支付狀態 二、目標 1、熟悉支付寶對接核心文件，調通支付寶支付功能官方的demo 2、解析支付寶SDK對接原始碼 3、RSA1和RSA2驗證簽名及加解密 4、避免支付寶重複通知和資料校驗 5、natapp外網穿透和t

電商專案之將支付寶整合到專案中(重點)

第一步：將demo中的zbbinfo.properties拷貝到resources裡面 第二步：將demo的lib下的4個sdk拷貝到專案的的WEB-INF下的lib下 第三步：通過pom.xml配置依賴的jar包 注：和官方的demo的版本保持一致（不用通過拷貝lib下面的jar包）

Android移動開發-在Android專案裡整合呼叫微信支付開發的實現

如今移動支付比較火，尤其是在中國的市場。移動支付也稱為手機支付，就是允許使用者使用其移動終端（通常是手機）對所消費的商品或服務進行賬務支付的一種服務方式。單位或個人通過移動裝置、網際網路或者近距離感測直接或間接向銀行金融機構傳送支付指令產生貨幣支付與資金轉

H5調起微信支付功能

需要 con 返回 alert list 訂單 團隊 eve window 第一步：需要後端返回需要的以下參數： 該操作是你提交完訂單信息後在接口所返回的json， 其次將其存儲起來，我用的localStorage var payParams = {

支付開發填坑記之微信支付

wiki index 傳輸 系統 外網 ttr throw div union 微信支付，支持的支付方式比較多：有掃碼支付，刷卡支付，APP支付和公眾號支付。其中，APP和網站上最常用的就是APP支付和公眾號支付。前者集成在APP中，後者主要是為微信用戶提供了另一種支付方式