需求：

公司要求增加移動端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 不要加自定義引數。