0、引言

之前釋出了一篇關於開發和使用Alipay（支付寶）的Cordova Plugin的部落格，實現了簡單的呼叫支付寶支付功能。但是上篇部落格所實現的外掛並不能直接應用於商業專案中，因為加簽操作都在客戶端完成。之後有很多小夥伴找我要原始碼，索性就自己封裝一個可以應用於正式版本的Alipay Cordova Plugin，供大家參考。

1、概述

本文用於闡述將Alipay的官方SDK（Android、iOS）封裝為標準化Cordova Plugin的過程，並提供Angularjs的呼叫示例。

2、安裝

2.1、clone

PS：喜歡的話記得給我一顆小星星，感謝臉.jpg

首先，使用如下命令將外掛程式碼clone到本地

git clone https://github.com/BeanYong/com.anas.alipay.git

2.2、修改scheme

在外掛目錄com.anas.alipay/src/ios下，找到AlipayPlugin.m檔案，對其中your_scheme進行編輯，將其修改為自定義的Scheme，具體為如下一行

NSString *your_scheme = @"your_scheme";

例如修改為

NSString *your_scheme = @"qazxcfghjklmnbgfdw";

scheme為自己應用的唯一標識，作為支付寶支付完成後跳轉的憑據，可以設定為隨機值，但要儘量確保scheme在使用者手機上的唯一性。

2.3、安裝外掛

cordova plugin add 外掛在本機的路徑

例如

cordova plugin add E:\Anasit\plugins\com.anas.alipay

3、配置

外掛安裝完成後，需要對iOS平臺進行一些回撥配置，以在支付完成後，正確跳轉及接收回調引數。

3.1、AppDelegate配置

在AppDelegate.h檔案中加入如下程式碼

#import "AlipayPlugin.h"

在AppDelegate.m檔案中加入如下程式碼

- (BOOL)application:(UIApplication *)application openURL:(NSURL
 
 *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
    if ([url.host isEqualToString:@"safepay"]) {

        // 支付跳轉支付寶錢包進行支付，處理支付結果
        [[AlipaySDK defaultService] processOrderWithPaymentResult:url standbyCallback:^(NSDictionary *resultDic) {
            NSLog(@"result = %@",resultDic);
            AlipayPlugin *plugin = [[AlipayPlugin alloc] init];
            [plugin backToJs:resultDic];
        }];

    }
    return YES;
}

// NOTE: 9.0以後使用新API介面
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString*, id> *)options
{
    if ([url.host isEqualToString:@"safepay"]) {

        // 支付跳轉支付寶錢包進行支付，處理支付結果
        [[AlipaySDK defaultService] processOrderWithPaymentResult:url standbyCallback:^(NSDictionary *resultDic) {
            NSLog(@"result = %@",resultDic);
            AlipayPlugin *plugin = [[AlipayPlugin alloc] init];
            [plugin backToJs:resultDic];
        }];

    }
    return YES;
}

3.2、scheme配置

使用xcode開啟專案，在Targets中，點選info選項卡，在URL Types中新增一個item，其中URL Schemes填入剛才寫入外掛的自定義scheme，即qazxcfghjklmnbgfdw（此字串作為示例，請自行填入自定義的scheme）。

4、使用

  cordova.plugins.AlipayPlugin.pay(
    /**
     * 呼叫外掛成功回撥
     *
     * @param result 支付結果（其中包含result、memo、resultStatus三個引數）
     */
    function(result){
        var resultJson = JSON.parse(result);
        if(resultJson.resultStatus == 9000){
            // TODO 成功支付
            // 注：支付寶支付結果應該依賴於支付寶傳送到伺服器的非同步回撥，故此處應該將向伺服器詢問是否確實支付成功
        } else {
            // TODO 未成功支付
        }
    },

    // 呼叫外掛失敗回撥
    function(){
        Toast.show("伺服器開小差了，稍等一會兒在'我的訂單'裡付款吧");
    },

    // 伺服器組裝的加簽支付資訊，預先向伺服器請求獲取
    orderInfo
  );

5、作者

閆斌（BeanYon）

• Email：[email protected]