文档中心 > 开放平台

开放平台

手机网站支付转Native支付

更新时间：2017/07/27 访问次数：58604

背景

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

简介

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

对比

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

手机网站支付流程

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

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

步骤三： 点击“立即支付”进入付款详情页面（H5页面）

手机网站转Native支付流程

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

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

Android： 点击网页支付转native

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

Android截图

对比总结

主要区别是：如果用户手机安装了支付宝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中，增加以下依赖：

  其中，需要注意的是：

  • 如果是Xcode 7.0之后的版本，需要添加libc++.tbd、libz.tbd；
  • 如果是Xcode 7.0之前的版本，需要添加libc++.dylib、libz.dylib（如下图）。

步骤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目录下，如下图。

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

或者在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);
方法调用位置如下图所示：

注：在生产环境，必须将此代码注释！

使用沙箱版钱包测试：点击开发者中心-沙箱环境-沙箱工具

注：在沙箱调通接口后，必须在线上进行测试与验收，所有返回码及业务逻辑以线上为准。

FAQ

关于此文档暂时还没有FAQ
有用(22) 我要提问
返回
顶部
阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 阿里旅行·去啊 | 阿里云计算 | YunOS | 阿里通信 | 万网 | 高德 | 优视 | 友盟 | 酷盘 | 虾米 | 天天动听 | 来往 | 钉钉 | 11Main | 支付宝
关于淘宝 合作伙伴 营销中心 联系客服 开放平台 诚征英才 联系我们 网站地图 法律声明 © 2016 Taobao.com 版权所有
网络文化经营许可证：文网文[2010]040号 | 增值电信业务经营许可证：浙B2-20080224-1 | 信息网络传播视听节目许可证：1109364号