文档中心 > 开放平台

手机网站支付转APP支付

更新时间:2017/03/01 访问次数:35252

如果您已经接入了手机网站支付,除了“集成流程详解”中介绍的接入方式,支付宝推荐另一种更为便利的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支付只用到其中一部分,本文未提到的接口无需关注。

如何调用提供的接口?
接口的调用方式是先调用defaultService获取SDK的实例,然后再调用提供的接口,以fetchOrderInfoFromH5PayUrl为例:

[[AlipaySDK defaultService]fetchOrderInfoFromH5PayUrl:url]

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

步骤一: 实现UIWebViewDelegate协议,拦截H5的URL;
步骤二: 调用SDK提供的“获取订单信息接口(fetchOrderInfoFromH5PayUrl)”对拦截的URL进行处理:

  • 如果返回nil或者返回的字符串长度为0则不拦截该URL
  • 反之则调用“支付接口(payUrlOrder…)”进行订单支付,并拦截URL

获取订单信息接口

接口原型

/**
 *  url order 获取接口
 *
 *  @param urlStr     拦截的 url string
 *
 *  @return 获取到的url order info
 */
- (NSString*)fetchOrderInfoFromH5PayUrl:(NSString*)urlStr;

接口功能

从拦截的URL中获取支付请求相关信息,然后封装成新的订单信息字符串作为返回值。如果该URL不是有效的支付宝支付URL,则返回空字符串。

参数说明

参数名称 类型 说明
urlStr NSString * 手机网站支付的请求URL

返回值说明

返回值类型 说明
NSString * 1.如果是有效的支付宝支付URL,则返回非空字符串(订单信息字符串)
2.如果是无效的支付宝支付URL,则返回空字符串

接口使用方式

调用本接口对拦截的URL进行处理,如果返回值为空字符串则不拦截该URL;如果返回值为非空字符串,则调用SDK提供的支付接口进行支付,使用示例如下:

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSString* orderInfo = [[AlipaySDK defaultService]fetchOrderInfoFromH5PayUrl:[request.URL absoluteString]];
    if (orderInfo.length > 0) {
        // 此处应该调用SDK提供的支付接口进行支付
        // 参考后文

        return NO;
    }
    return YES;
}

支付接口

接口原型

/**
 *  url支付接口
 *
 *  @param orderStr       订单信息
 *  @param schemeStr      调用支付的app注册在info.plist中的scheme
 *  @param compltionBlock 支付结果回调Block
 */
- (void)payUrlOrder:(NSString *)orderStr
         fromScheme:(NSString *)schemeStr
           callback:(CompletionBlock)completionBlock;

接口功能

完成订单支付并返回支付结果。

参数说明

参数名称 类型 说明
orderStr NSString * 调用fetchOrderInfoFromH5PayUrl接口返回的订单信息
schemeStr NSString * 接入方App注册的URL scheme,供支付完成后跳回接入方App
completionBlock (^CompletionBlock)(NSDictionary *resultDic) 支付结束之后的回调
其中CompletionBlock定义如下: typedef void(^CompletionBlock)(NSDictionary *resultDic);

返回值说明

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

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

接口使用方式

调用本接口进行支付。如果返回的resultCode为9000,接入方可以提示用户支付成功;返回结果不是9000的情况,无需做任何处理。如果returnUrl不为空,建议接入方跳转到该returnUrl。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSString* orderInfo = [[AlipaySDK defaultService]fetchOrderInfoFromH5PayUrl:[request.URL absoluteString]];
    if (orderInfo.length > 0) {
        // 调用支付接口进行支付
        [[AlipaySDK defaultService]payUrlOrder:orderInfo fromScheme:@"alisdkdemo" callback:^(NSDictionary* result) {
            // 处理返回结果
            NSString* resultCode = result[@"resultCode"];
            //建议操作: 根据resultCode做处理

            // returnUrl 代表 第三方App需要跳转的成功页URL
            NSString* returnUrl = result[@"returnUrl"];
            //建议操作: 打开returnUrl
        }];

        return NO;
    }
    return YES;
}

Android接入说明

配置

步骤1:导入开发资源

  1. 将alipaySDK-20150602.jar包放入商户应用工程的libs目录下,如下图。
  2. 进入商户应用工程的Java Build Path,将libs目录下的alipaySDK-20150602.jar导入,如下图。
  3. 选中Order and Export,勾选alipaySDK-20150602.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里添加以下相关规则:

-libraryjars libs/alipaySDK-20150602.jar

-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 *;}

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

接口调用说明

SDK中提供了若干接口,手机网站转Native支付只用到其中一部分,本文未提到的接口无需关注。

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

步骤一: 在接入方App中拦截H5的URL;
步骤二: 调用SDK提供的“获取订单信息接口(fetchOrderInfoFromH5PayUrl)”对拦截的URL进行处理:

  • 如果返回空字符串则不作任何处理
  • 反之则调用“支付接口(h5Pay)”进行订单支付,并拦截URL

获取订单信息接口

接口原型

/**
 * 获取H5native支付的信息
 * @param h5PayUrl
 * @return
 */
public synchronized String fetchOrderInfoFromH5PayUrl(String h5PayUrl)

接口功能

从拦截的URL中获取支付请求相关信息,封装成新的订单信息字符串作为返回值。如果该URL不是有效的支付宝支付URL,则返回空字符串。

参数说明

参数名称 类型 说明
h5PayUrl String 手机网站支付的请求URL

返回值说明

返回值类型 说明
String 1.如果是有效的支付宝支付URL,则返回非空字符串(订单信息字符串)
2.如果是无效的支付宝支付URL,则返回空字符串

接口使用方式

调用本接口对拦截的URL进行处理,如果返回值为空字符串则不拦截该URL;如果返回值为非空字符串,则调用SDK提供的支付接口进行支付,使用示例如下:

@Override
public boolean shouldOverrideUrlLoading(final WebView view, String url) {
    final PayTask task = new PayTask(H5PayDemoActivity.this);

    //处理订单信息
    final String ex = task.fetchOrderInfoFromH5PayUrl(url); 
        if (!TextUtils.isEmpty(ex)) {
            //调用支付接口进行支付
        } else {
            view.loadUrl(url);
        }
        return true;
    }
}

支付接口

接口原型

/**
  * 手机网站支付
  * @param h5PayInfo 订单信息
  * @param isShowPayLoading 是否显示loading图标
  * @return
  */
public synchronized H5PayResultModel h5Pay(String h5PayInfo, boolean isShowPayLoading)

接口功能

完成订单支付并返回支付结果。

参数说明

参数名称 类型 说明
h5PayInfo String 调用fetchOrderInfoFromH5PayUrl接口返回的订单信息字符串
isShowPayLoading boolean 是否显示loading界面

返回值说明

返回值类型为H5PayResultModel类,包含下述2个成员变量:

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

接口使用方式

调用本接口进行支付。如果返回的resultCode为9000,接入方可以提示用户支付成功;返回结果不是9000的情况,无需做任何处理。如果returnUrl不为空,建议接入方跳转到该returnUrl。

public boolean shouldOverrideUrlLoading(final WebView view, String url) {
    final PayTask task = new PayTask(H5PayDemoActivity.this);
    //处理订单信息
    final String ex = task.fetchOrderInfoFromH5PayUrl(url); 
    if (!TextUtils.isEmpty(ex)) {
        //调用支付接口进行支付
        new Thread(new Runnable() {
            public void run() {
                H5PayResultModel result = task.h5Pay(ex, true);
                //处理返回结果
                if (!TextUtils.isEmpty(result.getReturnUrl())) {
                    view.loadUrl(result.getReturnUrl());
                }
            }
        }).start();
    } else {
        view.loadUrl(url);
    }
    return true;
}

FAQ

关于此文档暂时还没有FAQ
返回
顶部
onlineServer