手机网站支付转Native支付

背景

为了节约开发成本,很多Native-H5混合App采用手机网站支付的方式去实现支付模块。但手机网站支付的网络依赖比较严重,也通常需要经过更多的验证,这种种原因导致手机网站支付的成功率比Native支付低,对商户的利益造成影响。

简介

手机网站支付转Native支付是支付宝标准版SDK内置的一项功能,能够帮助Native-H5混合App以极低的接入成本极大地提升支付成功率。

对比

下面以淘宝为例对比手机网站支付和手机网站转Native支付的流程。

手机网站支付流程

步骤一: 在手机端浏览器中访问淘宝主页www.taobao.com
image

步骤二: 挑选商品并进行付款
image

步骤三: 点击“立即支付”进入付款详情页面(H5页面
image

手机网站转Native支付流程

下载Demo,并将Demo App安装到手机上即可体验该流程,请确保手机上安装了支付宝App
步骤一: 运行Demo,并在Demo中打开淘宝主页www.taobao.com
iOS: 点击URLPay->openUrl,输入www.taobao.com
image

Android: 点击网页支付转native
image

步骤二: 挑选商品并进行付款
iOS截图
image

Android截图
image

对比总结

主要区别是:如果用户手机安装了支付宝App,手机网站转Native支付方式会跳转到支付宝App中进行订单支付,用户体验和支付成功率均优于手机网站支付方式。除此之外,还能使用手机网站支付没有提供的功能,例如:指纹支付、手环、手表支付、免密支付等。
如果用户手机没有安装支付宝App怎么办? 如果用户手机没有安装支付宝App,将在SDK提供的WebView中打开H5页面进行支付。即便如此,由于SDK与服务端的交互携带账号信息,仍比不携带任何账号信息的普通手机网站支付体验更好。

如何实现手机网站转Native支付

要实现上述功能需接入我们提供的SDK。
接入过程十分简单,可以以上述Demo为参考,该Demo程序只有一个功能:创建一个WebView,在WebView中拦截每个URL,然后调用SDK提供的接口检查该URL是否是有效的支付宝订单支付URL,如果是则将该URL传给SDK提供的支付接口进行支付。

iOS接入说明

配置

步骤1:启动IDE(如Xcode),把iOS包中的压缩文件中以下文件拷贝到项目文件夹下,并导入到项目工程中。

AlipaySDK.bundle
AlipaySDK.framework

在Build Phases选项卡的Link Binary With Libraries中,增加以下依赖:
image

其中,需要注意的是:

  • 如果是Xcode 7.0之后的版本,需要添加libc++.tbd、libz.tbd;
  • 如果是Xcode 7.0之前的版本,需要添加libc++.dylib、libz.dylib(如下图)。

image

步骤2:在需要调用AlipaySDK的文件中,增加头文件引用。

#import <AlipaySDK/AlipaySDK.h>

步骤3:配置支付宝客户端返回url处理方法。
(外部存在支付包钱包,支付宝钱包将处理结果通过url返回。)
如示例AliSDKDemo\APAppDelegate.m文件中,增加引用代码:

#import <AlipaySDK/AlipaySDK.h>

AppDelegate中增加如下代码:

- (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) {
    //【由于在跳转支付宝客户端支付的过程中,商户app在后台很可能被系统kill了,所以pay接口的callback就会失效,请商户对standbyCallback返回的回调结果进行处理,就是在这个方法里面处理跟callback一样的逻辑】
            NSLog(@"result = %@",resultDic);
        }];
    }
    if ([url.host isEqualToString:@"platformapi"]){//支付宝钱包快登授权返回authCode
  
        [[AlipaySDK defaultService] processAuthResult:url standbyCallback:^(NSDictionary *resultDic) {
            //【由于在跳转支付宝客户端支付的过程中,商户app在后台很可能被系统kill了,所以pay接口的callback就会失效,请商户对standbyCallback返回的回调结果进行处理,就是在这个方法里面处理跟callback一样的逻辑】
            NSLog(@"result = %@",resultDic);
        }];
    }
    return YES;
}

接口调用说明

本SDK提供的所有接口均定义在AlipaySDK.h中。
SDK中提供了若干接口,手机网站转Native支付只用到其中一部分,本文未提到的接口无需关注。
如何调用提供的接口?
APP支付最新版本 15.4.0 新增拦截+支付二合一接口(payInterceptorWithUrl...),该接口将原来的获取H5支付订单信息接口和支付接口进行了合并。
接口的调用方式是先调用defaultService获取SDK的实例,然后再调用单独提供的功能接口,以payInterceptorWithUrl为例:

[[AlipaySDK defaultService] payInterceptorWithUrl:url fromScheme:scheme callback:^(NSDictionary *result) {
	// 处理支付结果
   NSLog(@"%@", result);
}];

如何实现手机网站转APP支付?
步骤一: 实现UIWebViewDelegate协议,拦截H5的URL;
步骤二: 调用新增拦截+支付二合一接口(payInterceptorWithUrl...)进行URL拦截及支付转化;具体参照如下接口说明。

拦截+支付二合一接口

接口原型

/**
 *  支付宝H5支付URL拦截器,完成拦截及支付方式转化
 *
 *  @param urlStr         待过滤拦截的 url string
 *  @param schemeStr      调用支付的app注册在info.plist中的scheme
 *  @param compltionBlock 支付结果回调Block
 *
 *  @return YES:表示URL为支付宝支付URL,URL已经被拦截转化;NO:表示URL非支付宝支付URL;
 */
 - (BOOL)payInterceptorWithUrl:(NSString *)urlStr
                    fromScheme:(NSString *)schemeStr
                      callback:(CompletionBlock)completionBlock;

接口功能
本接口首先是个拦截器,拦截支付宝H5支付URL;其次是个支付方式转化器,将手机网站支付方式转化为APP支付方式。
参数说明

参数名称 类型 说明
urlStr NSString * 手机网站支付的请求URL
schemeStr NSString * 接入方App注册的URL scheme,供支付完成后跳回接入方App
completionBlock objc(^CompletionBlock)(NSDictionary *resultDic) 支付结束之后的回调其中CompletionBlock定义如下:objctypedef void(^CompletionBlock)(NSDictionary \*resultDic);

同步拦截结果返回值说明

返回值类型 说明
BOOL 1.如果urlStr是有效的支付宝H5支付URL,则说明拦截转化成功,返回YES,商户容器无需再加载该URL;
2.如果是无效的,则返回NO,商户容器需要继续加载该URL。

异步支付结果返回值说明
支付结束后SDK将回调completionBlock,并将支付结果resultDic(NSDictionary *类型)作为参数传入该Block。resultDic中主要包含两个字段,如下所示:

参数名称 类型 说明
resultCode NSString * 返回码,标识支付状态,含义如下:
9000——订单支付成功
8000——正在处理中
4000——订单支付失败
5000——重复请求
6001——用户中途取消
6002——网络连接出错
returnUrl NSString * 支付结束后应当跳转的url地址

接口使用方式
调用本接口对支付宝支付URL进行拦截和支付转化。
当接口调用完成后,该接口会返回一个BOOL类型的同步拦截结果,如果同步结果返回值为YES,说明传入的URL为支付宝支付URL,支付宝SDK已经成功拦截该URL,并转化为APP支付方式,商户容器无需再加载该URL;如果返回值为NO,说明传入的URL并非支付宝支付URL,商户容器需要继续加载该URL;
当支付结束后,会通过回调的方式返回异步支付结果,如果返回的支付结果中的resultCode为9000,则表示支付成功,接入方可以提示用户支付成功;如果返回结果不是9000,无需做任何处理。当返回的returnUrl不为空,建议接入方跳转到该returnUrl。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{   
    __weak APWebViewController* wself = self;
    BOOL isIntercepted = [[AlipaySDK defaultService] payInterceptorWithUrl:[request.URL absoluteString] fromScheme:@"alisdkdemo" callback:^(NSDictionary *result) {
        // 处理支付结果
        NSLog(@"%@", result);
        // isProcessUrlPay 代表 支付宝已经处理该URL
        if ([result[@"isProcessUrlPay"] boolValue]) {
            // returnUrl 代表 第三方App需要跳转的成功页URL
            NSString* urlStr = result[@"returnUrl"];
            [wself loadWithUrlStr:urlStr];
        }
    }];
	
    if (isIntercepted) {
        return NO;
    }
    return YES;
}
 

Android接入说明

配置

步骤1:导入开发资源

  1. 将alipaySdk-xxxxxxxx.jar包放入商户应用工程的libs目录下,如下图。
    image

  2. 进入商户应用工程的“Project Structure”,在app module下选择“File dependency”,将libs目录下的alipaySDK-xxxxxxxx.jar导入,如下图。
    image

或者在app module下的build.gradle下手动添加依赖,如下代码所示:

dependencies {
    ......
    compile files('libs/alipaySdk-20170725.jar')
    ......
}

步骤2:修改Manifest
在商户应用工程的AndroidManifest.xml文件里面添加声明:

<activity
            android:name="com.alipay.sdk.app.H5PayActivity"
            android:configChanges="orientation|keyboardHidden|navigation"
            android:exported="false"
            android:screenOrientation="behind" >
</activity>
<activity
            android:name="com.alipay.sdk.auth.AuthActivity"
            android:configChanges="orientation|keyboardHidden|navigation"
            android:exported="false"
            android:screenOrientation="behind" >
 </activity>

和权限声明:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

步骤3:添加混淆规则
在商户应用工程的proguard-project.txt里添加以下相关规则:

-keep class com.alipay.android.app.IAlixPay{*;}
-keep class com.alipay.android.app.IAlixPay$Stub{*;}
-keep class com.alipay.android.app.IRemoteServiceCallback{*;}
-keep class com.alipay.android.app.IRemoteServiceCallback$Stub{*;}
-keep class com.alipay.sdk.app.PayTask{ public *;}
-keep class com.alipay.sdk.app.AuthTask{ public *;}
-keep class com.alipay.sdk.app.H5PayCallback {
    <fields>;
    <methods>;
}
-keep class com.alipay.android.phone.mrpc.core.** { *; }
-keep class com.alipay.apmobilesecuritysdk.** { *; }
-keep class com.alipay.mobile.framework.service.annotation.** { *; }
-keep class com.alipay.mobilesecuritysdk.face.** { *; }
-keep class com.alipay.tscenter.biz.rpc.** { *; }
-keep class org.json.alipay.** { *; }
-keep class com.alipay.tscenter.** { *; }
-keep class com.ta.utdid2.** { *;}
-keep class com.ut.device.** { *;}

至此,开发包开发资源导入完成。

接口调用说明

SDK中提供了若干接口,手机网站转Native支付只用到其中一部分,本文未提到的接口无需关注。
如何调用提供的接口?
APP支付最新版本 15.4.0 新增拦截+支付二合一接口(payInterceptorWithUrl...),该接口将原来的获取H5支付订单信息接口和支付接口进行了合并。
如何实现手机网站转Native支付?
步骤一: 在接入方App中拦截H5的URL;
步骤二: 调用新增拦截+支付二合一接口(payInterceptorWithUrl...)进行URL拦截及支付转化;具体参照如下接口说明。

拦截+支付二合一接口

接口原型

/**
 * 支付宝H5支付URL拦截器,完成拦截及支付方式转化
 * 
 * @param h5PayUrl          待过滤拦截的 URL
 * @param isShowPayLoading  是否出现loading
 * @param callback          异步回调接口
 * 
 * @return true:表示URL为支付宝支付URL,URL已经被拦截并支付转化;false:表示URL非支付宝支付URL;
 * 
 */
 public synchronized boolean payInterceptorWithUrl(final String h5PayUrl, final boolean isShowPayLoading, final H5PayCallback callback)

接口功能
本接口首先是个拦截器,拦截支付宝H5支付URL;其次是个支付方式转化器,将手机网站支付方式转化为APP支付方式。
参数说明

参数名称 类型 说明
h5PayUrl String 手机网站支付的请求URL
isShowPayLoading boolean 是否出现loading
callback H5PayCallback 异步回调接口

同步拦截结果返回值说明

返回值类型 说明
boolean 1.如果h5PayUrl是有效的支付宝H5支付URL,则说明拦截转化成功,返回ture,商户容器无需再加载该URL;
2.如果是无效的,则返回false,商户容器需要继续加载该URL。

异步支付结果返回值说明
支付结束后SDK将回调H5PayCallback,并将支付结果H5PayResultModel作为参数传入该Callback。H5PayResultModel中主要包含两个字段,如下所示:

参数名称 类型 说明
resultCode String 返回码,标识支付状态,含义如下:
9000——订单支付成功
8000——正在处理中
4000——订单支付失败
5000——重复请求
6001——用户中途取消
6002——网络连接出错
returnUrl String 支付结束后应当跳转的url地址

接口使用方式
调用本接口对支付宝支付URL进行拦截和支付转化。
当接口调用完成后,该接口会返回一个boolen类型的同步拦截结果,如果同步结果返回值为true,说明传入的URL为支付宝支付URL,支付宝SDK已经成功拦截该URL,并转化为APP支付方式,商户容器无需再加载该URL;如果返回值为false,说明传入的URL并非支付宝支付URL,商户容器需要继续加载该URL;
当支付结束后,会通过回调的方式返回异步支付结果,如果返回的支付结果中的resultCode为9000,则表示支付成功,接入方可以提示用户支付成功;如果返回结果不是9000,无需做任何处理。当返回的returnUrl不为空,建议接入方跳转到该returnUrl。

@Override
public boolean shouldOverrideUrlLoading(final WebView view, String url) {
    if (!(url.startsWith("http") || url.startsWith("https"))) {
        return true;
    }

    /**
     * 推荐采用的新的二合一接口(payInterceptorWithUrl),只需调用一次
     */
    final PayTask task = new PayTask(H5PayDemoActivity.this);
    boolean isIntercepted = task.payInterceptorWithUrl(url, true, new H5PayCallback() {
        @Override
        public void onPayResult(final H5PayResultModel result) {
            // 支付结果返回
            final String url = result.getReturnUrl();
            if (!TextUtils.isEmpty(url)) {
                H5PayDemoActivity.this.runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        view.loadUrl(url);
                    }
                });
            }
        }
    });

    /**
     * 判断是否成功拦截
     * 若成功拦截,则无需继续加载该URL;否则继续加载
     */
    if (!isIntercepted) {
        view.loadUrl(url);
    }
    return true;
}
 

沙箱联调指南

沙箱环境是开放平台提供给开发者调试接口的环境,具体操作步骤见沙箱接入指南
请您在使用SDK时,在支付接口前调用如下方法用于切换沙箱环境与生产环境,如果不使用此方法,默认使用生产环境。

EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX);

方法调用位置如下图所示:
image

注:在生产环境,必须将此代码注释!
使用沙箱版钱包测试:点击开发者中心-沙箱环境-沙箱工具
注:在沙箱调通接口后,必须在线上进行测试与验收,所有返回码及业务逻辑以线上为准。

onlineServer