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插件來實現，打開網頁版的支付頁面