“ Yuema約嗎？一起學技術，一起成長！他山之石,可以攻玉系列”
程序的世界，就是有坑的地方！分享踩坑的心得與體驗！每天分享一點點！
關注公衆號，可獲取每日分享！小手點點，即可關注！
源代碼獲取
關注公衆號[Yuema約嗎]，回覆“alipay”，獲取完整示例代碼。
今天的小目標是調通支付寶網站支付掃碼支付，從最早的一個對接文檔變成電腦網站支付、手機網站支付、當面付等支付產品，不斷的在變。對接不再是一個單純的技術問題，各種簽約折騰，人在江湖，身不由已！今天完成了網站掃碼支付的掃雷，文章尾部有獲取本次分享的源代碼途徑，可以獲取嘗試。
需求
網站支持支付寶掃碼支付，要求，直接展示出支付寶二維碼，讓客戶能直接掃碼支付。
困境
掃不到一個合適的產品，預期找到的支付產品應該是掃碼支付，但是網站支付、當面付都有些出入。支付寶定義當面付是線下支付產品，這真的是好強勢的支付寶，還管我在哪裏掃碼。網站支付，就直接跳到支付寶了，不符合產品需求。
慣性思維
掃碼支付，先獲取二維碼，再支付。網站支付獲取的一個頁面啊。第一感覺就是先pass掉網站支付，找新出路。實際上錯了，
出路一 當面付
誰挖的坑就找誰，聯繫支付寶客服諮詢了一下，客服說二維收款可以拍當面付的二維碼。
由於是趕緊給支付寶開放平臺的應用開當面付的權限，提示要簽約，拍門臉照片，提申請。照着簽約提示，完成申請。喫完飯回來，通過了。接上，調用支付寶的預生成訂單（當面付）接口，拿到的qrcode.
https://qr.alipay.com/bax02697tajnyczwadpl60d0
坑：這雖然是一個qrcode，但是不是一張圖片！也不是一個iframe。是要把這個連接生成一張圖片。找到一個開源的QRCode.js庫，轉化成功。
曬代碼
<html><head><script src="/jquery/jquery-3.2.1.min.js"></script><script src="/js/qrcode.min.js"></script></head><body><div id="qrcode"></div><div>200001568703071983</div><div><a href="/order/alipay/pay/query?tradeNo=200001568703071983" target="_blank">查詢結果</a></div></body><script type="text/javascript">new QRCode(document.getElementById("qrcode"), "https://qr.alipay.com/bax02725xew4ndcdoxvb2030");</script></html>
後臺代碼
/*** 預生成訂單（當面付）** @param out_trade_no* @param total_amount* @return*/public String precreate(String outTradeNo, String subject, String totalAmount) throws Exception {AlipayClient alipayClient = buildAlipayClient();AlipayTradePrecreateRequest request = new AlipayTradePrecreateRequest();AlipayTradePrecreateModel model = new AlipayTradePrecreateModel();model.setOutTradeNo(outTradeNo);model.setTotalAmount(totalAmount);model.setSubject(subject);model.setBody("這是一個 body這是一個 body這是一個 body這是一個 body這是一個 body這是一個 body這是一個 body這是一個 body這是一個 body");model.setTimeoutExpress("1m");request.setBizModel(model);request.setNeedEncrypt(true);request.setReturnUrl(returnUrl);request.setNotifyUrl(notifyUrl);AlipayTradePrecreateResponse response = alipayClient.certificateExecute(request);// 在這裏檢查訂單的狀態值return response.getQrCode();}
效果圖
體驗地址: https://i.zuime.com/order/alipay/pay/qrcode
當面付的效果能滿足產品需求，需要自己再完善一下樣式，加個支付寶的LOGO。需要前端加點戲。
出路二 網站支付
如果仔細查網站支付的接口文檔，會發現，有參數控制支付頁面的顯示效果，當我們調整爲合適的參數值，就能在iframe裏，顯示一個二維碼大小的窗口，讓用戶有種頁面上拍了個二維碼的真實錯覺。
兩個核心參數
qr_pay_modeqrcode_width
這兩個參數取值爲"4"，200L的時候，效果不錯。先看看效果。
效果地址：https://i.zuime.com/order/alipay/payqr
代碼
/*** 網站支付二維碼模式* @param orderBean* @return* @throws Exception*/public String tradePagePayQr(AlipayOrderBean orderBean) throws Exception {AlipayClient alipayClient = buildAlipayClient();AlipayTradePagePayRequest request = new AlipayTradePagePayRequest();AlipayTradePagePayModel model = new AlipayTradePagePayModel();//request.setReturnUrl(returnUrl);request.setNotifyUrl(notifyUrl);model.setOutTradeNo(orderBean.getOutTradeNo());model.setSubject(orderBean.getSubject());model.setTotalAmount(orderBean.getTotalAmount());model.setBody(orderBean.getBody());model.setProductCode(orderBean.getProductCode());model.setQrPayMode("4");model.setQrcodeWidth(200L);//model.setTimeExpire("2m");model.setTimeoutExpress("2m");request.setBizModel(model);request.setNeedEncrypt(true);return alipayClient.pageExecute(request).getBody();}
小結：
實現網站掃碼支付，可以採用支付寶的網站支付產品或當面付產品，當面付的二維碼是自主生成，靈活性更強；網站支付中二維碼模式是支付寶返回的一個完整的HTML頁面，靈活性更低，簡單粗暴，需要使用iframe來承載。如果個性化需求不強烈，網站掃碼支付可以使用支付寶的網站支付產品，傳參的時候，調整爲二維碼模式。
源代碼獲取
關注公衆號[Yuema約嗎]，回覆“alipay”，獲取完整示例代碼。
相關閱讀
支付寶RSA2支付|小實驗 接通支付回調與支付通知接口 return & notify 完美踩坑，記錄一次心酸旅行時光碼農生活
支付寶RSA2支付&轉帳接口集成續集|繼續拿jblog當實驗田練習支付寶RSA2集成 & 網銀直連 直連網銀 轉賬到銀行卡下線了
jblog集成RSA2支付寶接口經驗分享 | 無坑不支付 證書最繞人 | 螞蟻沙盒更愁人
作者：鍾代麒
出處：http://www.jishudao.com/
版權歸作者所有，轉載請註明出處
