pingpp-react-native
Ping++ 是为移动端应用以及 PC 网页量身打造的下一代支付系统,通过一个 SDK 便可以同时支持移动端以及 PC 端网页的多种主流支付渠道,你只需要一次接入即可完成多个渠道的接入。 Ping++ SDK 包括 Client SDK 和 Server SDK 两部分,支持主流的七种后端开发语言,适配了 Android,iOS 和 HTML5 三种移动端平台以及 PC 端网页。
支持以下渠道支付
- 支付宝 (alipay)
- 微信支付 (wx)
- 银联支付(upacp)
- 百付宝Wap (bfb_wap)
- QQ钱包 (qpay)
安装
npm install pingpp-react-native --save
link引用
最新版 React Native (>=0.31) 已经支持 link 命令,不需要再使用三方的 rnpm来 link 引用了。
react-native link pingpp-react-native
这个操作会把 pingpp-react-native 模块下的客户端模块自动映射到 ReactNative工程的对应的 IOS和 Android目录里。 注意,自动link并不是万能的,有些模块我们需要再手动添加一些引用。
iOS端配置
打开xcode,TARGET -> General -> Linked Frameworks and Libraries ,添加添加所需依赖 Frameworks:
CFNetwork.framework
SystemConfiguration.framework
Security.framework
QuartzCore.framework
CoreTelephony.framework
CoreMotion.framework
libc++.tbd
libz.tbd
额外配置
-
iOS 9 以上版本如果需要使用支付宝和微信渠道,需要在
Info.plist
添加以下代码:<key> LSApplicationQueriesSchemes </key> <array> <string>weixin</string> <string>wechat</string> <string>alipay</string> <string>alipays</string> <string>mqq</string> </array>
-
为了用户操作完成后能够跳转回你的应用,请务必添加 URL Schemes:在 Xcode 中,选择你的工程设置项,选中 TARGETS 一栏,在 Info 标签栏的 URL Types 添加 URL Schemes,如果使用微信,填入微信平台上注册的应用程序 id(为 wx 开头的字符串)。如果不使用微信,则自定义,建议起名稍复杂一些,尽量避免与其他程序冲突。允许英文字母和数字,首字母必须是英文字母,不允许特殊字符。
-
iOS 9 限制了 http 协议的访问,如果 App 需要访问
http://
,需要在Info.plist
添加如下代码:<key> NSAppTransportSecurity </key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> </dict>
-
如果使用到
CmbWallet
(招行一网通) 需要把 招行一网通 提供的秘钥CMBPublicKey
添加到Info.plist
如以下代码:<key> CMBPublicKey </key> <string> IwxiAyJIT4tlwJSCbRRE0jZFTvYjt02/CrlutsMzd5O4B9PaVyUmIKSasdasdasdhWTyp3Bb9T7c9ujiUJOJ8y7893grwEae9yiOBoBmByVsCMTaxnc+lMr7A9ifk48Tz61WxsxnQTyYzrIVbuerQIUi3PSORwcPMRqi+XLX8qPXkNpLT9dMvjOasdasdasdUaAdPFc2YFHwl9dHf2ydQsxh1BHvaVO0OO+GtZ04ZKjxRyJW2HfghKLJijl;XTjrWSNizcdoefFKQsTdzvcPNvx7PsxuXKo9SosheeS/SHPk9sGNdwvL55yEBA8gNs0XZbkxJYjuwrwsQInC/N6QSaI0f0kyTA== </string>
-
CmbWallet
(招行一网通) 需要把react-native-ios/TestProject/node_modules/pingpp-react-native/CmbWalletResources
目录下的SecreteKeyBoard
文件夹手动添加到 工程中的Assets.xcassets
添加成功后即可删除该目录下的SecreteKeyBoard
文件夹
使用方法
import Pingpp from 'pingpp-react-native';
iOS 使用示例
/** * 调用支付* @param object {"object":"charge 或 order" , "urlScheme":"YOU-URLSCHEME"}* @param function completionCallback 支付结果回调 (result, error)*/Pingpp; /*** 开启/关闭 Ping++ debug 模式 * @param boolean true 或 false*/ Pingpp;
接收并处理交易结果
渠道为百度钱包或者渠道为支付宝但未安装支付宝钱包时,交易结果会在调起插件时的 Completion 中返回。渠道为微信、支付宝(安装了支付宝钱包)、银联或者测试模式时,请实现 UIApplicationDelegate 的 - application:openURL:xxxx: 方法:
打开 AppDelegate.m
,添加一个函数来触发支付完成后的回调
//iOS 8 及以下 - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation //iOS 9 及以上 - (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary *)options
Android 使用示例
导入Android Studio
将example下的android导入到Android Studio进行编译
注册 activity
<!-- Ping++ SDK --><!--使用QQ钱包时,需要填写--><!-- 填写规则:qwallet + APP_ID --><!-- 微信支付 sdk ,也是 Ping++ sdk 调用入口 --><!-- 支付宝 sdk --><!-- 银联支付 sdk -->
/** * 开启/关闭 Ping++ debug 模式 * @param boolean true 或 false */ Pingpp; /** * 调用支付 * @param charge 或 order * @param function completionCallback 支付结果回调 (result) */Pingpp;
关于如何使用 SDK 请参考 开发者中心