本文目錄一覽：
微信支付怎麼配置jsapi
微信支付，是微信向有出售物品/提供服務需求的商家提供推廣銷售、支付收款、經營分析的整套解決方案，包括多種支付方式，如付款碼支付、JSAPI支付、小程序支付、APP支付、電腦網站支付、企業微信支付、H5支付，以及多種支付工具，如微信紅包、代金券等。
微信支付配置步驟:
步驟1：註冊支付商戶號
步驟2、秘鑰（32位）
步驟3、上傳證書
步驟4、商戶號新增小程序授權（注意授權狀態是否是成功）
步驟5、公眾號支付、JSAPI開通
登錄小程序後台找到配置管理→支付配置
登錄開通微信支付商戶平台（），在微信支付商戶平台裡面進行查找商戶號和設置API密鑰、下載證書
以下步驟查找上述基礎的內容在哪個地方查找。
步驟1、支付商戶號查找：
（註：登錄商戶號盡量使用360瀏覽器或者谷歌瀏覽器）
進入後在 賬戶中心—商戶信息、可以看到微信支付商戶號、把商戶號記一下，填到後台。
註：首次進入微信支付後台需要下載控制項和操作證書（按照提示一步步操作即可）
步驟二：API密鑰：隨後點擊下面的API安全、設置一下API秘鑰，API密鑰必須是32位字母或數字
註：該處設置秘鑰時看下設置下方的API秘鑰，不要設置APIV3的秘鑰。
註：該處設置下後把新設置的密鑰填到製作後台。
步驟三：證書路徑、密鑰路徑：API秘鑰設置好了之後、點擊下載API證書
（註：該處證書上傳用於退款。退款需要往商戶號里充值錢。）
下載後是一個壓縮包，然後解壓、然後根據名稱分別上傳到證書路徑、密鑰路徑。
步驟四：小程序在公眾號里申請，公眾號里開通的微信支付；該方式需要先登錄商戶號-產品中心-APPID授權管理-新增該小程序的授權。具體如下圖：
如提示已綁定（此步驟跳過）
授權後到微信小程序後台同意授權。如圖：
確保上圖申請單狀態是授權成功。
步驟五：查看微信支付商戶號公眾號支付、JSAPI是否開通。如下圖：（如未開通，點擊開通下，如果沒有公眾號支付可不用管）
（1）公眾號支付開通（如果沒有公眾號支付，此步驟跳過）
（2）JSAPI開通
JS交互微信之JSAPI支付
本篇為 JS交互微信系列篇 的第四篇 微信JSAPI支付 ，記錄在微信內置瀏覽器內用調用微信支付過程。
JSAPI支付是用戶在微信中打開商戶的H5頁面，商戶在H5頁面通過調用微信支付提供的JSAPI介面調起微信支付模塊完成支付。
要擁有兩個賬號：
要開通產品中心的JSAPI支付。然後 產品中心=開發配置=支付配置=公眾號支付配置 綁定支付授權目錄，寫已通過ICP備案的域名。
另外，要在ip白名單中，配置測試地址ip和線上生產地址ip，不然各種回調都會失敗！
由於在微信內支付需要獲取用戶的 openid ，要獲取它則必須通過網頁授權配置。在公微信公眾平台中， 公眾號設置=功能設置=網頁授權域名 中按要求填寫。
在支付流程方面，重點依然都在後端處理，前端方面步驟比較簡單。本文只敘述前端內容。
在將要進入支付的前一頁面，直接接入微信授權，然後跳轉進要支付的那個頁面。舉個例子：有a、b兩個頁面，在b頁面用到支付，b頁面由a頁面跳轉而來。那麼在a頁面跳b頁面的時候，別直接跳轉b的url，而是跳轉到：
{appId}redirect_uri={b.html}response_type=codescope=snsapi_base#wechat_redirect
我們注意到，這裡有這兩個需要自己寫的參數： appid 和 redirect_uri ，意義是：
另外，還有一個注意的點是， b.html這個url我們要進行encode轉碼，不然地址解析可能會出現問題！
上一步執行完後，在微信瀏覽器中，我們會得到一個鏈接，類似：
b.html?code={code}state=#/
在此處，我們得到了一個code值，這就是我們獲取 openid 的憑證了。
獲取方法當然是把值傳給後台，後台去處理啦~
在上一步中，我們拿到code值後，就可以提交一些信息給後端了，比如商品相關屬性、總價等，另外加上code值，傳給後端。後端一頓操作後，返回給前端。我們需要的參數如下（後端返回下面這些參數）：
上個步驟拿到需要交互微信的參數後，就開始調用微信的支付介面了，如下：
至此，調用微信JSAPI來完成在微信內的支付就完成了。
java實現微信支付，通過JSAPI發起支付請求
在config.jsp填 好 在ResponseHandler填下APPKEY 用wxm-pay-api-demo.html或者jsapi.jsp我測試是都可以用.試能用哪個用哪個吧 JS已經搞好了
ResponseHandler,ResponseHandler,payNotifyUrl.jsp都修了..
微信支付後端篇
微信支付系列文章
微信支付-java後端實現
微信支付-vue 前端實現
java demo: 下載地址文章底部
技術棧
Spring boot
java
XML (微信在http協議中數據傳輸方案)
MD5 簽名
微信支付術語
openid (OpenID是公眾號一對一對應用戶身份的標識)
app_id (公眾號id，登錄微信公眾號–開發–基本配置中獲得；)
key (收款商戶後台進行配置，登錄微信商戶平台–賬戶中心–API安全-設置秘鑰，設置32位key值；)
mch_id (收款商家商戶號；)
certPath (API證書, 登錄微信商戶平台–賬戶中心-API安全-下載證書)
後端流程
服務端需要的核心操作, 總共分為以下幾步:
統一下單
前端調起微信支付必要參數 (需加密)
訂單結果主動通知 (回調介面)
查詢訂單結果
結束訂單支付介面（關閉訂單，支付訂單關閉）
代碼
微信總共支持多種語言的sdk, 在官網可以下載例子, java程序也可以引入微信支付的sdk包, 但是github上的sdk已經很久沒有更新了, 最好的選擇, 也是我的選擇, 在官網上下載sdk項目, 將其中所有java類copy到自己的項目中.
官網sdk下載目錄
鏈接: 商戶平台首頁
#### 根據微信sdk生成配置類 WXPayConfig
創建IWxPayConfig.class, 繼承sdk WXPayConfig.class, 實現sdk中部分抽象方法, 讀取本地證書, 載入到配置類中.
package core.com.chidori.wxpay;
import core.com.wxpay.IWXPayDomain;
import core.com.wxpay.WXPayConfig;
import core.com.wxpay.WXPayConstants;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;
@Service
public class IWxPayConfig extends WXPayConfig { // 繼承sdk WXPayConfig 實現sdk中部分抽象方法
private byte[] certData;
@Value(“${vendor.wx.config.app_id}”)
private String app_id;
@Value(“${vendor.wx.pay.key}”)
private String wx_pay_key;
@Value(“${vendor.wx.pay.mch_id}”)
private String wx_pay_mch_id;
public IWxPayConfig() throws Exception { // 構造方法讀取證書, 通過getCertStream 可以使sdk獲取到證書
String certPath = “/data/config/chidori/apiclient_cert.p12”;
File file = new File(certPath);
InputStream certStream = new FileInputStream(file);
this.certData = new byte[(int) file.length()];
certStream.read(this.certData);
certStream.close();
}
@Override
public String getAppID() {
return app_id;
}
@Override
public String getMchID() {
return wx_pay_mch_id;
}
@Override
public String getKey() {
return wx_pay_key;
}
@Override
public InputStream getCertStream() {
return new ByteArrayInputStream(this.certData);
}
@Override
public IWXPayDomain getWXPayDomain() { // 這個方法需要這樣實現, 否則無法正常初始化WXPay
IWXPayDomain iwxPayDomain = new IWXPayDomain() {
@Override
public void report(String domain, long elapsedTimeMillis, Exception ex) {
}
@Override
public DomainInfo getDomain(WXPayConfig config) {
return new IWXPayDomain.DomainInfo(WXPayConstants.DOMAIN_API, true);
}
};
return iwxPayDomain;
}
}
發起統一下單 AND 前端調起微信支付必要參數
// 發起微信支付
WXPay wxpay = null;
Map result = new HashMap();
try {
// ******************************************
//
// 統一下單
//
// ******************************************
wxpay = new WXPay(iWxPayConfig); // *** 注入自己實現的微信配置類, 創建WXPay核心類, WXPay 包括統一下單介面
Map data = new HashMap ();
data.put(“body”, “訂單詳情”);
data.put(“out_trade_no”, transOrder.getGlobalOrderId()); // 訂單唯一編號, 不允許重複
data.put(“total_fee”, String.valueOf(transOrder.getOrderAmount().multiply(new BigDecimal(100)).intValue())); // 訂單金額, 單位分
data.put(“spbill_create_ip”, “192.168.31.166”); // 下單ip
data.put(“openid”, openId); // 微信公眾號統一標示openid
data.put(“notify_url”, “”); // 訂單結果通知, 微信主動回調此介面
data.put(“trade_type”, “JSAPI”); // 固定填寫
logger.info(“發起微信支付下單介面, request={}”, data);
Map response = wxpay.unifiedOrder(data); // 微信sdk集成方法, 統一下單介面unifiedOrder, 此處請求 MD5加密 加密方式
logger.info(“微信支付下單成功, 返回值 response={}”, response);
String returnCode = response.get(“return_code”);
if (!SUCCESS.equals(returnCode)) {
return null;
}
String resultCode = response.get(“result_code”);
if (!SUCCESS.equals(resultCode)) {
return null;
}
String prepay_id = response.get(“prepay_id”);
if (prepay_id == null) {
return null;
}
// ******************************************
//
// 前端調起微信支付必要參數
//
// ******************************************
String packages = “prepay_id=” + prepay_id;
Map wxPayMap = new HashMap ();
wxPayMap.put(“appId”, iWxPayConfig.getAppID());
wxPayMap.put(“timeStamp”, String.valueOf(Utility.getCurrentTimeStamp()));
wxPayMap.put(“nonceStr”, Utility.generateUUID());
wxPayMap.put(“package”, packages);
wxPayMap.put(“signType”, “MD5”);
// 加密串中包括 appId timeStamp nonceStr package signType 5個參數, 通過sdk WXPayUtil類加密, 注意, 此處使用 MD5加密 方式
String sign = WXPayUtil.generateSignature(wxPayMap, iWxPayConfig.getKey());
// ******************************************
//
// 返回給前端調起微信支付的必要參數
//
// ******************************************
result.put(“prepay_id”, prepay_id);
result.put(“sign”, sign);
result.putAll(wxPayMap);
return result;
} catch (Exception e) {
}
回調結果處理
核心是支付訂單回調時, 需校驗加密簽名是否匹配, 防止出現模擬成功通知
@RequestMapping(value = “/payCallback”, method = RequestMethod.POST)
public String payCallback(HttpServletRequest request, HttpServletResponse response) {
logger.info(“進入微信支付非同步通知”);
String resXml=””;
try{
//
InputStream is = request.getInputStream();
//將InputStream轉換成String
BufferedReader reader = new BufferedReader(new InputStreamReader(is));
StringBuilder sb = new StringBuilder();
String line = null;
try {
while ((line = reader.readLine()) != null) {
sb.append(line + ” “);
}
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
is.close();
} catch (IOException e) {
e.printStackTrace();
}
}
resXml=sb.toString();
logger.info(“微信支付非同步通知請求包: {}”, resXml);
return wxTicketService.payBack(resXml);
}catch (Exception e){
logger.error(“微信支付回調通知失敗”,e);
String result = ” “;
return result;
}
}
@Override
public String payBack(String notifyData) {
logger.info(“payBack() start, notifyData={}”, notifyData);
String xmlBack=””;
Map notifyMap = null;
try {
WXPay wxpay = new WXPay(iWxPayConfig);
notifyMap = WXPayUtil.xmlToMap(notifyData); // 轉換成map
if (wxpay.isPayResultNotifySignatureValid(notifyMap)) {
// 簽名正確
// 進行處理。
// 注意特殊情況：訂單已經退款，但收到了支付結果成功的通知，不應把商戶側訂單狀態從退款改成支付成功
String return_code = notifyMap.get(“return_code”);//狀態
String out_trade_no = notifyMap.get(“out_trade_no”);//訂單號
if (out_trade_no == null) {
logger.info(“微信支付回調失敗訂單號: {}”, notifyMap);
xmlBack = ” “;
return xmlBack;
}
// 業務邏輯處理 ****************************
logger.info(“微信支付回調成功訂單號: {}”, notifyMap);
xmlBack = ” “;
return xmlBack;
} else {
logger.error(“微信支付回調通知簽名錯誤”);
xmlBack = ” “;
return xmlBack;
}
} catch (Exception e) {
logger.error(“微信支付回調通知失敗”,e);
xmlBack = ” “;
}
return xmlBack;
}
統一下單的簽名和後續前端拉取微信支付的簽名需要統一, 也就是都採用MD5加密, 如果2者不同, 會導致前端拉取微信支付fail, 這是一個巨大的坑, 因為這個原因調試了好久, 微信在文檔里沒有明確標出統一下單的簽名校驗方式 需要和前端拉取微信支付的簽名校驗保持一致.
微信sdk里的源碼需要針對這個問題調整一下, 調整如下:
WXPay類需要修改下加密判斷，在WXPay構造方法中，調整如下
public WXPay(final WXPayConfig config, final String notifyUrl, final boolean autoReport, final boolean useSandbox) throws Exception {
this.config = config;
this.notifyUrl = notifyUrl;
this.autoReport = autoReport;
this.useSandbox = useSandbox;
if (useSandbox) {
this.signType = SignType.MD5; // 沙箱環境
}
else {
this.signType = SignType.MD5; // 將這裡的加密方式修改為SignType.MD5, 保持跟前端吊起微信加密方式保持一致
}
this.wxPayRequest = new WXPayRequest(config);
}
結束語
做完以後, 微信支付的後端邏輯還是很清晰的, 但是在開發過程中很煎熬, 不清楚每個專業術語在微信哪裡配置, 加密方式亂的很
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/302745.html
微信掃一掃 
支付寶掃一掃 