Is there any way we can style input fields / button of component container?

Question

How do I refer to the specific tags in the Adyen component in my css?

import AdyenCheckout from '@adyen/adyen-web';
import '@adyen/adyen-web/dist/adyen.css';

For example, this button

This is inside my

        <div id="component-container"></div>

Answer 1

You can provide css rules that refer to the class you want to change, such as adyen-checkout__button to apply settings for any button created by adyen components or adyen-checkout__button--pay to change the pay button specifically.

Adyen provides a list of css classes.

For card fields, these use iframes to gather details and styling information has to provided when initializing the adyen component.

const checkout = new AdyenCheckout({
  paymentMethodsResponse: paymentMethodsResponse,
  clientKey: adyenClientKey,
  paymentMethodsConfiguration: {
    card: {
      styles: {
        base: {
          color: 'black',
          fontSize: '16px',
          fontSmoothing: 'antialiased',
          fontFamily: 'Helvetica',
        },
        error: {
          color: 'red',
        },
      },
    },
  },
  ...
});