如何在本机反应中使用 PayPal 付款？

如何解决如何在本机反应中使用 PayPal 付款？

我正在创建一个 React Native 应用程序，我需要使用 PayPal 付款。有没有办法在使用或不使用任何第三方库的情况下做到这一点？我可以使用 API (https://api.sandbox.paypal.com/v1/oauth2/token) 与 Postman 创建令牌，并通过返回 access_token 使用此 API (https://api.sandbox.paypal.com/v1/payments/payment) 付款。 当我使用 fetch 方法访问这个 API 时，它给出了一个错误。

这是我试过的。

import React,{ Component } from 'react';
import {
  View,Text,TouchableOpacity,TextInput,Platform,StyleSheet,StatusBar,Alert,Image,ScrollView,Animated,Dimensions,Modal,} from 'react-native';
import * as Animatable from 'react-native-animatable';
import LinearGradient from 'react-native-linear-gradient';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Feather from 'react-native-vector-icons/Feather';
import {
    widthPercentageToDP as wp,heightPercentageToDP as hp,} from 'react-native-responsive-screen';
  import { encode } from "base-64";

class PayPalScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {         
            accessToken: null,approvalUrl: null,paymentId: null
         };
      }


    payFunction= () =>{
        // Alert.alert("Hi")

        const clientIdAndSecret = "***************************:****************************";
        // const base64 = Buffer.from(clientIdAndSecret).toString('base64')

        const clientId = "*****************";
        const clientSecret = "*************";


        let currency = '100 USD'
        currency.replace(" USD","")

        const dataDetail = {
            "intent": "sale","payer": {
                "payment_method": "paypal"
            },"transactions": [{
                "amount": {
                    "total": currency,"currency": "THB","details": {
                        "subtotal": currency,"tax": "0","shipping": "0","handling_fee": "0","shipping_discount": "0","insurance": "0"
                    }
                }

            }],"redirect_urls": {
                "return_url": "https://example.com","cancel_url": "https://example.com"
            }
        }

        fetch('https://api.sandbox.paypal.com/v1/oauth2/token',{
            method: 'POST',headers: {
                'Content-Type': 'application/x-www-form-urlencoded','Authorization': 'Basic' +encode(clientId + ":" + clientSecret),},body: { "grant_type": 'client_credentials' },})
        .then(response => {
            // console.log('A'+ response.data.access_token);
            response.json().then(solved=>{
                console.log(solved)
            })
                
            this.setState({
                    // accessToken: response.data.access_token
            })
        })

        // console.log('B'+ this.state.accessToken);
    }

    render() { 
        return ( 
        <View>
            <View style={styles.modalContainer}>
              <Image
                style={styles.logo}
                source={require('../assets/paypal.png')}
              />
            </View>
            <Text style={[styles.text_footer]}>Email</Text>
            <View style={styles.action}>
              <FontAwesome name="envelope-o" color="#05375a" size={20} />
              <TextInput
                placeholder="Email"
                placeholderTextColor="#666666"
                style={[styles.textInput]}
                autoCapitalize="none"
                onChangeText={(val) => this.emailInputChange(val)}
                //   onEndEditing={(e) => handleValidUser(e.nativeEvent.text)}
              />
              {this.state.check_emailInputChange ? (
                <Animatable.View animation="bounceIn">
                  <Feather name="check-circle" color="green" size={20} />
                </Animatable.View>
              ) : null}
            </View>

            <Text
              style={[
                styles.text_footer,{
                  marginTop: 35,]}>
              Password
            </Text>
            <View style={styles.action}>
              <Feather name="lock" color="#05375a" size={20} />
              <TextInput
                placeholder="Your Password"
                placeholderTextColor="#666666"
                secureTextEntry={this.state.secureTextEntry ? true : false}
                style={[styles.textInput]}
                autoCapitalize="none"
                onChangeText={(val) => this.handlePasswordChange(val)}
              />
              <TouchableOpacity onPress={this.updateSecureTextEntry}>
                {this.state.secureTextEntry ? (
                  <Feather name="eye-off" color="gray" size={20} />
                ) : (
                  <Feather name="eye" color="grey" size={20} />
                )}
              </TouchableOpacity>
            </View>

            <View style={styles.button1}>
              <TouchableOpacity
                style={styles.signIn}
                onPress={() => this.payFunction()}>
                <LinearGradient
                  colors={['#08d4c4','#01ab9d']}
                  style={styles.signIn}>
                  <Text style={[styles.textSign]}>Sign In</Text>
                </LinearGradient>
              </TouchableOpacity>
            </View>

            </View>
         );
    }
}
 
export default PayPalScreen;


const styles = StyleSheet.create({

    button1: {
      alignItems: 'center',marginTop: 40,// width:'80%',modalContainer: {
      alignItems: 'center',justifyContent: 'center',logo: {
      width: wp('30%'),height: hp('15%'),marginBottom: 25,borderRadius: 50,aspectRatio: 1,text_footer: {
      color: '#05375a',fontSize: 18,width: wp('80%'),alignSelf: 'center',action: {
      width: wp('80%'),flexDirection: 'row',marginTop: 5,borderBottomWidth: 1,borderBottomColor: '#f2f2f2',paddingBottom: 5,textInput: {
      flex: 1,marginTop: Platform.OS === 'ios' ? 0 : -12,paddingLeft: 10,color: '#05375a',signIn: {
      width: '80%',height: 50,alignItems: 'center',borderRadius: 10,textSign: {
      fontSize: 18,fontWeight: 'bold',});

我的用户界面

错误

请解释如何将 PayPal 与 React Native 应用程序集成？以及如何使用我的 UI 检查 Paypal 用户？检查用户的最佳方法是什么，如果用户是有效用户，那么我如何使用 Paypal 付款？