axios React-redux + Stripe

jaql4c8m  于 2023-10-18  发布在  iOS
关注(0)|答案(1)|浏览(142)

当我从我的后端请求时,我从Postman得到了很好的响应:

{
  "request": "64fa573a4de2f7d84916f3bf",
  "currency": "MXN",
  "metodoPago": "card",
  "costo": 19500
}

{
    "success": true,
    "payment": {
        "request": "64fa573a4de2f7d84916f3bf",
        "currency": "MXN",
        "metodoPago": "card",
        "costo": 19500,
        "status": "pendiente",
        "_id": "64fa575880061077a9c5fac8",
        "createdAt": "2023-09-07T23:06:00.673Z",
        "updatedAt": "2023-09-07T23:06:00.673Z",
        "__v": 0
    }
}

但是当我尝试通过paymentService.jspaymentSlice.js使用React-Redux时,它失败了。这是我的paymentModelpaymentController.js

const asyncHandler = require('express-async-handler');
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
const Payment = require('../models/paymentModel');

// Controlador para crear un nuevo pago
const createPayment = asyncHandler(async (req, res) => {
  try {
    const { request, currency, metodoPago, costo } = req.body;

    // Verificar si la solicitud ya tiene un pago asociado
    const existingPayment = await Payment.findOne({ request });
    if (existingPayment) {
      return res.status(400).json({ success: false, error: 'La solicitud ya tiene un pago asociado' });
    }

    // Crear un intento de pago en Stripe
    const paymentIntent = await stripe.paymentIntents.create({
      amount: costo,
      currency,
      payment_method_types: [metodoPago], // Tipo de método de pago, ej. 'card'
    });

    // Crear el registro del pago en la base de datos
    const payment = new Payment({
      request,
      currency,
      metodoPago,
      costo,
      status: 'pendiente',
      stripePaymentIntentId: paymentIntent.id, // Almacena el ID del intento de pago de Stripe
    });

    await payment.save();

    // Respuesta con la URL de la API y el stripeApiKey
    res.status(201).json({
      success: true,
      payment,
    });

  } catch (error) {
    console.error(error);
    res.status(500).json({ success: false, error: error.message });
  }
});

const mongoose = require('mongoose');

const paymentSchema = mongoose.Schema({
  request: {
    type: mongoose.Schema.Types.ObjectId,
    ref: 'Request',
    required: true,
  },
  currency: {
    type: String,
    required: true,
  },
  metodoPago: {
    type: String,
    required: true,
  },
  costo: {
    type: Number,
    required: true,
  },
  status: {
    type: String,
    enum: ['pendiente', 'completado', 'cancelado'],
    default: 'pendiente',
  },
}, {
  timestamps: true,
});

module.exports = mongoose.model('Payment', paymentSchema);

我的paymentServicepaymentSlice.js

import axios from 'axios';

const BASE_URL = 'http://localhost:8000/payments';

// Función para crear un nuevo pago
export const createPayment = async (paymentData, token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
      'Content-Type': 'application/json',
    },
  };

  try {
    const response = await axios.post(BASE_URL, paymentData, config);
    return response.data;
  } catch (error) {
    throw error.response ? error.response.data : error.message;
  }
};

export const createPaymentAsync = createAsyncThunk('payments/createPayment', async (paymentData, thunkAPI) => {
  try {
    const user = thunkAPI.getState().auth.user;
    const requestState = thunkAPI.getState().request;
    const selectedRequest = requestState.userRequests[user._id][0];

    if (!user) {
      throw new Error('Debes iniciar sesión para crear un nuevo pago');
    }

    const token = user.token;
    const newPayment = await createPayment({ ...paymentData, request: selectedRequest._id }, token);

    thunkAPI.dispatch(addPaymentForUser({ userId: user._id, payment: newPayment }));

    return newPayment;
  } catch (error) {
    console.log(error)
    const message = (error.response && error.response.data && error.response.data.message) || error.message || error.toString()
    return thunkAPI.rejectWithValue(message)
  }
});

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!stripe || !elements) {
      console.error("Stripe no está configurado correctamente.");
      return;
    }
  
    if (!cotizacion || !cotizacion._id) {
      console.error("La cotización es inválida o no tiene un ID válido.");
      return;
    }
  
    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: "card",
      card: elements.getElement(CardElement),
    });
  
    if (!error) {
      const { id } = paymentMethod;

      const costoNumero = Number(cotizacion.costo);

      const formData = {
        amount: costoNumero,
        request: cotizacion._id,
        currency: "USD",
        metodoPago: 'card',
        costo: costoNumero
      }
    

      try {
        const response = await dispatch(createPaymentAsync({ formData, id }));
        console.log("Respuesta del servidor:", response);
        if (response && response.success) {
          console.log("Pago exitoso");
        } else {
          console.error("El pago no se procesó correctamente:", response.error);
          if (response.status === undefined) {
            console.error("Código de estado HTTP no está definido");
          } else {
            console.error("Código de estado HTTP:", response.status);
          }
          if (response.data === undefined) {
            console.error("Contenido de la respuesta no está definido");
          } else {
            console.error("Contenido de la respuesta:", response.data);
          }
        }
      } catch (error) {
        console.error("Error al crear el pago:", error.message);
        console.error("Ocurrió un error al procesar el pago:", error);
      }
    }
  };

这就是我在提交时的操作方式,我得到的只是来自服务器的响应:

{success: false, error: 'Missing required param: amount.'}

有人能帮帮我吗?

9nvpjoqh

9nvpjoqh1#

在分派操作时,您是否忘记展开formData,从而使条带数据不在正确的路径中?

const response = await dispatch(createPaymentAsync({ ...formData, id }));

希望这能有所帮助!

相关问题