For an app I am making, I want to make the user pay 10EUR via a paymentscreen in React Native with the help of Stripe. Unfortunately I keep stumbling upon errors when I try to test it with the 4242 card of stripe. It only occurs when I click on the pay button.

我用错误的话说:

长度=0;指数=0

我也发出警告,称网络要求失败,而且我很相信与网络有关。

你们能否帮助我?

我的守则是:

import React, { useEffect, useState } from  react ;
import { Alert, View, Text, Button } from  react-native ;
import { CardField, useStripe } from  @stripe/stripe-react-native ;

const PaymentScreen = () => {
  const { confirmPayment } = useStripe();
  const [key, setKey] = useState(  );

useEffect(() => {

    fetch( http://localhost:3000/create-payment-intent , {
        method:  POST 
    }).then(res => res.json()).then(res => {
        Alert.alert(res.clientSecret);
        const intent = res as {clientSecret: string};
        setKey(intent.clientSecret);
    });
}, []);

const handlePayment = async () => {
  try {
      const { error } = await confirmPayment(key, {
          paymentMethodType:  Card ,
      });

      if (error) {
          Alert.alert( Error , error.message);
      } else {
          Alert.alert( Payment successful! );
      }
  } catch (error) {
      console.error( Network request failed: , error);
      Alert.alert( Error ,  Network request failed. Please check your internet connection. );
  }
};

  return (
    
    <View style={{ flex: 1, justifyContent:  center , alignItems:  center  }}>
      <Text>Enter Card Details:</Text>
      <CardField
        style={{
            height: 100,
            width:  100% ,
        }}
        postalCodeEnabled={false} // Adjust based on your requirements
        placeholders={{
          number:  Card Number ,
          expiration:  MM/YY ,
          cvc:  CVC ,
        }}
        onCardChange={(cardDetails) => {
          // Handle card details change if needed
        }}
      />
      <Button title="Pay" onPress={handlePayment} />
    </View>
  );
};

export default PaymentScreen;

这是后端守则的一部分:

import express from  express 
import Stripe from  stripe 

const stripe = new Stripe( sk_test_XXX , {
    apiVersion:  2023-10-16 ,
    typescript: true,
});

const app = express();
app.use(express.json());

app.post( /create-payment-intent , async (req, res) => {
    const paymentIntent = await stripe.paymentIntents.create({
        amount: 1000,
        currency:  eur ,
    });

    res.send({
        clientSecret: paymentIntent.client_secret,
    })
});

app.listen(3000, () => console.log( Running ));

here是该错误的印刷屏幕: