在react native中接入支付其实就是在原生的基础上桥接过来，微信支付和支付宝支付都一样，不管是做原生的还是react native其实都一样，如果要在react native中接入不一定非要在github上找那些第三方的库，其实他们也是这样做的，我们完全可以自己桥接，微信支付之前已经记录过了，在此记录支付宝的集成过程，支付宝有个很特别的地方就是手机安装了支付宝客户端与未安装客户端支付的回调方法是不同的，当手机未安装支付宝客户端时，会吊起一个h5页面进行支付，当安装了客户端时吊起客户端，回调走AppDelegate里的方法，这一点尤其重要，很多第三方的库都是使用了一个回调导致安装了客户端的时候没有执行相应的方法。
文件放在github，将文件拖入项目后，按相关支付平台文档配置好即可
=>走你
在react native端建一个类Pay.js
import {
NativeModules
} from 'react-native';
module.exports = NativeModules.ReactNativePay;
//导入了文件夹中的.h和.m文件后，在发起支付的时候，一般都是请求完订单成功拿到结果后
在reactnative中调用方法 支付宝支付：请求成功后拿到订（responseJson.data.orderString）
Pay.onAliPay(responseJson.data.orderString) .then((message)=>{
console.log("message" + message); if(message !== "")
/ / 支付成功的处理
this.refs.toast.show(message, DURATION.LENGTH_SHORT);
}) .catch(e=>{
console.log("e.message" + e.message);
if(e.message !== "") this.refs.toast.show(e.message, DURATION.LENGTH_SHORT);
if(e.code == '-1' || e.message =='支付失败') {
/ / 支付失败的处理
} })
微信支付： 请求拿到订单数据（responseJson.data） this.setState({payInfo:Testing.getTestPay(responseJson.data)});//转成payInfo模型
let sign = this.getPaySignStrMethod(this.state.payInfo);
if(sign==null){
this.refs.toast.show("支付信息请求错误", DURATION.LENGTH_SHORT); return; }
var params = { partnerId:this.state.payInfo.partnerId, prepayId:this.state.payInfo.prepayId, package:this.state.payInfo.package, nonceStr:this.state.payInfo.nonceStr, timeStamp:this.state.payInfo.timeStamp, sign:sign, }
Pay.onWxPay(params) .then((message)=>{
console.log("message" + message);
if(message !== "") this.refs.toast.show(message, DURATION.LENGTH_SHORT); / / 支付成功的处理 }) .catch(e=>{
console.log("e.message" + e.message);
if(e.message !== "") this.refs.toast.show(e.message, DURATION.LENGTH_SHORT);
if(e.code == '-1' || e.message =='支付失败') {
/ / 支付失败的处理
} });
//生成支付签名sign // C.weChatPayKey是一个支付的key，在申请的微信支付开发者账号里有有
getPaySignStrMethod=(payInfo)=>{
if(payInfo.appId !== undefined && payInfo.appId !== '' && payInfo.nonceStr !== undefined && payInfo.nonceStr !== '' && payInfo.partnerId !== undefined && payInfo.partnerId !== '' && payInfo.prepayId !== undefined && payInfo.prepayId !== '' && payInfo.timeStamp !== undefined && payInfo.timeStamp !== '') {
return "appid=" + payInfo.appId + "&noncestr=" + payInfo.nonceStr + "&package=" + payInfo.package + "&partnerid=" + payInfo.partnerId + "&prepayid=" + payInfo.prepayId + "×tamp=" + payInfo.timeStamp + "&key=" + C.weChatPayKey;
}else {
return null
}
};
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import "React/RCTBridgeModule.h"
@interface ReactNativePay : NSObject<RCTBridgeModule>
@end
#import "ReactNativePay.h"
#import <AlipaySDK/AlipaySDK.h>
#import "AliPayManager.h"
@implementation ReactNativePay
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(onAliPay:(NSString *)orderString resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) {
// NOTE:未安装支付宝客户端走下面方法，安装了不会走
if (orderString != nil){
NSString *appScheme = @"cccc";//配置调回app的唯一标识，见支付宝文档
[[AlipaySDK defaultService] payOrder:orderString fromScheme:appScheme callback:^(NSDictionary *resultDic) {
//支付回调
NSString *resultStatus = [resultDic objectForKey:@"resultStatus"];
if ([resultStatus isEqualToString:@"9000"]){ //订单支付成功
resolve(@"支付成功");
}else if([resultStatus isEqualToString:@"6002"]){//网络错误
reject(resultStatus,@"网络错误",nil);
}else if([resultStatus isEqualToString:@"6001"]){//中途取消
reject(resultStatus,@"取消支付",nil);
}else{//处理失败
reject(resultStatus,@"支付失败",nil);
}
}];
}
//NOTE:已安装支付宝客户端走appdelegate回调
[[AliPayManager sharedManager] setPaySuccess:^(NSDictionary *resultDic, NSString *message) {
resolve(@"支付成功");
}];
[[AliPayManager sharedManager] setPayFailure:^(NSDictionary *resultDic, NSString *message) {
reject(@"", message,nil);
}];
}
@end
===========================================
#import <Foundation/Foundation.h>
//支付成功Block的定义
typedef void(^PaySuccess)(NSDictionary *resultDic, NSString* message);
typedef void(^PayFailure)(NSDictionary *resultDic, NSString* message);
@interface AliPayManager : NSObject
@property (nonatomic,copy)PayFailure payFailure;
@property (nonatomic,copy)PaySuccess paySuccess;
+ (instancetype)sharedManager;
-(void)dealWithAliPayCallBackUrl:(NSURL *)url;
@end
#import "AliPayManager.h"
#import <AlipaySDK/AlipaySDK.h>
@implementation AliPayManager
+(instancetype)sharedManager {
static dispatch_once_t onceToken;
static AliPayManager *instance;
dispatch_once(&onceToken, ^{
instance = [[AliPayManager alloc] init];
});
return instance;
}
-(void)dealWithAliPayCallBackUrl:(NSURL *)url{
[[AlipaySDK defaultService] processOrderWithPaymentResult:url standbyCallback:^(NSDictionary *resultDic) {
NSLog(@"result = %@",resultDic);
//支付回调
NSString *resultStatus = [resultDic objectForKey:@"resultStatus"];
if ([resultStatus isEqualToString:@"9000"]){ //订单支付成功
_paySuccess(nil,@"支付成功");;
}else if([resultStatus isEqualToString:@"6002"]){//网络错误
_payFailure(nil,@"网络错误");
}else if([resultStatus isEqualToString:@"6001"]){//中途取消
_payFailure(nil,@"支付取消");
}else{//处理失败
_payFailure(nil,@"支付失败");
}
}];
}
@end
//处理AppDelegate中的回调
-(BOOL)openURLCallBackMethod:(NSURL *)url{
if ([url.host isEqualToString:@"safepay"]) {
//支付宝
[[AliPayManager sharedManager] dealWithAliPayCallBackUrl:url];
return YES;
}else{
//微信
}
}
- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url
{
return [self openURLCallBackMethod:url];
}
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return [self openURLCallBackMethod:url];
}
//ios9之后
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString*, id> *)options
{
return [self openURLCallBackMethod:url];
}
网友评论