react-native-alipay-zmt插件的使用(iOS)

功能:

通過支付寶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&notify_url=http%3A%2F%2Fdomain.merchant.com%2Fpayment_notify&sign_type=RSA2&timestamp=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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容