写在前面
重申一下,ReactNative
开发的App
是NativeApp
,不是WebApp
或者HybridApp
,所以我们需要开通的是支付宝的App支付功能,别申请错了。申请完成之后就可以接下去开发了。
支付宝支付
接入支付宝支付前建议先查看 支付宝官方文档,先按照要求创建应用并完成配置。不过要注意以下两点:
第一,App支付不能在沙箱做测试,所以我们需要先 “上线” 应用,这个过程会有1天的审核时间。
第二,调试时建议添加个一分钱的商品作为测试商品,开发免不了要支付几次。
安装模块
支付宝支付我们使用了ReactNative
社区推荐的 react-native-yunpeng-alipay
模块,可以使用 npm
安装
- 1
- 1
link引用
最新版 React Native
(>=0.31) 已经支持 link
命令,不需要再使用三方的 rnpm
来 link
引用了。
- 1
- 1
这个操作会把
react-native-yunpeng-alipay
模块下的客户端模块自动映射到 ReactNative工程的对应的 iOS和 Android目录里。 注意,自动link
并不是万能的,有些模块我们需要再手动添加一些引用。
IOS端配置
对于ios端,除了上面的link
操作之外,我们还需要手动做下面的三件事:
添加Frameworks和Libraries
打开xcode,TARGET
-> General
-> Linked Frameworks and Libraries
,添加
CoreMotion.framework
CoreTelephony.framework
libc++
libz
添加 URL Schema
打开 Info.plist
,添加一项URL types
:
触发回调
打开 AppDelegate.m
,添加一个函数来触发支付完成后的回调
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
Android端配置
android
端配置比较简单,除了上面的link
操作外,我们还需要修改Manifest
文件
修改Manifest
在商户应用工程的AndroidManifest.xml
文件里面添加声明:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
和权限声明:
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
添加混淆规则
在商户应用工程的proguard-project.txt
里添加以下相关规则:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
Action封装
我们的App开发采用的是redux
框架,为了方便使用,我把支付宝支付封装成了Action
,你可以参考一下。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
@欢迎关注我的 github 和 个人博客 -Jafeney