Phonegap 之 iOS銀聯在線支付（js調用ios端銀聯支付控件）

　　Phonegap項目，做支付的時候，當把網站打包到ios或android端成app后，在app上通過wap調用銀聯在線存在一個問題：

就是當從銀聯支付成功后，再從服務器返回到app客戶端就很難實現。

　　wap銀聯支付流程是這樣：客戶端---> 服務器（構建支付請求）--> 銀聯支付 ---> 返回到服務端（處理支付結果）。所以對於手機網站銀聯支付沒有問題，但是對於ios端app和android端app， 再通過wap支付，發現支付成功后，很難在回到app客戶端了。

所以這里就必須借助Phonegap的插件js腳本，通過js調用ios端或android端原生代碼，然后再通過原生代碼調用銀聯支付專門為移動客戶端准備的sdk，去進行支付。支付成功后，銀聯會把支付結果一邊通知到我們網站你的服務器，另一方面也會把給一個通知到ios或android客戶端，這樣就完美了！

　　------------------------------------------------------------------------------------------------------------------------------

　　先上Phonegap項目ios端app如何調用銀聯在線的支付流程截圖：

 1、客戶端請求銀聯支付，網站服務端構建銀聯支付請求；並從銀聯獲得銀聯生成的系統流水號

　　

2、通過Phonegap腳本插件，調用OC代碼，OC調用銀聯支付接口，彈出銀聯支付控件，輸入你的銀聯卡號和手機驗證碼等信息，完成支付

　　      

　　

3、支付成功后，點擊“返回商戶”， 銀聯一邊會回傳一個信息到網站服務端，一邊也會通知ios端app的代理控制器支付結果。

　　然后ios端這邊可以根據銀聯返回的支付信息，做自己的業務邏輯處理。

　　

 

------------------------------------  大概代碼如下：  -------------------------------

1、客戶端選擇銀聯支付，js端代碼：

//模擬去服務器端構建銀聯請求, myApp是使用Framework7框架創建的一個js對象
function toPay() {
    var ServerDomain = "http://192.168.1.189"; //網站服務端地址
    var isApp = ServerDomain.indexOf(location.hostname) > 0 ? "0" : "1";  //是否來自app的請求

    $$.ajax({
        url: ServerDomain + "Payment/CreateOrderInfo",
        method: "post",
        dataType: "json",
        data: { "isApp": isApp },
        success: function (data) {
            if (data.success == "0") {
                myApp.alert(data.info); //彈窗提示信息
                return false;
            }

            //data.info 信息，如果是通過手機網站訪問，則data.info是一個form表單html頁面代碼；
            //如果是移動客戶端（ios或android），則data.info是來自銀聯的系統流水號：tn
            if (isApp == "0") { //來自wap的請求
                //針對手機網站的銀聯支付請求，直接構建get請求表單，跳轉到銀聯那邊
                document.write(data.info); 
            }
            else if (myApp.device.ios) { //來自ios app的請求
                Cordova.exec(function (successInfo) { /*成功通知方法*/ }, function (errorInfo) { /*失敗回調通知方法*/ }, "PluginName", "uppay", [data.info]);
            }
            else if (myApp.device.android) { //來自android app的請求
                UnionPayFunc(data.info);
            }
        }
    });
}

 

2、服務端構建銀聯支付請求代碼，服務端使用C#的MVC

public class PaymentController : Controller
    {
        /// <summary>測試構建銀聯支付請求：如果是wap請求，則構建form表單；若是app請求，則獲取銀聯系統流水號
        /// </summary>
        /// <param name="isApp">是否來自app的請求【0表示來自wap, 1表示來自android】</param>
        /// <returns></returns>
        public JsonResult CreateOrderInfo(int isApp)
        {
            //以下代碼只是為了方便商戶測試而提供的樣例代碼，商戶可以根據自己需要，按照技術文檔編寫。該代碼僅供參考
            // **************演示前台交易的請求***********************
            Dictionary<string, string> param = new Dictionary<string, string>();
            //生成訂單編號
            Random rnd = new Random();
            string orderID = DateTime.Now.ToString("yyyyMMddHHmmss") + (rnd.Next(900) + 100).ToString().Trim(); 

            param["version"] = "5.0.0";//版本號
            param["encoding"] = "UTF-8";//編碼方式
            param["certId"] = CertUtil.GetSignCertId(); //證書ID（簽名私鑰證書的Serial Number）
            param["txnType"] = "01";//交易類型:00=查詢交易，01=消費，04=退貨，12=代付，21=批量交易，22=批量查詢
            param["txnSubType"] = "01";//交易子類，依據實際交易類型填寫
            param["bizType"] = "000201";//產品類型：000201=B2C網關支付，000401=代付，000501=代收，000601=賬單支付，000901=綁定支付，000202=B2B

            param["frontUrl"] = "http://192.168.1.189/Payment/UppayFront"; //前台通知地址(前台返回商戶結果時使用，前台類交易需上送)     
            param["backUrl"] = "http://192.168.1.189/Payment/UnppayBack";  //后台通知地址，改自己的外網地址（后台返回商戶結果時使用，如上送，則發送商戶后台交易結果通知）
            //param["frontFailUrl"] = "http://192.168.1.189/Payment/UnppayFail";//失敗交易前台跳轉地址（可選：支付失敗時，頁面跳轉至商戶該URL，不帶交易信息，僅跳轉）
            param["signMethod"] = "01";//簽名方法（01：表示采用RSA）
            param["channelType"] = "08";//渠道類型: 05=語音，07=互聯網（PC），08=移動（手機）
            param["accessType"] = "0";//接入類型：0=商戶直連接入，1=收單機構接入，2=平台商戶接入
            param["merId"] = "111111111111111";//商戶代碼（請填入已被批准加入銀聯互聯網系統的商戶代碼）
            param["orderId"] = orderID;//商戶訂單號（不能含”-“或”_"）
            param["txnTime"] = DateTime.Now.ToString("yyyyMMddHHmmss");//訂單發送時間
            param["txnAmt"] = "1";//交易金額，單位分
            param["currencyCode"] = "156";//交易幣種(幣種格式必須為3位代碼，默認取值：156（人民幣）)
            //param["orderDesc"] = "訂單描述";//訂單描述，暫時不會起作用
            param["reqReserved"] = "";//請求方保留域，透傳字段，查詢、通知、對賬文件中均會原樣出現

            //將參數進行簽名
            SDKUtil.Sign(param, Encoding.UTF8);

            string returnInfo = ""; //返回信息
            string isSuccess = "1"; //

            if (isApp == 0)//wap請求，則返回form表單請求請求
            {
                // 將SDKUtil產生的Html文檔寫入頁面，從而引導用戶瀏覽器重定向   
                returnInfo = SDKUtil.CreateAutoSubmitForm(SDKConfig.FrontTransUrl, param, Encoding.UTF8) + "<script type='text/javascript'>OnLoadSubmit();</script>";
            }
            else if (isApp == 1)//app請求，則返回銀聯生成的系統流水號
            {
                // 初始化通信處理類
                HttpClient hc = new HttpClient(SDKConfig.AppRequestUrl);
                //// 發送請求獲取通信應答
                int status = hc.Send(param, Encoding.UTF8);
                // 返回結果
                string result = hc.Result;

                if (status != 200)
                {
                    isSuccess = "0";
                    returnInfo = "請求銀聯失敗";
                    return Json(new { success = isSuccess, info = returnInfo }, JsonRequestBehavior.AllowGet);
                }

                Dictionary<string, string> resData = SDKUtil.CoverstringToDictionary(result);

                if (!SDKUtil.Validate(resData, Encoding.UTF8))
                {
                    returnInfo = "驗證失敗";
                    isSuccess = "0";
                    return Json(new { success = isSuccess, info = returnInfo }, JsonRequestBehavior.AllowGet);
                }

                string respCode = resData["respCode"];
                string respMsg = resData["respMsg"];
                returnInfo = resData["tn"]; //銀受理訂單號：商戶推送訂單后銀聯移動支付系統返回該流水號，商戶調用支付控件時使用
            }
        
            return Json(new { success = isSuccess, info = returnInfo }, JsonRequestBehavior.AllowGet);
        }

        ///........
}

 

3、ios端代碼，js腳本調用OC代碼需要Phonegap提供的一個腳本插件支持: cordova.js (下載鏈接)

　　創建一個類Plugin， 繼承Phonegap插件類：CDVPlugin， 

　　還需要在配置文件config.xml中配置一下，才能使用js調用Plugin類里面的方法

　　

#import <UIKit/UIKit.h>
#import <Cordova/CDVPlugin.h>

@interface Plugin : CDVPlugin

@property (nonatomic, copy) NSString* callbackID;

//支付
- (void)uppay:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;

@end

#import "Plugin.h"
#import "MainViewController.h"
#import "UPPayPlugin.h"

@interface Plugin ()

@end

@implementation Plugin

@synthesize callbackID;

- (void)uppay:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options{
    // 這是classid,在下面的PluginResult進行數據的返回時,將會用到它
    self.callbackID = [arguments pop];

    NSString *tn = [arguments objectAtIndex:0]; //獲取銀聯生成返回的系統流水號
    MainViewController *controller = (MainViewController *)self.viewController;
    
    //調用銀聯支付接口
    [UPPayPlugin startPay:tn mode:@"00" viewController:controller delegate:controller];
}

@end

　　代理控制器設置銀聯支付結束后的代理方法：

#import <Cordova/CDVViewController.h>
#import <Cordova/CDVCommandDelegateImpl.h>
#import <Cordova/CDVCommandQueue.h>
#import "UPPayPluginDelegate.h"

@interface MainViewController : CDVViewController <UPPayPluginDelegate>

//..........

@end

#import "MainViewController.h"
#import "AppDelegate.h"

@implementation MainViewController

#pragma mark - 支付結束后代理方法
//success、fail、cancel，分別代表：支付成功、支付失敗、用戶取消支付
-(void)UPPayPluginResult:(NSString*)result
{
    NSLog(@"支付結果：%@", result);
    
    //調用腳本方法，處理支付完成后的邏輯
    [self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"unipayPayResult('%@');", result]];
}

//.......

@end

 

4、支付成功后，ios 控制器收到銀聯的支付結果，調用js腳本方法，處理后面邏輯：　

// ios支付成功后，收到銀聯通知跳轉到其他頁面去, info參數有三種狀態：success, fail, cancl
function unipayPayResult(info) {
    var textTip = "";
    if (info == "success") {
        textTip = "支付成功";
    }
    else if (info == "fail") {
        textTip = "支付失敗";
    }
    else {
        textTip = "取消支付";
    }

    myApp.alert(textTip);
    //彈窗提示后，跳到主頁面去
    mainView.loadPage("index.html");
}

 

原文鏈接地址：http://www.cnblogs.com/tandaxia/p/4964753.html

 

cordova for iOS 通過js調用OC原生代碼demo:

github地址：https://github.com/xiaotanit/Tan_CordovaPlugin

csdn地址： http://download.csdn.net/detail/tandaxia/9524576