react-native 支付宝支付 （react-native-yunpeng-alipay）

使用react-native-yunpeng-alipay完成android ，ios支付宝支付
代码地址 https://github.com/dai1254473705/react-native-alipay

一、android

1. 安装 react-native-yunpeng-alipay 三方插件

• windows: npm install react-native-yunpeng-alipay --save
• mac:yarn add react-native-yunpeng-alipay

2. link

react-native link react-native-yunpeng-alipay

3.解决报错信息（方法不会覆盖或实现超类型）

在node_modules中，找到如下图所示内容，注释掉

 

image.png

4.调用方法

我是直接 react-native init的项目，然后直接在APP.js中做的，下面的是APP.js中所有的内容

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';
import Alipay from 'react-native-yunpeng-alipay';


export default class App extends Component<{}> {
    _aliPay = () => {
        console.log("点击进行支付");
        let data = 'partner=\"asdfasdf\"&seller_id=\"asdfasdf@qq.com\"&out_trade_no=\"ALIPAY15307684880120000000001\"&subject=\"描述\"&body=\"在线支付\"&total_fee=\"0.01\"&notify_url=\"http://xx.xx.xx.xx/api/0/alipay/alipayCallback\"&service=\"m.pay\"&payment_type=\"1\"&_input_charset=\"utf-8\"&it_b_pay=\"30m\"&sign=\sdfasdf\"&sign_type=\"RSA\"';
        Alipay.pay(data).then(function(data){
            console.log(data);
        }, function (err) {
            console.log(err);
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={this._aliPay}>
                    <View style={styles.btn}>
                        <Text style={styles.text}>支付宝支付</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    btn: {
        width: 200,
        height: 30,
        backgroundColor: "#999",


    },
    text: {
        color: "#fff",
        textAlign: "center",
        lineHeight: 30
    }
});

5.android 支付结束了！！

二、ios

1. 添加模块

添加：
+CoreMotion.framework
+CoreTelephony.framework
+libc++
+libz

image.png

2. 设置URL Schema

 

3.编辑AppDelegate.m

 

4. 完成！

作者：我的昵称好听吗
链接：https://www.jianshu.com/p/d4388eba45cf

 

关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源200G干货大全。