<Payment /> rendering two forms

[orderisnotchaos]

The code of the render is as follows...
const initialization = { amount: 100, preferenceId: pId, };
const customization = { paymentMethods: { ticket: 'all', creditCard: 'all', debitCard: 'all', mercadoPago: 'all', } };
{pId ? <Payment initialization={initialization} customization = {customization} onSubmit={onSubmit} onError={onError} /> :<></>}

what I meant exactly when I wrote rendering two forms is that inside the element with id paymentBrick_container 2 divs,which are exactly the same and contain all the information to render the payment brick are being created, 2 divs with the class mp-checkout-bricks__payment-form etc... The app is running with https protocol but no SSL has been generated yet. Hope it helps.

[meliguicarvalho]

Hello! Good afternoon.

Can you please tell us what version of the library you are using?
This double render was an issue we previously identified but we released a fix for it recently.

If you are using the most current version, can you please provide us with more details and maybe a sandbox of your code so we can identify the error?

[orderisnotchaos]

hello, according to the link on the README.md file, the version is 0.0.8 which should be the last version accordingly to the README.md displayed here, so, here's an explanation of the code. I´m currently calling initMercadoPago on app.js, I use react-router-dom, the payment component is being called inside a element. Here's a code example:

function App() {
 //state deffinitions
     return(
     <div className = 'App'>
          <ThemeContext.Provider value={{var1,var2,var3,etc...}} >
                <BrowserRouter>
                     <Routes>
                           <Route path={'/payment'} element={<AddPayment />} />
                     </Routes>
                 </BrowserRouter>
          </ThemeContext.Provider
     </div>
}

export default function AddPayment(){

    const themeContext = useContext(ThemeContext);

    const [pId, setPId] = useState('');


    useEffect(()=>{

        if(!pId){
            fetch(themeContext.APIURL+'user/preferenceId',{
                method:'GET',
                headers:{'Content-Type':'application/json'},
                mode:'cors'
            }).then(res =>{
                return res.json();
            }).then(res =>{
                if(res.ok === true) setPId(res.data);
            });
        }
    },[themeContext,pId]);
    
        const initialization = {
        amount: 500,
        preferenceId: pId,
    };

    const customization = {
        paymentMethods: {
            ticket: 'all',
            creditCard: 'all',
            debitCard: 'all',
            mercadoPago: 'all',
        }
    };
    
    const onSubmit = async (
        { selectedPaymentMethod, formData }
       ) => {
        console.log(selectedPaymentMethod);
        // callback llamado al hacer clic en el botón enviar datos
        return new Promise((resolve, reject) => {
          fetch(themeContext.APIURL+"user/processPayment", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              "authorization":themeContext.token
            },
            body: JSON.stringify(selectedPaymentMethod,formData),
          })
            .then((response) => response.json())
            .then((response) => {
              // recibir el resultado del pago
              console.log(response);
              resolve();
            })
            .catch((error) => {
                console.log(error);
              // manejar la respuesta de error al intentar crear el pago
              reject();
            });
        });
       };
    const onError = async (error) => {
    // callback llamado para todos los casos de error de Brick
    console.log(error);
    };
    
    return    (
    <>
        <NavBar />
        <SideBar />
        <div className='change-subscription-container'>
            {pId ? <Payment initialization={initialization} 
                            customization = {customization}
                            onSubmit={onSubmit}
                            onError={onError} 
                        /> :<></>}
        </div>
     </>
      );
  

[meliguicarvalho]

Hello!

Thanks for the reply.
I cannot reproduce the error you are facing even with the code you sent, can you please provide us with a code sandbox with the error, so we can better analise and fix the potential issue?

[orderisnotchaos]

sorry, I tried to create one on sandbox.io, and tried to download a vs code extension but they don't seem to be working properly. What I can do is make a video showing the error and all the information you request about the front-end. Let me know if that would be useful or not. Thank you!

[meliguicarvalho]

If you could send us the video and sharing the maximum amount of code and context you can, we would appreciate.
But without having the ability to reproduce the error, we cannot really help you that much.

Maybe you could try to single out the issue, like removing the API call to generate the preference and testing if the issue persists, or not using one of the libraries, etc.
If you manage to reproduce the issue in a test environment, please share with us, so we can help you better.

[orderisnotchaos]

Here's a video displaying the error on the app's enviroment:
Payment error + code display
I've tried to make a code sample reproducing the error but couldn't so the error is surely happening because of some configuration on the current app.

[meliguicarvalho]

Thank you!

Based on the code you shared, what I think might be causing the re-renders is the cicle you created for the preferenceIds, but I cannot be sure.

If you manage to create a sampre reproducing the issue, please share!