Ionic系列——支付

一、为何用Ping++

    简单的说就是更方便，他和支付平台作了一下对接，申请不用那么复杂了，可是自己是免费的，收费的是各个平台。

    其实你也能够本身去看支付宝啊，微信啊，银联的接口文档，直接对接平台，但那样很费劲，会有认证费，认证材料，接口等一系列的东西要准备。而Ping++的认证会更简单一点。

    支付宝服务市场  https://app.alipay.com/market/productIndex.htm

    微信支付  https://pay.weixin.qq.com/wiki/doc/api/app.php?chapter=11_1#

二、Ping++介绍

    支持7种后台语言和3个移动平台

    Ping++官网

    Ping++API

   《近匠》Ping++：简单、高效、第三方支付SDK

    百度百科

三、Ping++交易流程介绍

    简单的说就是：你把支付方式，金额，内容等参数对象传给后台，后台请求Ping++服务器，返回一个Charge对象，而后在前端调用SDK发起支付控件进行支付，支付完成会有一个结果给你，可是这个是给用户看的。还要在管理平台配置一个异步结果的路径，这个才是真正的做为支付成功的参考依据。

    你们把他的文档都好好读读。

  

    SDK 交易流程

四、cordova-plugin-pingpp  

    这个是社区贡献的一个cordova插件。咱们的HybirdApp只能用这个实现。官网地址：https://github.com/TongChia/cordova-plugin-pingpp

cordova plugin install co.airsia.cordova.pingpp --variable URL_SCHEME=YOUR-URL-SCHEME

    文章中用install好像安装不上，换成add

URL_SCHEME=YOUR-URL-SCHEME
// 这句好像必需要写,说是回调地址用，我也不清楚是干什么的
// 因此要写成下面的样子，并且最好要长一点8-60位。
URL_SCHEME=shiguoqingapproval

    最终就是这样子

cordova plugin add co.airsia.cordova.pingpp --variable URL_SCHEME=shiguoqingapproval

五、代码实现

    我后端选用的Node，不得不说有了Node玩起各类东西来太方便啦！

// 我为了方便，金额，支付方式都写死了，官方文档介绍的已经很全了。

// 微信功能的post请求功能
app.get('/weixin_post', function (req, res, next) {
    var pingpp = require('pingpp')('sk_test_GynL48LybLyPCmTOC8anTaj1');
    pingpp.charges.create({
        subject: "Your Subject",
        body: "Your Body",
        amount: 100,
        order_no: "123456789",
        channel: "upacp",
        currency: "cny",
        client_ip: "127.0.0.1",
        app: {id: "app_ir1uHKe9aHaL9SWn"}
    }, function(err, charge) {
        if(err){
            res.send(err);
        }else{
            res.send(charge);
        }
    });
});

    charge对象，没后台的能够直接用这个，channel是upacp的

var charge={"id":"ch_ez9a5O9GSCy5fj5afHTGmvHG","object":"charge","created":1442542657,"livemode":false,"paid":false,"refunded":false,"app":"app_ir1uHKe9aHaL9SWn","channel":"upacp","order_no":"123456789","client_ip":"127.0.0.1","amount":100,"amount_settle":0,"currency":"cny","subject":"Your Subject","body":"Your Body","extra":{},"time_paid":null,"time_expire":1442546257,"time_settle":null,"transaction_no":null,"refunds":{"object":"list","url":"/v1/charges/ch_ez9a5O9GSCy5fj5afHTGmvHG/refunds","has_more":false,"data":[]},"amount_refunded":0,"failure_code":null,"failure_msg":null,"metadata":{},"credential":{"object":"credential","upacp":{"tn":"201509181017374044084","mode":"00"}},"description":null};

    Ionic的controller中的写法

// 不须要引用什么就能够直接使用pingpp，在浏览器中运行会告你说没有定义pingpp,编译成app以后就没问题了。
// 支付测试
$scope.pay=function(){
    var charge={"id":"ch_ez9a5O9GSCy5fj5afHTGmvHG","object":"charge","created":1442542657,"livemode":false,"paid":false,"refunded":false,"app":"app_ir1uHKe9aHaL9SWn","channel":"upacp","order_no":"123456789","client_ip":"127.0.0.1","amount":100,"amount_settle":0,"currency":"cny","subject":"Your Subject","body":"Your Body","extra":{},"time_paid":null,"time_expire":1442546257,"time_settle":null,"transaction_no":null,"refunds":{"object":"list","url":"/v1/charges/ch_ez9a5O9GSCy5fj5afHTGmvHG/refunds","has_more":false,"data":[]},"amount_refunded":0,"failure_code":null,"failure_msg":null,"metadata":{},"credential":{"object":"credential","upacp":{"tn":"201509181017374044084","mode":"00"}},"description":null};
    try{
        pingpp.createPayment(charge, function(result){
            CommonJs.AlertPopup('suc: '+result);  //"success"
        }, function(result){
            CommonJs.AlertPopup('err: '+result);  //"fail"|"cancel"|"invalid"
        });
    }
    catch(e){
        CommonJs.AlertPopup(e);
    }
};

    结果：

六、错误处理

    我在安装插件的时候报了这么一个错误，弄了很久都没解决，后台我从新建了一个新的项目，很顺利的就安装成功了，因此我肯定是以前的项目有点问题，我感受多是以前我直接把plugin文件夹中的东西直接删除，没有用cordova plugin delete XXX命令致使的，配置文件可能有了点问题，可是我找不到在哪里，因此问题也一直没有解决。

    之后删除插件的话，建议你们先用 cordova plugin list看一下，而后用cordova plugin delete删除。

七、其余

    推荐你们了解另外一个支付插件paypay

    支付也能够用ng-cordova的 inappbrower插件来实现，打开网页版的支付页面