Error using Checkout bricks on React

[gabrielschubert]

Hello,

I'm trying to add Checkout Bricks to my Reac website, bu I'm get this error: Uncaught (in promise) Error: [undefined error] Could not mount brick. Node 'cardPaymentBrick_container' not found at Js.newError

          {(paymentSelected.metodo === "mercadopago_credit_card") && (
            <div className="cardPaymentBrick_container">
            </div>
          )}

Can someone help me, please?

[icaldana]

Hello Gabriel,

As you are already aware, the Brick needs a container to be rendered and the same container's name should be used when calling bricksBuilder.create, in your case, the div with className "cardPaymentBrick_container". Please see the official documentation for further details.

About the error you are seeing, I believe it is caused by the conditional. The Brick is trying to find the container on page load while React is still mounting or/and the conditional isn't true. I would recommend you to place the container outside of conditionals and use additional classnames if you need to hide or do some logic based on this if.

Thank you

[gabrielschubert]

Hello @icaldana,

Thank you for your answer.
It was my mistake. As you said, I was using className instead of id="cardPaymentBrick_container".
Now it is working.

Regards,
Gabriel.

[icaldana]

@gabrielschubert I am glad it worked!

I know you are already integrated, but we recently launched an ReactJS library for Bricks, it might me helpful for you.

See you.

[gabrielschubert]

Wow! Very nice. Thanks

I'm using the library now.
One question, there is a away to get the form data from the brick to submit it to backend using another button?
I saw that on sdk-js it is possible by using: window.cardPaymentBrickController.getFormData() and hiding the submit button.
Is it available at sdk-react-js?

Regards!

[icaldana]

Hi @gabrielschubert ,

Yes, it is available! Once the Brick is mounted, that is onReady being called, the method window.cardPaymentBrickController should be available.

Thanks!