Ionic系列——支付

1、为什么用Ping++

简单的说就是更方便,他和支付平台做了一下对接,申请不用那么复杂了,但是本身是免费的,收费的是各个平台。

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

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

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

2、Ping++介绍

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

Ping++官网

Ping++API

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

百度百科

3、Ping++交易流程介绍

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

大家把他的文档都好好读读。

SDK 交易流程

4、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

5、代码实现

我后端选用的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);
    }
};

结果:

6、错误处理

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

以后删除插件的话,建议大家先用 cordova plugin list看一下,然后用cordova plugin delete删除。

7、其他

推荐大家了解另一个支付插件paypay

时间: 2024-10-09 05:19:03

Ionic系列——支付的相关文章

互联网金融系列-支付清算体系样例-下

笔者上一篇<互联网金融系列-支付清算体系介绍-上>已经比較全面的介绍了以银联为样例的支付清算体系,为了更好的理解里面的运作.本章以两个样例为重点,全面剖析整个清算的过程. 1,记账原则 这块跟会计相关.不清楚的同学能够先看一下笔者之前的文章<第三方支付架构设计之-账户体系>.在会计学上,须要分清楚一个概念:会计主体.简言之,就是会计信息体现或者代表谁的经济利益,代表给谁做的账.做帐的人不一定是会计主体,比方替别人做帐. 在參与清算的各个主体来说.他们首先须要在央行开立清算账户或者在

互联网金融系列-支付清算体系例子-下

笔者上一篇<互联网金融系列-支付清算体系介绍-上>已经比较全面的介绍了以银联为例子的支付清算体系,为了更好的理解里面的运作,本章以两个例子为重点,全面剖析整个清算的过程. 1,记账原则 这块跟会计相关,不清楚的同学可以先看一下笔者之前的文章<第三方支付架构设计之-账户体系>,在会计学上,需要分清楚一个概念:会计主体,简言之,就是会计信息体现或者代表谁的经济利益,代表给谁做的账.做帐的人不一定是会计主体,比如替别人做帐.在参与清算的各个主体来说,他们首先需要在央行开立清算账户或者在对

1.ionic系列之初识ionic

ionic官方这样解释ionic"ionic: Advanced HTML5 Hybrid Mobile App Framework",其意为:"ionic:先进的HTMl5混合移动App框架".意思已经很明显了,ionic是为移动端的APP开发而生的,无论是运行在手机浏览器上的webApp,还是说运行在手机App上的混合App,ionic都能出色完成.ionic混合应用的开发中至今为止只支持了android和IOS,缺点是尚未支持Windows Phones.并且

Ionic系列——几种调试方法介绍

一.问题出现 最近我发现之前做微信开发和普通的ionic可以用谷歌浏览器就调试了,但是如果添加了ng-cordova这些功能调试起来就很麻烦了,我需要打包apk,安装apk,出现错误还不知道出现在哪里,然后修改代码,打包apk,安装apk,这样太麻烦了,群里的朋友提供了一种调试ng-cordova这些插件的方法,我写下来作为记录. 二.网页配合手机调试 1.把项目部署到服务器并发布,(最好是外网) 还有一种办法(推荐) 用ionic serve 本地搭建环境  所谓的远程地址 其实就是你电脑地址

[转]Ionic系列——CodePen上的优秀Ionic_Demo

本文转自:http://my.oschina.net/u/1416844/blog/514361?fromerr=bbFC5JIl 案例网站 Slidebox with Dynamic Slides Ionic UL search example Ionic Accordian ion-affix performance demo (就是这个栏目下的标题一直显示在最上面) Button Bar as Top Tabs FAB Menu Tab layout - view content gap

2.ionic系列之ionic开发环境搭建(一)

工欲善其事,必先利其器.本文将介绍在windows平台及mac ox平台搭建ionic开发环境的过程. 1.安装Node.js 打开Node.js官网:https://nodejs.org/官网有两个版本的node.js一个是LTS(长期支持版本),一个是Current当前版本,建议使用LTS版本下载使用.安装时,windows平台安装时一直下一步下一步就OK,mac ox平台直接安装就行.安装完成后windows打开命令行,而mac ox打开终端,输入: node –v 后回车,若出现node

Ionic系列——调用系统电话

1.需求描述 在ionic项目用调用手机的打电话功能.开始还想找cordova和ng-cordova的插件那,现在H5实现起来特别方便. 2.准备 在cordova中所有的URL Schemes 都是服从于白名单的,所以要现在项目config.xml中添加 <access origin="tel:*" launch-external="yes" /> Making a Phone Call from Within PhoneGap in Android

Ionic系列——修改应用图标和启动页

1.在项目的根目录下创建resources文件夹. 2.在文件夹中都放入icon.png(应用图标,最小192x192px,不带圆角),splash.png(启动屏幕,最小2208x2208px,中间区域1200x1200px)(可以是png.psd.ai) 3.在cmd中进入项目所在文件夹执行: ionic resources --icon        ionic resources --splash 4.项目中的config文件中是这样 <platform name="android

Ionic系列——android双击退出应用和物理返回按钮隐藏键盘的实现

1.需求描述 因为要控制在返回上一页面的时候,如果有键盘,需要先隐藏键盘,所以需要自定义android手机的物理返回键单击事件,自己定义返回按钮的优先级操作,然后实现在首页面和登录页双击退出应用的操作. 2.准备 添加插件$cordovaToast,$cordovaKeyboard cordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.git cordova plugin add https://github.