通過ping++平臺完成移動端H5支付
需求:
公司要求增加移動端H5支付入口,從而能夠充值虛擬金幣,用以購買公司的增值服務。
支付方式包括:微信和支付寶。
說明一下具體支付渠道:微信支付方式用到的是微信 WAP 支付(wx_wap),即基於微信外部瀏覽器的支付;
支付寶用到的是支付寶手機網頁支付(alipay_wap)。
注意:
對於微信,如果說是微信公眾賬號支付(wx_pub),即在微信內建瀏覽器中完成支付,那麼就需要先獲取到使用者的open_id。我這邊需求是用微信 WAP 支付(wx_wap),因此無需open_id。若有用到微信公眾賬號支付(wx_pub),獲取open_id可參考文章:H5獲取open_id
建議:開發前先將ping++關於H5支付的SDK和有關API研讀一下。
多看文件,多看文件。。
開發前提:
登陸公司ping++賬戶,進入建立的應用,確認是否已開通所需要的支付渠道。若未開通,需先申請開通。
目前微信 WAP 支付(wx_wap)渠道需自己先在公司的微信商戶平臺申請開通後,再工單聯絡ping++工作人員進行後臺配置。
開發:
(需要後端介面獲取charge物件)
支付頁面如下:
1.引入h5支付sdk
<script type="text/javascript" src="js/pingpp.js" ></script>
2.點選支付按鈕,請求後臺介面,將支付方式,使用者id,充值金額引數傳給後臺,後臺處理後返回一個charge物件。
在 charge 正確的前提下,呼叫 js 方法後會直接跳入第三方的支付介面,然後使用者完成支付動作。
var charge_url = "伺服器介面地址";
$.ajax({
type:"post",
url:charge_url,
data:{
"pay_way":pay_way, //支付渠道 alipay_wap或wx_wap
"user_id":user_id, //使用者id
"sum":sum //充值金額
}
success:function(res){
var charge = res.data.charge;
console.log(charge);
//呼叫支付
wap_pay(charge);
}
});
//呼叫ping++ H5支付
function wap_pay(charge) {
pingpp.createPayment(charge, function(result, err){
console.log(result);
console.log(err.msg);
console.log(err.extra);
if (result == "success") {
// 只有微信公眾賬號 wx_pub 支付成功的結果會在這裡返回,其他的支付結果都會跳轉到 extra 中對應的 URL。
} else if (result == "fail") {
// charge 不正確或者微信公眾賬號支付失敗時會在此處返回
} else if (result == "cancel") {
// 微信公眾賬號支付取消支付
}
});
}
注意:
呼叫 Ping++ H5 SDK 完成支付後瀏覽器會跳轉到 extra 中相應的 URL,引數 extra 規則請參考API 文件;只有使用微信公眾賬號支付(wx_pub )後,結果才會在 callback 中返回。
說說遇到的問題:
1、只有在live模式下,點支付才能喚醒支付寶app或微信app。
2、test 模式不走回調,支付完成後直接跳轉到extra引數中配置的 success_url或result_url
需要注意是:
只有微信公眾號支付(wx_pub )渠道在live模式下才會走回調。
3、
對於支付寶支付alipay_wap渠道,呼叫支付時直接跳轉到支付寶登陸的頁面,無法喚醒支付寶app,此時需要將extra引數中的app_pay欄位設定未true即可。
另外,支付寶官方建議請求引數 success_url 和 cancel_url 不要加自定義引數。