@zhaoxhg/react-native-puti-pay
v1.4.9
Published
微信和支付宝支付的react-native模块
Downloads
15
Readme
Install (@zhaoxhg/react-native-puti-pay)
npm i --save @zhaoxhg/react-native-puti-pay
or
yarn add @zhaoxhg/react-native-puti-pay
<0.6.0 react-native link @zhaoxhg/react-native-puti-pay
import XPay from "@zhaoxhg/react-native-puti-pay";
微信支付需要做一些配置,参考官方文档:iOS接入指南
以上为使用该forks的全部步骤。
===========================================================================
以下为原文:
react-native-puti-pay
Getting started
$ npm install react-native-puti-pay --save
//or
$ yarn add react-native-puti-pay
Mostly automatic installation
//react-native version>0.60+
$ cd ios && pod install
//or
$ react-native link react-native-puti-pay
Manual installation
iOS
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-puti-pay
and addRNPutiPay.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNPutiPay.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)<
Android
Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.puti.paylib.PayReactPackage;
to the imports at the top of the file - Add
new PayReactPackage()
to the list returned by thegetPackages()
method
- Add
Append the following lines to
android/settings.gradle
:include ':react-native-puti-pay' project(':react-native-puti-pay').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-puti-pay/android')
Insert the following lines inside the dependencies block in
android/app/build.gradle
:compile project(':react-native-puti-pay')
Config
iOS
(使用pod管理则不需要这一步)TARGET -> Build Phases -> Linked Binary With Libraries 添加以下系统库
在项目中的info.plist中加入应用白名单,右键info.plist选择source code打开(plist具体设置在Build Setting -> Packaging -> Info.plist File可获取plist路径) :
<key>LSApplicationQueriesSchemes</key> <array> <!-- 支付宝 URL Scheme 白名单--> <string>alipay</string> <!-- 微信 URL Scheme 白名单--> <string>wechat</string> <string>weixin</string> </array>
设置 URL Scheme URL Scheme是通过系统找到并跳转对应app的设置,通过向项目中的info.plist文件中加入URL types可使用第三方平台所注册的appkey信息向系统注册你的app,当跳转到第三方应用支付后,可直接跳转回你的app。微信填写微信ID,支付宝也建议添加ap+加支付宝应用id的形式以免冲突。
在入口文件AppDelegate.m下设置回调
#import <React/RCTLinkingManager.h> - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation { return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation]; } - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options { return [RCTLinkingManager application:application openURL:url options:options]; }
Android
在包名目录下创建wxapi文件夹,新建一个名为WXPayEntryActivity
的activity继承 com.puti.paylib
包名下的XWXPayEntryActivity
。
// wxapi/WXPayEntryActivity.jave
package com.自己包名.wxapi;
import com.puti.paylib.XWXPayEntryActivity;
public class WXPayEntryActivity extends XWXPayEntryActivity {
}
并配置Android Manifest XML
<activity
android:name=".wxapi.WXPayEntryActivity"
android:label="@string/app_name"
android:exported="true" />
如果在早期版本有可能需要实现ReactPackage需要实现createJSModules方法。
那么在PayReactPackage文件添加一行
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
Usage
import XPay from 'react-native-puti-pay'
//设置微信ID
XPay.setWxId(id)
//设置 支付宝URL Schemes
XPay.setAlipayScheme(scheme)
//支付宝开启沙箱模式 仅限安卓
XPay.setAlipaySandbox(isSandBox)
//支付宝支付
//orderInfo是后台拼接好的支付参数
XPay.alipay(orderInfo,(res)=>console.log(res))
//微信支付
//这些参数都是由后台生成的
let params = {
partnerId:partnerId,
prepayId: prepayId,
packageValue:packageValue,
nonceStr: nonceStr,
timeStamp: timeStamp,
sign: sign,
}
XPay.wxPay(params,(res)=>console.log(res))
Issues
示例 此项目已经集成好,可以参照上面支付例子,如果调用支付跳转到了微信支付宝,不管支付成不成功也跳转回来并有相应的回调则说明已经集成成功了,若支付失败就是所传入参数的问题(你可以强势甩锅给后端开发人员了) 由于之前项目原因,只需要微信支付宝支付,所有就写了这个插件,此项目比较适用于只需要微信支付宝支付功能,或者微信支付宝分享登录等功能已由其它第三方聚合平台(友盟)等完成。如需单独集成, 建议微信使用react-native-wechat, 支付宝使用react-native-yunpeng-alipay。 一下列出一些集成微信支付宝支付经常遇到的坑。
安卓微信支付时跳转到微信了然后闪退 这是不熟悉安卓人员经常遇到的坑,这是安卓的签名机制问题,安卓签名跟微信后台应用配置的签名不匹配,微信判定应用非法直接退出。 如果出现这个问题,修改签名并且
清理微信的数据
(微信有缓存,需要直接清理数据,或者卸载重装,或者换台手机) 要想一劳永逸避免这个问题 参考此配置项将debug签名以及release签名同步debug { signingConfig signingConfigs.release } release { signingConfig signingConfigs.release }
ios 支付完没有返回商家按钮 ios应用间跳转判断跳转到哪个应用是通过上面ios配置第三部设置的URL Scheme区分的。
XPay.setWxId()
,XPay.setAlipayScheme()
方法都是通过支付的sdk将Scheme传给微信支付宝,支付成功后才能正确跳转回应用,也才有返回商家按钮 所有要是没有此功能,请再对照文档检查一遍