目前 Ping++ 的 H5 SDK 支持的渠道包含：

• 手机网页支付：支付宝手机网站支付（alipay_wap）、跨境支付宝手机网站支付（cb_alipay_wap）、百度钱包（bfb_wap）、银联手机网站支付（upacp_wap）、微信 H5 支付（wx_wap）、易宝支付（yeepay_wap）、京东支付（jdpay_wap）、招行一网通支付（cmb_wallet）、PayPal（paypal）
• PC 网页支付：支付宝电脑网站支付 (alipay_pc_direct) 、招行 PC 扫码支付（cmb_pc_qr）、跨境支付宝电脑网站支付 (cb_alipay_pc_direct) 、银联网关支付 (upacp_pc) 、京东支付（jdpay_wap）、PayPal（paypal）、银联电子企业网银支付 (cp_b2b) 、银联企业网银支付（upacp_b2b）、建行 PC 网页支付（ccb_qr）
• 其他：微信小程序支付（wx_lite）、支付宝小程序支付（alipay_lite）、微信 JSAPI 支付（wx_pub）、跨境微信 JSAPI 支付（cb_wx_pub）、QQ 公众号支付（qpay_pub）、线下扫码固定码（isv_wap）

注： 【Ping++ 对象】包含： Charge 、Order、Recharge。

引入 JS 文件

dist 目录下提供了已经构建好的 SDK ，你可以采取以下某一种方式直接引用。

注： 如果你对集成支付插件有定制的需求，请参考 Github 上的 README 文档 自行构建。

• script 标签方式

<script src="/path/to/pingpp.js"></script>

• Browserify 打包方式

首先使用 npm 下载 npm install pingpp-js ，然后使用 :

var pingpp = require('pingpp-js');

开始接入

前端拿到服务端返回的 Ping++ 对象 之后，调用以下 js 方法：

pingpp.createPayment(object, function(result, err){
// object 需是 Charge/Order/Recharge 的 JSON 字符串
// 可按需使用 alert 方法弹出 log
//console.log(JSON.stringify(object));
    console.log("result:" + result);
    console.log("err.msg:" + err.msg);
    console.log("err.extra:" + err.extra);
    if (result == "success") {
    	// 只有微信JSAPI (wx_pub)、微信小程序（wx_lite）、QQ 公众号 (qpay_pub)、支付宝小程序（alipay_lite）支付成功的结果会在这里返回，其他的支付结果都会跳转到 extra 中对应的 URL
    } else if (result == "fail") {
        // Ping++ 对象 object 不正确或者微信JSAPI/微信小程序/QQ公众号支付失败时会在此处返回
    } else if (result == "cancel") {
        // 微信JSAPI、微信小程序、QQ 公众号、支付宝小程序支付取消支付
    }
});

在 Ping++ 对象 正确的前提下，调用 js 方法后会直接跳入第三方的支付界面，然后用户完成支付动作。用户支付成功后，会跳转到服务端创建 Ping++ 对象时定义的 result_url 或者 success_url。如果用户取消支付，则会跳转到 result_url 或者 cancel_url（具体情况根据渠道不同会有所变化）。

注： 如果不想直接跳转到支付页面，而是获取支付页面地址。可以在调用 pingpp.createPayment 之前，调用

pingpp.setUrlReturnCallback(callback, channels);

• 参数 callback（回调函数）

1. 第一个参数接受错误信息，没有错误时为 null
2. 第二个参数为支付界面地址的值

• 参数 channels：需要启用该功能的渠道列表，类型为 array。默认值为 ['alipay_pc_direct']
• 示例

pingpp.setUrlReturnCallback(function (err, url) {
 // 自行处理跳转或者另外打开支付页面地址(url)
 // window.location.href = url;
}, ['alipay_pc_direct', 'alipay_wap']);

注意事项

1. 微信 JSAPI 支付必须在微信浏览器内调试；
2. 支付宝在微信浏览器中调用的解决方案请参考：alipay_in_weixin 部分；
3. 接入微信 JSAPI 支付需要额外去 微信公众平台 配置 安全域名 用以获取 open_id 以及 授权目录 用以支付。