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 @marcosdipaolo, no he usado la v2, pero por el código que me dices yo lo haría más o menos así:

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

const FORM_ID = 'payment-form';

function addCheckout() {
  const mp = new window.MercadoPago('PUBLIC_KEY', {
    locale: 'es-AR'
  });

  // Inicializa el checkout
  mp.checkout({
    preference: {
      id: preferenceId,
    },
    render: {
      container: `#${FORM_ID}`, // Indica el nombre de la clase donde se mostrará el botón de pago
      label: 'Pagar', // Cambia el texto del botón de pago (opcional)
    },
  });
}

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://sdk.mercadopago.com/js/v2';
      script.addEventListener('load', addCheckout); // Cuando cargue el script, se ejecutará la función addCheckout
      document.body.appendChild(script);
    }
  }, [preferenceId]);

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

No he probado el código, pero la idea es agregar el script a mano en el useEffect al igual que mi código original, y luego cuando este cargue, ejecutar la lógica que pusiste tú (que está en la función addCheckout).

hola @muZk. he probado tu solución, pero a la hora de hacer click en el boton de pago me aparece lo siguiente:

hacer un POST en la misma url que estoy.. alguna sugerencia?

Me esta pasando lo mismo, pudo alguien encontrar la solución?

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!!

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?