功能:
通過支付寶SDK(新版)實(shí)現(xiàn)APP支付寶支付功能
使用步驟:
一、鏈接Alipay庫
參考:https://reactnative.cn/docs/0.50/linking-libraries-ios.html#content
手動添加:
1、添加react-native-alipay-zmt
插件到你工程的node_modules
文件夾下
2、添加Alipay
庫中的.xcodeproj
文件在你的工程中
3、點(diǎn)擊你的主工程文件,選擇Build Phases
,然后把剛才所添加進(jìn)去的.xcodeproj
下的Products
文件夾中的靜態(tài)庫文件(.a文件),拖到Link Binary With Libraries
組內(nèi)。
自動添加:
npm install react-native-alipay-zmt --save
或
yarn add react-native-alipay-zmt
react-native link
由于AppDelegate
中使用Alipay
庫,所以我們需要打開你的工程文件,選擇Build Settings
,然后搜索Search Paths
,然后添加庫所在的目錄$(SRCROOT)/../node_modules/react-native-alipay-zmt/ios/Alipay
(包含頭文件搜索和庫文件搜索)
二、開發(fā)環(huán)境配置
參考:https://docs.open.alipay.com/204/105295/
1、引入系統(tǒng)庫及支付寶SDK
左側(cè)目錄中選中工程名,在TARGETS->Build Phases-> Link Binary With Libaries
中點(diǎn)擊“+”
按鈕,在彈出的窗口中查找并選擇所需的庫(見下圖),單擊“Add”
按鈕,將庫文件添加到工程中。
- libc++.tbd
- libz.tbd
- SystemConfiguration.framework
- CoreTelephony.framework
- QuartzCore.framework
- CoreText.framework
- CoreGraphics.framework
- UIKit.framework
- Foundation.framework
- CFNetwork.framework
- CoreMotion.framework
- AlipaySDK.framework
其中,需要注意的是:
如果是Xcode 7.0
之后的版本,需要添加libc++.tbd
、libz.tbd
;
如果是Xcode 7.0
之前的版本,需要添加libc++.dylib
、libz.dylib
(如下圖)。
2、環(huán)境配置
在Xcode
中,選擇你的工程設(shè)置項(xiàng),選中“TARGETS”
一欄,在“info”
標(biāo)簽欄的“URL type”
添加“URL scheme”
為你所定義的名稱
三、簡單使用
方法
Event Name | Returns | Notes |
---|---|---|
pay | result | 支付 |
1、重寫AppDelegate的openURL方法:
#import "Alipay.h"
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
if ([sourceApplication isEqualToString:@"com.alipay.iphoneclient"]) {
[Alipay aliPayParse:url];
return YES;
}else{
return NO;
}
}
// NOTE: 9.0以后使用新API接口
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString*, id> *)options
{
if ([options[@"UIApplicationOpenURLOptionsSourceApplicationKey"] isEqualToString:@"com.alipay.iphoneclient"]) {
[Alipay aliPayParse:url];
return YES;
}else{
return NO;
}
}
2、js文件
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Dimensions,
AlertIOS,
ScrollView,
TouchableHighlight,
NativeAppEventEmitter
} from 'react-native';
import Alipay from 'react-native-alipay-zmt';
function show(title, msg) {
AlertIOS.alert(title+'', msg+'');
}
export default class App extends Component {
Alipay(){
Alipay.pay("app_id=2015052600090779&biz_content=%7B%22timeout_express%22%3A%2230m%22%2C%22product_code%22%3A%22QUICK_MSECURITY_PAY%22%2C%22total_amount%22%3A%220.01%22%2C%22subject%22%3A%221%22%2C%22body%22%3A%22%E6%88%91%E6%98%AF%E6%B5%8B%E8%AF%95%E6%95%B0%E6%8D%AE%22%2C%22out_trade_no%22%3A%22IQJZSRC1YMQB5HU%22%7D&charset=utf-8&format=json&method=alipay.trade.app.pay¬ify_url=http%3A%2F%2Fdomain.merchant.com%2Fpayment_notify&sign_type=RSA2×tamp=2016-08-25%2020%3A26%3A31&version=1.0&sign=cYmuUnKi5QdBsoZEAbMXVMmRWjsuUj%2By48A2DvWAVVBuYkiBj13CFDHu2vZQvmOfkjE0YqCUQE04kqm9Xg3tIX8tPeIGIFtsIyp%2FM45w1ZsDOiduBbduGfRo1XRsvAyVAv2hCrBLLrDI5Vi7uZZ77Lo5J0PpUUWwyQGt0M4cj8g%3D")
.then(result => {
console.log("result is ", result);
show("result is ", result);
})
.catch(error => {
console.log(error);
show(error);
});
}
render() {
return (
<ScrollView contentContainerStyle={styles.wrapper}>
<Text style={styles.pageTitle}>Alipay SDK for React Native (iOS)</Text>
<TouchableHighlight
style={styles.button} underlayColor="#f38"
onPress={this.Alipay}>
<Text style={styles.buttonTitle}>Alipay</Text>
</TouchableHighlight>
</ScrollView>
);
}
}
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-alipay-zmt.git