CardPayment styling not working

[jcmujica]

Hi everyone, I have a question regarding the CardPayment component from @mercadopago/sdk-react style customization, my site uses a dark theme.

I'm trying to customize my card payment element like this

visual: { style: { theme: 'dark', customVariables: { formBackgroundColor: 'black', inputBackgroundColor: 'black', } } },

But the input is getting a white background and when a user enters the text it show up as white so the user cannot see the number they entered.

It looks like this

Any help is appreciated!

[meliguicarvalho]

Hi @jcmujica
Thank you very much for contacting us!

We have reviewed your issue and it seems to be connected to some aspect of your integration we do not have access to.

Please download this very project and run the storybook.

keep in mind that to run the storybook you will need node 16

Once the Storybook is running, you can the following customization to the CardPaymentBrick/1-Customization file.

const customization = {
    paymentMethods: {
      minInstallments: 2,
      maxInstallments: 4,
    },
    visual: {
      style: {
        theme: 'dark',
        customVariables: { formBackgroundColor: 'black', inputBackgroundColor: 'black' },
      },
      hidePaymentButton: true,
    },
  };

  function createPayment() {
    window.cardPaymentBrickController
      .getFormData()
      .then((cardFormData) => {
        console.log('cardFormData received, creating payment...', cardFormData);
      })
      .catch((error) => {});
  }

By doing this, the Brick will have the desired appearance.

This is a good way to check where in your integration is the issue.

If the error still persists, gather all the information and go to the following link to share the issue with us:
https://www.mercadopago.com/developers/pt/support/center/contact
Thank you very much for your contact!

[vitorgouveia]

@jcmujica how did you solve it?