Custom Styling for React Square Web Payment SDK

Questions
1

Adding custom css styling to the credit card input doesnt work, it seems the style prop is not recognised.

const cardClassSelectors = {
  input: {
    backgroundColor: '#2D2D2D',
    color: '#FFFFFF',
    fontFamily: 'helvetica neue, sans-serif',
  },
};

<CreditCardInput
 style={cardClassSelectors}
 submitButtonId="nextStep"
 overrideStyles={overrideStyles}
/>

How can I get this to work?

2

Hi @faith.adekogbe, welcome to the forums!

Styling for the Web Payments SDK is done via a style property in the CardOptions object. You can find a guide on how to handle styling on our docs site:
Customize the Card Entry Form