Payment Method Styling

Let's take a closer look at each styling setting.

module.exports = {
  theme: {
    extend: {
      borderRadius: {
        none: '0px',
        full: '99999px',
        'sm': '0.5rem',
        'md': '1.25rem',
        'lg': '2rem',
      },
      
      colors: {
        warn: '#FF594F',
        'warn-bg': 'rgba(255, 89, 79, 0.05)',
        danger: '#F5A623',
        'danger-bg': 'rgba(245, 165, 35, 0.05)',
        success: '#4FD18B',
        'success-bg': 'rgba(79, 209, 139, 0.05)',
        primary: 'indigo',
        secondary: '#6B68EC',
        black: '#171717',
        'dark-gray': '#737373',
        'light-gray': '#A9A9A9',
        light: '#F8F9FD',
        white: '#FFFFFF',
        'transparent-3': 'rgba(145, 148, 159, 0.2)',
        'transparent-2': 'rgba(0, 0, 0, 0.05)',
      },
    },
  },
}

borderRadius:

• none: No corner rounding, meaning sharp angles.

• full: Maximum rounding, making the element circular.

• sm: Small rounding, suitable for input elements, notifications, labels, buttons.

• md: Medium rounding, for information cards.

• lg: Large rounding, for the top of a page with rounded bottom corners.

colors:

• warn: Color for critical error messages and notifications.

• warn-bg: Background color to indicate critical notifications.

• danger: Color for indicating non-critical notifications.

• danger-bg: Background color to indicate non-critical notifications.

• success: Color for indicating successful actions and notifications.

• success-bg: Background color to indicate successful notifications.

• primary: Main design color, used for the right button.

• secondary: Secondary color, used in the gradient at the top of the page.

• black: Color for text and the top background of the page.

• dark-gray: Color for labels and text in darker shades.

• light-gray: Color for disabled input elements.

• light: Color for the page background and the left button.

• white: Color for white background and text on a dark background.

• transparent-3: Transparent color for the border above the total line.

• transparent-2: Transparent color for the background of a disabled element when hovering over the right button.

Each of these settings allows you to flexibly customize the appearance of your payment method according to your brand's design and your preferences.