ionic2 利用官方插件实现支付宝支付

2017-09-23  本文已影响497人  brantzzu

网上关于ionic2 利用alipay插件实现支付宝支付的文章比较多,但有两个问题:1.很多都是基于老的alipay插件做的现在已经用不了了,2.几乎所有的文章都只讲了alipay实现支付的一部分(客户端的部分),这篇文章将详细的介绍利用alipay实现支付的整个过程。
1、准备工作:
(1)登录支付宝,创建移动支付应用:具体参考支付宝开放平台文档;创建好后有需要保存好的2个东东是:1、APPID 安装插件的时候需要用;2.生成的密钥(私钥和支付宝公钥),生成密钥的方法创建移动应用页面上有。
(2)安装插件:插件地址:https://ionicframework.com/docs/native/alipay/
$ ionic cordova plugin add cordova-alipay-base --variable APP_ID=your_app_id
$ npm install --save @ionic-native/alipay
(2)熟悉官方文档:
做完上述工作是不是已经开始跃跃欲试,想着可以开始着手实现支付宝支付了,是不是还有点小激动呢!别急,还有很多工作等着我们去做,建议最好是去查看下官方文档了解下实现支付的流程,这对我们接下来写服务器端,客户端的代码十分有帮助。https://docs.open.alipay.com/204/105297/ 这个文档建议看3遍。
2、开始实现
2.1客户端部分,客户端代码异常简单,我这里直接上代码

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Alipay, AlipayOrder } from '@ionic-native/alipay';
import { HttpService } from "../../../providers/HttpService";
import { NativeService } from "../../../providers/NativeService";
//declare var AliPay: any;
@Component({
    selector: 'alipay-demo',
    templateUrl: 'alipay-demo.html'
})
export class AlipayDemoPage {
    payInfo: AlipayOrder;
    payResult: any;
    httpResponseData: any;

    constructor(public navCtrl: NavController, public navParams: NavParams,
        private httpService: HttpService, private nativeService: NativeService,
        private alipay: Alipay) { }
    ionViewDidEnter() {
    }
    alipayTest() {
        let url = "http://localhost/orderInfo";
        this.httpService.post(url).subscribe(result => {
            this.httpResponseData = result['_body'];
            console.log("orderInfor:");
            console.info(this.httpResponseData);
            this.payInfo = result['_body'];
            this.alipay.pay(this.payInfo)
                .then(res => {
                    console.info("res:");
                    console.log(res);
                    this.payResult = res;
                }, err => {
                    console.log(err);
                    this.payResult = err;
                })
                .catch(e => {
                    console.log(e);
                    this.payResult = e;
                });
        }, error => {
            console.log(error);
            this.nativeService.showToast("返回订单信息失败");
        });
    }
}

客户端代码的核心部分是订单信息需要从服务器端生成后返回到前端, 参见代码中的http post 方法,this.httpService.post(url)。
说完客户端的代码下面来说说服务器端的代码怎么写,这个官网上已经写好Demo了,包括java版,donet 版 ,php版,三个版本,具体参见
https://docs.open.alipay.com/54/106370/
到这里整个支付过程基本就完成了,细心的同学可能会发现服务器端生成的订单信息中有个NotifyUrl 这个实际上是一个url地址,是服务端验签支付宝发送过来的订单支付结果信息是否真的是支付宝发过来的,验签成功后return "success" 给支付宝就可以了。
最后给出服务器端验签代码参考地址:
异步demo分享(适用于所有支付类接口异步验签) java,php,.NET验签demo下载地址:https://docs.open.alipay.com/203/105910 注意:请大家使用手机网站demo进行验签测试即可,使用文件中的notify_url相关的文件和方法 ”。

上一篇 下一篇

猜你喜欢

热点阅读