蜕变与梦想

无论是支付宝还是微信的支付集成,都需要两个部分进行配合,一个是服务端的订单信息生成(经过处理加密后的),另一个就是APP客户端的集成。(微信支付下期分享)

源码地址: https://github.com/likeconan/Alipay_Wechat_Integration

支付宝服务端

一、获取你的AppId和配置支付宝公钥私钥

在登录蚂蚁金服开放平台后,获取你App应用对应的APPID (它目前就是在App图标旁的一串数字)。紧接着你就需要去配置你的公钥私钥了,具体步骤可以参考官方文档,写的很清楚。
https://docs.open.alipay.com/291/106097

不过需要注意的有以下几点:

1.如果你的服务端用的是非Java语言的,一定要选择对应的密钥格式,本分享用的是NodeJS写的服务端,至于密钥长度,1024,或者2048均可,建议以2048,所以选择如下图:

2.点击生成密钥后,你会发现密钥已经生成,分别为商户应用私钥和商户应用公钥,两者请都妥善保管至其他文件夹中。

3.在蚂蚁金服开放平台,开发者中心,该APP应用下的接口加签方式中,选择 RSA(SHA256)密钥 方式,并且上传该第二步骤产生的应用公钥并保存。

4.再次打开支付宝生成密钥工具,并且切换至【格式转换】选项卡中,将第二步骤产生的商户私钥粘贴至商户应用私钥中,并点击转PKCS1(非JAVA适用)私钥,它会提示该私钥已经为该格式(如果你是JAVA适用的请选择前者),我们重复该步骤的目的是为了生成供NodeJS可以读取并且解析的PEM文件(其他语言亦然),接着打开密钥文件路径,打开私钥文件,你会发现,文件头会有 --BEGIN RSA PRVIATE KEY -- 字样。

5. 保存该文件并且重命名alipay_private_key.pem。

6. 将私钥和公钥上传至支付宝开发的应用后,获取支付宝公钥,保存并且创建文件为alipay_public_key.pem 在开头和结尾分别加上:
-----BEGIN PUBLIC KEY----- -----END PUBLIC KEY-----

至此,密钥配置已经完成。

PS: 支付宝也有沙箱应用,其公钥私钥配置一模一样,在此不再赘述。

二、编写服务端代码

支付宝生成请求参数可以参考官方文 https://docs.open.alipay.com/204/105465/

其中公共参数和业务参数是一般支付时所需要的。在服务端生成签名其中有几个比较重要的点,一定要牢记,反复检查,避免验签过程一直失败,导致无法支付,浪费开发时间。(如果你的服务端语言是Java,.Net或者Php,那么恭喜你,无需看以下内容,因为支付宝有相关SDK使用,https://docs.open.alipay.com/54/103419

1.生成签名sign之前的参数字符串(暂且称为未签名支付串),一定要ASCII码递增排序。

2.生成签名后的sign参数放置未签名支付串末尾(签名支付串),其中未签名支付串的参数个数和值不能有任何改动。

3.将签名支付串进行encode。

可参考NodeJS代码如下:

至此支付宝服务端代码已经完成,由于本地开发notify_url必须为能够被访问的地址,如果想本地测试,建议可以使用ngrok。

支付宝Android集成

一、下载客户端SDK并且进行配置

在支付宝官网下载其SDK https://docs.open.alipay.com/54/104509 用Android Studio 打开你项目里的/android,以Project形式展开项目,并且在/app目录下新建文件夹libs(如果没有该文件夹),将下载的SDK jar包拖入或复制至libs文件夹内,如下图:

接着在 /android/app/build.gradle 内添加依赖, 如下图,注意jar包的名字要统一:

然后修改AndroidManifest.xml文件,添加以下内容:

最后再在proguard-rules.pro文件内末尾处添加以下内容:

至此Android配置已经完成,如果你在AndroidManifest.xml下,用Android Studio发现 alipay的 标签是红色未知引用状态,重启Android Studio即可,若还是红色,右键 alipaySdk jar包,选择Add as library 并且点击OK 即可。

二、编写React Native原生代码

React Native 提供了调用原生代码的方法,具体可以参考官方文档 Native Modules
http://facebook.github.io/react-native/docs/native-modules-android.html

首先我们用Android Studio 以Android文件目录格式打开,并且在java/com.app_demo目录下创建alipay package, 并且在其目录下新建PayAction.java和PayResult.java文件, 如下图:

接着调用react native 原生内容,编写方法,PayAction代码如下:

PayResult 代码如下:

紧接着将该方法暴露出来给React Native 前端使用,即在com.app_demo下创建AlipayReactPackage.java文件,代码如下

然后修改MainActivity里的方法,使MainActivity可以在PayAction中可以获取,修改后代码如下:

接着在MainApplication 里添加刚刚写好的AlipayReactPackage包,代码如下:

最后编写React Native Js内容,调用该pay方法:

至此支付宝Android端的集成就全部完成了,总体来说,比较简单,代码也很清晰,建议在开发过程中,多以真实App的环境进行开发,因为沙箱偶尔会出现网络或者其他未知的问题,而如果在真实环境中,也会出现各种问题,那就绝对是你代码的问题,例如签名错误。

支付宝IOS集成

一、下载客户端SDK并且进行配置

在支付宝官网下载其SDK https://docs.open.alipay.com/54/104509

1.用XCode打开你的项目即/ios文件夹,打开后在App_Demo文件夹下新建Group,命名为Alipay。接着在实际路径下, ios/APP_Demo,创建文件夹Alipay,并且粘贴两个sdk文件至该目录下。 然后再将该目录下的AlipaySDK两个文件拖入Alipay目录下,点击OK即可。

2. XCode选择Build Phases选项卡,展开 Link Binary With Libraries 添加支付宝相关依赖

添加完毕后如下图:

3.在Alipay下新建PayAction.hHeader File 头文件和PayAction.m Objective-C 文件 ,注意在新建的时候,如果没有实际Alipay的文件夹路径,要新建该文件夹,如下图:

4. 编写IOS端的代码,实现React Native调用原生方法,PayAction.h 和PayAction.m的代码如下:

5.最后修改AppDelegate.m文件,新增更改内容如下:

然后尝试build该项目,如果你发现Build不成功,并且提示的是AlipaySDK.h 头文件无法找到,那么你就需要在Build Settings里的Search Paths 中修改 Header Search Paths 如下图显示:

至此支付宝在IOS端的配置就完成了。

二、在客户端调用React Native方法

由于我们定义的方法名和方法和Android的一致,所以在此无需进行其他修改,可以直接执行。