通过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研读一下。
多看文档，多看文档。。

开发配置：https://www.pingxx.com/docs/overview/config
支付流程：https://www.pingxx.com/docs/overview/transaction/charge?transaction=true
H5 SDK 接入指南：https://github.com/PingPlusPlus/pingpp-js#1.2

开发前提：
登陆公司ping++账户，进入创建的应用，确认是否已开通所需要的支付渠道。若未开通，需先申请开通。
目前微信 WAP 支付（wx_wap）渠道需自己先在公司的微信商户平台申请开通后，再工单联系ping++工作人员进行后台配置。

渠道申请帮助：https://help.pingxx.com/article/115698

开发：
（需要后端接口获取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 中返回。

API文档：https://www.pingxx.com/api

说说遇到的问题：
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 不要加自定义参数。

通过ping++平台完成移动端H5支付

猜你喜欢