手机网站支付转 APP 支付

如果您已经接入了手机网站支付,除了“集成流程详解”中介绍的接入方式,支付宝推荐另一种更为便利的SDK接入方式——手机网站支付转为Native支付。

概述

如果您已经接入支付宝手机网站支付,可以通过接入我们的SDK将手机网站支付转为Native支付。接入过程极其简单,只需拦截手机网站支付的url,将该url转交给SDK进行处理;无需接入者解析参数字段,接入者的服务端也无需改造。

为什么要将手机网站支付转为 Native 支付? Native 支付的用户体验和支付成功率均优于手机网站支付。

对比

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

手机网站支付流程

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

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

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

手机网站转 Native 支付流程

下载 Demo,并将 Demo App安装到手机上即可体验该流程,请确保手机上安装了支付宝 App。

步骤一: 运行 Demo,并在 Demo 中打开淘宝主页(www.taobao.com)。
iOS: 点击 URLPay->openUrl,输入 www.taobao.com。

Android: 点击网页支付转native。

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

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>

@implementation 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 目录下,如下图。

1.png

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

3.png

或者在 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;
}

onlineServer