Possible Wallet Mounting Error #99
-
|
Hello guys, I am a new developer - so sorry if this mistake might look dumb. I am using Next JS and I am mounting the Wallet Component, at my checkout page, but it seems it is being mounted twice, and sometimes more than twice. And I think this error occurs because the wallet is not able to unmount some DOM element. I also have a GET 405 error when mounting it. I was creating the preference before going to the checkout page, but due to my logic - I changed to creating the preference when clicking the button - so now I also get this get_preference_details_failed. ( But i guess it is not critical right? kkkk ) Other than that the wallet works fine, I am able to process the payment and make tests - But i am getting this error and it is really annoying and breaking my website experience. I cannot find resources to help me at mercado pago dev docs. Those are the errors i get: ( i replaced my public key to not show it here )
And this is how part of my code related to the wallet looks:
What should i do? I would appreciate the help! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
Good afternoon @Tarranzilla , how are you? First of all, no question is dumb, and it is always welcome! It's good to know that the component works well, regarding multiple renderings and the difficulty of handling using next js, I'll refer you to this wiki link, here are some tips on how to use this SDK in next js. I also believe that it could be a failure in the application life cycle and is triggering some renderings at inappropriate times. I will indicate a few good reading links that can help you in dealing with this type of problem. React.dev - Memo If none of these articles help you, I hope you add more snippets from your complete implementation. |
Beta Was this translation helpful? Give feedback.
-
|
Hello Lucas, i followed the wiki link and built a similar approach for using the Wallet component. It works now, and doesnt render twice since i am importing it dynamically - Thank you! But now i am facing another challenge! I am using the modal redirect mode, and generating the preference on submit, it all works fine until i submit the Test Credit Card information. After i submit it i get an error: FL-0eb55368 I dont know what is happening, but in my console i can see some errors, i dont know if they are related to this issue: [Report Only] Refused to load the script 'https://http2.mlstatic.com/analytics/ga/mlb-mp-analytics.min.js' because it violates the following Content Security Policy directive: "script-src 'nonce-EBDFn+zUPkH3d1Xb+70+Qg==' 'strict-dynamic' 'unsafe-eval' 'report-sample' https: 'unsafe-inline'". Note that 'strict-dynamic' is present, so host-based allowlisting is disabled. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback. nrWrapper @ modal/?preference-id=201803820-13921b00-9a94-4c9d-9bef-8783289c80d4&from-widget=true&sniffing-rollout=sniffing-api&router-request-id=6a1c3a4d-944b-49c6-bca8-f4a7734725b2:5 Maybe an undefined value is being passed to this px-checkout-frontend? but how can i control this? Anyways, here is the link to my code if you want to have a look: https://github.com/Tarranzilla/mercado-pago-bricks-with-firebase
|
Beta Was this translation helpful? Give feedback.
-
|
Já que vi que tu é Brasileiro vou falar em português mesmo! Andei lendo a comunidade do discord e parece que há algum problema com o init_point quando criamos a preferência, to tentando descobrir aqui se é isso. Buscando alguma maneira de configurar o init_point e o sandbox_init_point. Quando eu uso minhas credenciais de Produção o erro nao parece ocorrer, mas eu nao consigo testar o pagamento de teste pois acredito que nao seja possivel no modo de produão fazer isto... Se houver alguma informação, agradeço! |
Beta Was this translation helpful? Give feedback.
Good afternoon @Tarranzilla , how are you?
First of all, no question is dumb, and it is always welcome!
It's good to know that the component works well, regarding multiple renderings and the difficulty of handling using next js, I'll refer you to this wiki link, here are some tips on how to use this SDK in next js.
I also believe that it could be a failure in the application life cycle and is triggering some renderings at inappropriate times. I will indicate a few good reading links that can help you in dealing with this type of problem.
React.dev - Memo
Medium - React Components rendered twice
Medium - Wait, you’re not using <React.StrictMode>?!
If none of these articles help you, I hope…