MercadoPago React

Product.jsx

import React, { useEffect, useState } from 'react';
import { useParams } from "react-router-dom";

const FORM_ID = 'payment-form';

export default function Product() {
  const { id } = useParams(); // id de producto
  const [preferenceId, setPreferenceId] = useState(null);

  useEffect(() => {
    // luego de montarse el componente, le pedimos al backend el preferenceId
    axios.post('/api/orders', { productId: id }).then((order) => {
      setPreferenceId(order.preferenceId);
    });
  }, [id]);

  useEffect(() => {
    if (preferenceId) {
      // con el preferenceId en mano, inyectamos el script de mercadoPago
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.src =
        'https://www.mercadopago.cl/integrations/v1/web-payment-checkout.js';
      script.setAttribute('data-preference-id', preferenceId);
      const form = document.getElementById(FORM_ID);
      form.appendChild(script);
    }
  }, [preferenceId]);

  return (
    <form id={FORM_ID} method="GET" />
  );
}

Hola! muy buena toda la info! tengo una pregunta, me sale este error, por que podría ser??

pero eso lo puedes suprimir

Hola, pudiste solucionarlo? Estoy teniendo el mismo problema.

Gracias!!

Te recomiendo usar la sdk para react si es que estas con un proyecto de ese tipo. Maneja todas estas cuestiones por atras. https://www.npmjs.com/package/react-sdk-mercadopago

• cuando presiono el boton pagar del checkout pro , me sale la suma de los precios de los productos, pero no la lista de items a que estos corresponden, esto es asi? o es un error en la integracion?

Hola, tengo el mismo problema y googleando encontré ete post. Pudiste solucionarlo?