react-native-ipaynow插件的使用(iOS)

功能:

通过使用现在支付SDK实现微信支付(简洁版)、支付宝支付功能。

使用步骤:

一、链接Ipaynow库

参考:https://reactnative.cn/docs/0.50/linking-libraries-ios.html#content

手动添加:

1、添加react-native-ipaynow插件到你工程的node_modules文件夹下
2、添加Ipaynow库中的.xcodeproj文件在你的工程中
3、点击你的主工程文件,选择Build Phases,然后把刚才所添加进去的.xcodeproj下的Products文件夹中的静态库文件(.a文件),拖到Link Binary With Libraries组内。

自动添加:
npm install react-native-ipaynow --save 
或
yarn add react-native-ipaynow

react-native link

由于AppDelegate中使用Ipaynow库,所以我们需要打开你的工程文件,选择Build Settings,然后搜索Header Search Paths,然后添加库所在的目录$(SRCROOT)/../node_modules/react-native-ipaynow/ios/Ipaynow/IpaynowPlugin

二、开发环境配置

参考:https://payment2.ipaynow.cn/centerForDeveloper/mobileDocument?terminalId=02

1、引入系统库

左侧目录中选中工程名,在TARGETS->Build Phases-> Link Binary With Libaries中点击“+”按钮,在弹出的窗口中查找并选择所需的库(见下图),单击“Add”按钮,将库文件添加到工程中。

  • libz.tbd
  • libsqlite3.0.tbd
  • CoreGraphics.framework
  • CoreTelephony.framework
  • QuartzCore.framework
  • SystemConfiguration.framework
  • Security.framework
  • Foundation.framework
  • UIKit.framework
react-native-ipaynow插件的使用(iOS)_第1张图片
2、环境配置

Xcode中,选择你的工程设置项,选中“TARGETS”一栏,在“info”标签栏的“URL type”添加“URL scheme”为自定义URL Scheme

react-native-ipaynow插件的使用(iOS)_第2张图片

在工程的Build Settings中找到Other Linker Flags中添加-ObjC宏。

bitcode设置为NO

react-native-ipaynow插件的使用(iOS)_第3张图片

三、简单使用

方法
Event Name Returns Notes
getPresignStr string 根据订单信息获取未签名字符串
pay string 根据待签名串与服务器生成的签名串进行支付
1、重写AppDelegate的openURL方法:
#import "IpaynowPluginApi.h"

- (void)applicationWillEnterForeground:(UIApplication *)application{
    [IpaynowPluginApi willEnterForeground];
}

//iOS9之后使用
-(BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary *)options{
    
    NSString *sourceApplication = options[@"UIApplicationOpenURLOptionSourceApplicationKey"];
    
    return [IpaynowPluginApi application:app openURL:url sourceApplication:sourceApplication annotation: [[NSNull alloc]init]];
}

//iOS9之前使用
-(BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation{
    return  [IpaynowPluginApi application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
}

2、js文件
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';

import Ipaynow from 'react-native-ipaynow';

function show(title, msg) {
    Alert.alert(title+'', msg+'');
}

let md5 = 'mhtSignType=MD5&mhtSignature=d866ed04e7568254b94a75c8c586fcfa';
let scheme = 'ipaynow';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Dimensions,
  Alert,
  ScrollView,
  TouchableHighlight,
  NativeAppEventEmitter
} from 'react-native';

export default class TextReactNative extends Component {

    componentDidMount() {
        
    }
    
    getPresignStr() {
        Ipaynow.getPresignStr({
            'appId': '1408709961320306',
            'consumerId': 'IPN00001',
            'consumerName': 'IPaynow',
            'mhtOrderName': 'IOS插件测试用例',
            'mhtOrderAmt':'10',
            'mhtOrderDetail': '关于订单验证接口的测试',
            'notifyUrl': 'http://localhost:10802/',
            'payChannelType':'12',
        },(res) => {
            show('getPresignStr', res);
        });
        
    }


    pay() {
        Ipaynow.pay(md5,scheme)
         .then(result => {
        console.log("result is ", result);
        show("result is ", result);
        })
         .catch(error => {
        console.log(error);
        show(error);
        });
    }


    render() {
        return (
            

                Ipaynow SDK for React Native (iOS)

                
                    getPresignStr
                

                
                    pay
                

            
        );
    }
}

const styles = StyleSheet.create({
  wrapper: {
        paddingTop: 60,
        paddingBottom: 20,
        alignItems: 'center',
    },
    pageTitle: {
        paddingBottom: 40
    },
    button: {
        width: 200,
        height: 40,
        marginBottom: 10,
        borderRadius: 6,
        backgroundColor: '#f38',
        alignItems: 'center',
        justifyContent: 'center',
    },
    buttonTitle: {
        fontSize: 16,
        color: '#fff'
    }

});

github链接:
https://github.com/zhoumeitong/react-native-ipaynow

现在支付文档链接:
https://payment2.ipaynow.cn/centerForDeveloper/mobileDocument?terminalId=02

你可能感兴趣的:(react-native-ipaynow插件的使用(iOS))