SyntaxError: JSON Parse error: Unrecognized token '<'] - Stipe React Native

Question

我正在测试 StripeJS 与我的 expo 应用程序的集成，每当我尝试遵循他们的“创建付款意图”路线时，我都会收到以下错误作为我的回应。

"SyntaxError: JSON 解析错误: 无法识别的标记 '<']

我查看了在 Whosebug 上提出的类似问题，none 提供的答案有效。这是代码 - 可以在条纹文档中找到相同的代码。

import React, { useState } from "react";
import { View, StyleSheet, Alert, TextInput, Text } from "react-native";
import { Button } from "react-native-elements";

import { CardField, useConfirmPayment } from "@stripe/stripe-react-native";

const API_URL = "http://localhost:3000";

export default function PaymentScreen() {
  const [name, setName] = useState("");
  const [amount, setAmount] = useState("");
  const [cardDetails, setCardDetails] = useState();
  const { confirmPayment, loading } = useConfirmPayment();

  const fetchPaymentIntentClientSecret = async () => {
    const response = await fetch(
      `http://localhost:3000/create-payment-intent`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({
          currency: "usd",
        }),
      }
    );
    const { clientSecret } = await response.json();

    return clientSecret;
  };
  const handlePayPress = async () => {
    // Gather the customer's billing information (e.g., email)
    const billingDetails = {
      email: "test@stripe.com",
    };

    // Fetch the intent client secret from the backend
    const clientSecret = await fetchPaymentIntentClientSecret();

    // Confirm the payment with the card details
    const { paymentIntent, error } = await confirmPayment(clientSecret, {
      type: "Card",
      billingDetails,
    });

    if (error) {
      console.log("Payment confirmation error", error);
    } else if (paymentIntent) {
      console.log("Success from promise", paymentIntent);
    }
  };
  return (
    <View style={styles.container}>
      <Text style={styles.commited}>Commited: ,000,000</Text>
      <Text style={styles.title}>
        Please enter the amount and card details to invest
      </Text>
      <TextInput
        placeholder="Amount"
        style={styles.input}
        onChangeText={(text) => setAmount(text)}
        value={amount}
      />
      <TextInput
        placeholder="Name as it appears on card"
        style={styles.input}
        onChangeText={(text) => setName(text)}
        value={name}
      />

      <CardField
        postalCodeEnabled={true}
        placeholder={{
          number: "4242 4242 4242 4242",
        }}
        cardStyle={{
          backgroundColor: "#FFFFFF",
          textColor: "#000000",
        }}
        style={{
          width: "100%",
          height: 50,
          marginVertical: 30,
        }}
        onCardChange={(cardDetails) => {
          console.log("cardDetails", cardDetails);
          setCardDetails(cardDetails);
        }}
        onFocus={(focusedField) => {
          console.log("focusField", focusedField);
        }}
      />
      <Button
        title="Invest"
        onPress={handlePayPress}
        disabled={loading}
        buttonStyle={styles.button}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#fff",
  },
  commited: {
    left: 100,
    marginBottom: 20,
    fontWeight: "bold",
    color: "#445C9D",
  },

  input: {
    width: 320,
    height: 100,
    borderBottomWidth: 0.5,
    marginBottom: 20,
  },
  button: {
    width: 320,
    height: 50,
    borderRadius: 5,
    marginBottom: 10,
    backgroundColor: "#259A35",
    marginTop: 20,
  },
});

import express from "express";
import bodyParser from "body-parser";
import dotenv from "dotenv";
import Stripe from "stripe";

const app = express();
const port = 3000;

app.use(bodyParser.urlencoded({ extended: false }));

// parse application/json
app.use(bodyParser.json());

const publicKey = process.env.PUBLIC_KEY;
const secretKey = process.env.SECRET_KEY;

const stripe = Stripe(secretKey, { apiVersion: "2020-08-27" });

app.listen(port, () => {
  console.log(`app listening at http://localhost:${port}`);
});

app.post("create-payment-intent", async (req, res) => {
  // Set your secret key. Remember to switch to your live secret key in production.
  // See your keys here: https://dashboard.stripe.com/apikeys

  const paymentIntent = await stripe.paymentIntents.create({
    amount: 1099,
    currency: "usd",
  });
  const clientSecret = paymentIntent.client_secret;
  // Pass the client secret to the client

  res.json(clientSecret);
});

Answer 1

导致此错误的最可能原因是您的服务器正在返回 HTML（可能是 HTML 格式的错误消息）而不是预期的 JSON。条纹有 a support article that covers this error in detail and how to fix it.

SyntaxError: JSON Parse error: Unrecognized token '<'] - Stipe React Native

SyntaxError: JSON Parse error: Unrecognized token '<'] - Stipe React Native

parsing

stripe-payments

react-native