> ## Documentation Index
> Fetch the complete documentation index at: https://docs.paynext.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize the Appearance

> Style the PayNext SDK checkout form to match your brand using CSS-in-JS, CSS classes, and wallet-specific theming.

Align the checkout form with your brand and design system. Consistent styling improves user trust, reduces friction, and keeps the experience accessible across devices.

The PayNext SDK supports two complementary approaches:

* **CSS-in-JS**: Apply React `CSSProperties` directly for precise control
* **CSS classes**: Use custom classes for state styling, animations, and responsive design

<CardGroup cols={2}>
  <Card title="CSS-in-JS Styling" icon="code">
    Direct React CSS properties for precise control over form elements.
  </Card>

  <Card title="CSS Class Names" icon="palette">
    Custom classes for advanced styling with pseudo-selectors and responsive design.
  </Card>
</CardGroup>

***

## Implement Brand Styles

Integrate the checkout form with your design system using CSS custom properties:

```tsx theme={"system"}
const brandStyles: StylesConfig = {
  Input: {
    field: {
      styles: {
        fontFamily: 'var(--font-primary)',
        backgroundColor: 'var(--surface-primary)',
        borderColor: 'var(--border-default)',
        borderRadius: 'var(--radius-md)'
      }
    }
  },
  SubmitButton: {
    styles: {
      backgroundColor: 'var(--color-primary)',
      borderRadius: 'var(--radius-md)'
    }
  }
}
```

<Tip>
  Prefer CSS custom properties (`var(...)`) to keep styles consistent with your design system, enable easy theming, and minimize code changes.
</Tip>

<Info>
  CSS custom properties enable dynamic theming without JavaScript and generally perform better than heavy inline style changes.
</Info>

***

## Configure StylesConfig

The `StylesConfig` interface provides styling options for all checkout form elements.

<Note>
  Define your `StylesConfig` objects and pass them into the `styles` property when calling `checkout.mount('element-id', { ...config, styles })`, following the pattern in [Mount the Checkout](/sdk-reference/introduction/getting-started#mount-the-checkout).
</Note>

### Core Elements

<ParamField path="Input" type="InputStyles">
  Configure card number, expiry, CVC, cardholder name, etc.

  <Expandable title="InputStyles Properties">
    <ParamField path="field" type="HTMLStyles">
      Styles for the input element itself.

      <Expandable title="field properties">
        <ParamField path="styles" type="CSSProperties">
          React CSS properties for the input element.
        </ParamField>

        <ParamField path="className" type="string">
          CSS class for the input element.
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField path="label" type="HTMLStyles">
      Styles for field labels.

      <Expandable title="label properties">
        <ParamField path="styles" type="CSSProperties">
          React CSS properties for labels.
        </ParamField>

        <ParamField path="className" type="string">
          CSS class for labels.
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField path="error" type="HTMLStyles">
      Styles for validation error messages.

      <Expandable title="error properties">
        <ParamField path="styles" type="CSSProperties">
          React CSS properties for error text.
        </ParamField>

        <ParamField path="className" type="string">
          CSS class for error text.
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField path="container" type="HTMLStyles & {focus?: string}">
      Wrapper around field, label, and error.

      <Expandable title="container properties">
        <ParamField path="styles" type="CSSProperties">
          React CSS properties for the container.
        </ParamField>

        <ParamField path="className" type="string">
          CSS class for the container.
        </ParamField>

        <ParamField path="focus" type="string">
          CSS class applied when field is focused.
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField path="placeholder" type="{ styles?: CSSProperties }">
      Styles for placeholder text.

      <Expandable title="placeholder properties">
        <ParamField path="styles" type="CSSProperties">
          React CSS properties for placeholder text.
        </ParamField>
      </Expandable>
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="SubmitButton" type="ISubmitButtonStyles">
  Styles for the payment submit button.

  <Expandable title="SubmitButton properties">
    <ParamField path="styles" type="CSSProperties">
      React CSS properties for the button.
    </ParamField>

    <ParamField path="className" type="string">
      CSS class for the button.
    </ParamField>

    <ParamField path="iconSvg" type="string">
      Inline SVG markup rendered to the left of the button text. The spinner replaces this icon while a payment attempt is pending, so size the artwork (24x24px recommended) to match the layout without shifting content.
    </ParamField>
  </Expandable>
</ParamField>

### Digital Wallet Buttons

<ParamField path="ApplePayButton" type="IApplePayButtonStyles">
  Apple Pay button styling following Apple's guidelines.

  <Expandable title="Apple Pay Configuration">
    <ParamField path="styles" type="Partial<Pick<ApplePayOptions, 'type' | 'style' | 'padding' | 'borderRadius' | 'size'>>">
      Apple Pay styling options:

      * `type`: `'buy' | 'donate' | 'check-out' | 'book' | 'subscribe'`
      * `style`: `'black' | 'white' | 'white-outline'`
      * `borderRadius`: number (pixels)
      * `size`: `'small' | 'medium' | 'large'`
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="PayPalButton" type="IPayPalButtonStyles">
  PayPal button styling following PayPal specifications.

  <Expandable title="PayPal Configuration">
    <ParamField path="styles" type="PayPalButtonStyle">
      PayPal styling options:

      * `layout`: `'horizontal' | 'vertical'`
      * `color`: `'gold' | 'blue' | 'silver' | 'white' | 'black'`
      * `shape`: `'rect' | 'pill'`
      * `label`: `'paypal' | 'checkout' | 'buynow' | 'pay'`
      * `height`: number (25-55 pixels)
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="GooglePayButton" type="IGooglePayButtonStyles">
  Google Pay button styling.

  <Expandable title="Google Pay Configuration">
    <ParamField path="styles" type="Partial<Pick<GooglePayOptions, 'type' | 'color' | 'borderRadius' | 'size'>>">
      Google Pay styling options:

      * `type`: `'buy' | 'checkout' | 'pay' | 'order'`
      * `color`: `'default' | 'black' | 'white'`
      * `borderRadius`: number (pixels)
      * `size`: `'small' | 'medium' | 'large'`
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="CashAppButton" type="HTMLStyles">
  Cash App Pay button styling (Stripe wallets only).

  <Expandable title="Cash App Configuration">
    <ParamField path="styles" type="CSSProperties">
      Standard CSS-in-JS overrides for the Cash App button (height, border, colors, spacing). Stick to solid fills that maintain contrast for accessibility.
    </ParamField>

    <ParamField path="className" type="string">
      Append a class for pseudo-state styling in your stylesheet (hover, focus, disabled) if you prefer to avoid inline styles.
    </ParamField>
  </Expandable>

  <Tip>
    Match the default 40px height when possible so the button aligns with other wallet controls. Increase padding for better tap targets on mobile.
  </Tip>
</ParamField>

<ParamField path="WalletButton" type="HTMLStyles">
  Styles for generic wallet buttons (e.g., custom wallet implementations).

  <Expandable title="WalletButton properties">
    <ParamField path="styles" type="CSSProperties">
      React CSS properties object for styling wallet buttons.
    </ParamField>

    <ParamField path="className" type="string">
      CSS class name to apply to wallet buttons.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="BraintreeButton" type="HTMLStyles">
  Styles for Braintree payment buttons.

  <Expandable title="BraintreeButton properties">
    <ParamField path="styles" type="CSSProperties">
      React CSS properties object for styling Braintree buttons.
    </ParamField>

    <ParamField path="className" type="string">
      CSS class name to apply to Braintree buttons.
    </ParamField>
  </Expandable>
</ParamField>

### Pix Button

<ParamField path="PixButton" type="HTMLStyles">
  Styles for the Pix button in the payment method list. The button shows the Pix icon without a label, so text properties have no effect — use `styles` for the surface itself: background, border, height, and radius. Defaults are a full-width 40px button with a white background, an `#e0e0e0` border, and the theme's border radius. The dark theme uses a `#1a1a1a` background with a `#333` border.

  <Expandable title="PixButton properties">
    <ParamField path="styles" type="CSSProperties">
      Inline styles applied directly to the button element. These override the theme defaults, so a background you set here applies in both light and dark themes.
    </ParamField>

    <ParamField path="className" type="string">
      Custom class name appended to the button element for pseudo-state or per-theme rules (hover, focus, disabled) in your stylesheet.
    </ParamField>
  </Expandable>

  ```ts pix-button.constant.ts theme={"system"}
  import { type StylesConfig } from '@paynext/sdk'

  const pixButtonStyles: StylesConfig = {
    PixButton: {
      styles: {
        backgroundColor: '#32BCAD',
        border: 'none',
        borderRadius: '8px'
      }
    }
  }
  ```
</ParamField>

### Pix Form

<ParamField path="PixForm" type="PixFormStyles">
  Overrides for the Pix form's embedded Stripe Payment Element — the email, CPF/CNPJ, and name fields, plus the QR code step. Unlike the other elements on this page, these map to [Stripe's Appearance API](https://stripe.com/docs/elements/appearance-api) variables instead of React `CSSProperties`, since the Pix form renders inside a Stripe-hosted iframe.

  <Expandable title="PixFormStyles properties">
    <ParamField path="colorPrimary" type="string">
      Accent color for the focused field and primary QR code elements.
    </ParamField>

    <ParamField path="colorBackground" type="string">
      Background color of the field group.
    </ParamField>

    <ParamField path="colorText" type="string">
      Text color for labels and entered values.
    </ParamField>

    <ParamField path="colorDanger" type="string">
      Color for validation error text and borders.
    </ParamField>

    <ParamField path="colorTextPlaceholder" type="string">
      Placeholder text color.
    </ParamField>

    <ParamField path="borderRadius" type="string">
      Corner radius for the Pix input fields, for example `'8px'`.
    </ParamField>
  </Expandable>

  <Info>
    Every field is optional — fields you don't set keep the active theme's default. Overrides apply to both recurring Pix Automático and one-time Pix, and re-apply immediately if the theme changes while the form is open. See [Pix Form Theming](/sdk-reference/web-sdk/customization/theme#pix-form-theming).
  </Info>

  ```ts pix-form.constant.ts theme={"system"}
  import { type StylesConfig } from '@paynext/sdk'

  const pixFormStyles: StylesConfig = {
    PixForm: {
      colorPrimary: '#ff4785',
      borderRadius: '4px'
    }
  }
  ```

  <Tip>
    Available from SDK version **1.1.0**.
  </Tip>
</ParamField>

<ParamField path="BackButton" type="HTMLStyles">
  Styles for the back button wrapper that sits above the card form (hidden when the default variant hides the control). Defaults include a 30x30px flex container with centered content, a `#f4f4f5` background, and 8px border radius.

  <Expandable title="BackButton properties">
    <ParamField path="styles" type="CSSProperties">
      Inline styles applied directly to the wrapper element.
    </ParamField>

    <ParamField path="className" type="string">
      Custom class name appended to the wrapper element for external CSS targeting.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="cssVariables" type="CSSVariablesConfig">
  Override the SDK design tokens directly from `styles` without adding external stylesheets. Values apply to the checkout root element and merge with the active `theme`.

  <Info>
    Leave any variable undefined to keep the theme default. See [Theme Support › CSS Variables](/sdk-reference/web-sdk/customization/theme#css-variables) for the complete token list and defaults.
  </Info>

  ```ts css-variables.constant.ts theme={"system"}
  import { PayNextCheckout, type StylesConfig, type CSSVariablesConfig } from '@paynext/sdk'

  const brandTokens: StylesConfig = {
    cssVariables: {
      '--paynext-sdk-bg': '#0b1220',
      '--paynext-sdk-text': '#e2e8f0',
      '--paynext-sdk-button-bg': 'linear-gradient(135deg, #06b6d4, #2563eb)',
      '--paynext-sdk-border-radius': '14px',
      '--paynext-sdk-input-focus-shadow': 'none' // Disable default focus ring
    }
  }

  const checkout = new PayNextCheckout()
  await checkout.mount('checkout-container', {
    ...config,
    styles: brandTokens,
  })
  ```

  <Tip>
    Use `cssVariables` for theme-level changes and component-level `styles` for fine-grained control. They work together—component styles take precedence over CSS variables.
  </Tip>
</ParamField>

<Note>
  Element-level styling properties support both `styles` (React `CSSProperties`) and `className`, while `cssVariables` overrides global tokens for the entire checkout.\
  Wallet button styling must also follow each processor's brand guidelines (Apple, PayPal, Google) to remain compliant.
</Note>

<Reference title="Brand & Compliance">
  • Apple Pay: Follow Apple Human Interface Guidelines for Apple Pay buttons.
  • Google Pay: Follow Google brand & placement guidelines.
  • PayPal: Follow the PayPal button style guide.

  These processors may restrict deployments that don't meet their brand requirements (placement, size, color, contrast).
</Reference>

## Target Elements with External CSS

The SDK adds `data-paynext-*` attributes to key elements, enabling CSS targeting from external stylesheets without modifying JavaScript:

| Attribute                                        | Element                                                 |
| ------------------------------------------------ | ------------------------------------------------------- |
| `data-paynext-component="checkout"`              | Main checkout container                                 |
| `data-paynext-version="1.0"`                     | SDK version attribute                                   |
| `data-paynext-element="card-number-wrapper"`     | Card number field outer wrapper                         |
| `data-paynext-element="card-number-container"`   | Card number input container (receives focus styles)     |
| `data-paynext-element="card-number-input"`       | Card number input field                                 |
| `data-paynext-element="card-number-label"`       | Card number label                                       |
| `data-paynext-element="card-number-error-label"` | Card number validation error                            |
| `data-paynext-element="card-name-wrapper"`       | Cardholder name field outer wrapper                     |
| `data-paynext-element="card-name-container"`     | Cardholder name input container (receives focus styles) |
| `data-paynext-element="card-name-input"`         | Cardholder name input field                             |
| `data-paynext-element="card-name-label"`         | Cardholder name label                                   |
| `data-paynext-element="card-name-error-label"`   | Cardholder name validation error                        |
| `data-paynext-element="submit-button"`           | Submit/Pay button                                       |

```css external-styles.css theme={"system"}
/* Target the checkout container for CSS variable overrides */
[data-paynext-component="checkout"] {
  --paynext-sdk-border: #e5e7eb;
  --paynext-sdk-border-focus: #6366f1;
  --paynext-sdk-input-focus-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Target specific input containers */
[data-paynext-element="card-number-container"],
[data-paynext-element="card-name-container"] {
  transition: border-color 0.2s ease;
}

/* Style the submit button */
[data-paynext-element="submit-button"] {
  transition: transform 0.1s ease;
}

[data-paynext-element="submit-button"]:hover {
  transform: translateY(-1px);
}
```

<Tip>
  Combine external CSS with `cssVariables` for maximum flexibility. Use external CSS for media queries and pseudo-states, and `cssVariables` for brand tokens.
</Tip>

***

## Use Advanced Styling Patterns

These examples demonstrate real-world styling patterns used by production applications. Each example includes performance optimizations and accessibility considerations.

<Note>
  All examples below show only the `StylesConfig` object. Pass it to `checkout.mount('element-id', { ...config, styles })` as shown in [Mount the Checkout](/sdk-reference/introduction/getting-started#mount-the-checkout).
</Note>

<Tabs>
  <Tab title="CSS Variables Only">
    ```tsx css-variables-only.constant.ts theme={"system"}
    import { type StylesConfig, type CSSVariablesConfig } from '@paynext/sdk'

    // Theme-level customization using only CSS variables
    const cssVariablesStyles: StylesConfig = {
      cssVariables: {
        '--paynext-sdk-input-focus-shadow': 'none',
        '--paynext-sdk-border': '#e5e7eb',
        '--paynext-sdk-border-focus': '#6366f1',
        '--paynext-sdk-input-bg': '#f9fafb',
        '--paynext-sdk-input-text': '#1f2937',
        '--paynext-sdk-button-bg': '#6366f1',
        '--paynext-sdk-button-text': '#ffffff',
        '--paynext-sdk-button-hover-opacity': '0.9',
        '--paynext-sdk-border-radius': '8px'
      }
    }

    ```

    <Tip>
      CSS variables are the simplest way to customize the checkout. Use them for theme-level changes without touching component styles.
    </Tip>
  </Tab>

  <Tab title="Premium Button">
    ```tsx submit-button.constant.ts theme={"system"}
    import { type StylesConfig } from '@paynext/sdk'

    const submitButtonStyles: StylesConfig = {
      SubmitButton: {
        styles: {
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          border: 'none',
          borderRadius: '12px',
          color: 'white',
          fontSize: '16px',
          fontWeight: '600',
          padding: '16px 24px',
          boxShadow: '0 8px 32px rgba(102, 126, 234, 0.3)',
          transition: 'all 0.3s ease',
          cursor: 'pointer'
        },
        className: 'hover:transform hover:scale-105 hover:shadow-lg active:scale-95'
      }
    }

    ```

    <Tip>
      Use transforms and shadows for clear hover feedback without layout shifts.
    </Tip>
  </Tab>

  <Tab title="Apple Pay Button">
    ```tsx apple-pay.constant.ts theme={"system"}
    import { type StylesConfig } from '@paynext/sdk'

    const applePayStyles: StylesConfig = {
      ApplePayButton: {
        styles: {
          type: 'buy',
          style: 'black',
          borderRadius: 8,
          padding: 4,
          size: 'medium'
        }
      }
    }

    ```

    <Note>
      Apple Pay button styling follows Apple's Human Interface Guidelines. The `type` determines the button text, while `style` controls the appearance.
    </Note>
  </Tab>

  <Tab title="PayPal Button">
    ```tsx paypal.constant.ts theme={"system"}
    import { type StylesConfig } from '@paynext/sdk'

    const paypalStyles: StylesConfig = {
      PayPalButton: {
        styles: {
          layout: 'horizontal',
          color: 'gold',
          shape: 'pill',
          label: 'checkout',
          tagline: false,
          height: 40
        }
      }
    }

    ```

    <Note>
      Use PayPal brand-approved styles. `gold` is the default recommendation in their guide.
    </Note>
  </Tab>

  <Tab title="Google Pay Button">
    ```tsx google-pay.constant.ts theme={"system"}
    import { type StylesConfig } from '@paynext/sdk'

    const googlePayStyles: StylesConfig = {
      GooglePayButton: {
        styles: {
          type: 'buy',
          color: 'default',
          borderRadius: 4,
          size: 'medium'
        }
      }
    }

    ```

    <Info>
      Use `color: 'white'` on dark backgrounds and `color: 'black'` on light backgrounds.
    </Info>
  </Tab>

  <Tab title="Cash App Pay Button">
    ```tsx cash-app.constant.ts theme={"system"}
    import { type StylesConfig } from '@paynext/sdk'

    const cashAppStyles: StylesConfig = {
      CashAppButton: {
        styles: {
          backgroundColor: '#14d13a',
          color: '#ffffff',
          border: 'none',
          borderRadius: '12px',
          fontSize: '16px',
          fontWeight: '600',
          height: '40px',
          cursor: 'pointer',
          transition: 'background-color 0.2s ease'
        },
        className: 'hover:bg-[#0ead2e] focus:ring-4 focus:ring-green-100'
      }
    }

    ```

    <Note>
      Match the default 40px height to align with other wallet buttons.
    </Note>
  </Tab>

  <Tab title="Amazon Pay Button">
    ```tsx cash-app.constant.ts theme={"system"}
    import { type StylesConfig } from '@paynext/sdk'

    const amazonPayStyles: StylesConfig = {
      AmazonPayButton: {
        styles: {
          backgroundColor: '#FFD814',
          color: '#0F1111',
          border: 'none',
          borderRadius: '8px',
          fontSize: '14px',
          fontWeight: '500',
          height: '40px',
          cursor: 'pointer',
          transition: 'background-color 0.2s ease'
        },
        className: 'hover:bg-[#F7CA00] focus:ring-4 focus:ring-yellow-100'
      },
    }

    ```

    <Note>
      Match the default 40px height to align with other wallet buttons.
    </Note>
  </Tab>

  <Tab title="Pix Button">
    ```tsx pix-button.constant.ts theme={"system"}
    import { type StylesConfig } from '@paynext/sdk'

    const pixButtonStyles: StylesConfig = {
      PixButton: {
        styles: {
          backgroundColor: '#32BCAD',
          border: 'none',
          borderRadius: '8px',
          height: '40px',
          cursor: 'pointer',
          transition: 'background-color 0.2s ease'
        },
        className: 'hover:bg-[#2AA89B] focus:ring-4 focus:ring-teal-100'
      }
    }

    ```

    <Note>
      The button shows the Pix icon only, so text properties have no effect. Keep the default 40px height to align with the other payment buttons.
    </Note>
  </Tab>

  <Tab title="Generic Wallet Button">
    ```tsx wallet-button.constant.ts theme={"system"}
    import { type StylesConfig } from '@paynext/sdk'

    const walletButtonOnly: StylesConfig = {
      WalletButton: {
        styles: {
          backgroundColor: '#1a1a1a',
          color: 'white',
          border: '1px solid #333',
          borderRadius: '8px',
          padding: '12px 20px',
          fontSize: '14px',
          fontWeight: '500',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          gap: '8px',
          transition: 'all 0.2s ease'
        },
        className: 'hover:bg-gray-800 hover:border-gray-600 active:scale-98'
      }
    }

    ```

    <Warning>
      Maintain contrast ratios ≥ 4.5:1 for accessibility.
    </Warning>
  </Tab>

  <Tab title="Braintree Button">
    ```tsx braintree-button.constant.ts theme={"system"}
    import { type StylesConfig } from '@paynext/sdk'

    const braintreeButtonOnly: StylesConfig = {
      BraintreeButton: {
        styles: {
          backgroundColor: '#0070f3',
          color: 'white',
          border: 'none',
          borderRadius: '6px',
          padding: '14px 24px',
          fontSize: '16px',
          fontWeight: '600',
          cursor: 'pointer'
        },
        className: 'hover:bg-blue-700 focus:ring-4 focus:ring-blue-100'
      }
    }

    ```
  </Tab>

  <Tab title="Enhanced Input Styling">
    ```tsx enhanced-input.constant.ts theme={"system"}
    import { type StylesConfig } from '@paynext/sdk'

    const enhancedInputStyles: StylesConfig = {
      Input: {
        field: {
          styles: {
            backgroundColor: '#ffffff',
            border: '1px solid #d1d5db',
            borderRadius: '8px',
            padding: '16px 20px',
            fontSize: '16px',
            fontFamily: 'Inter, system-ui, sans-serif',
            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
            boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
          },
          className: 'focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 hover:border-gray-400'
        },
        label: {
          styles: {
            color: '#374151',
            fontSize: '14px',
            fontWeight: '600',
            marginBottom: '8px',
            display: 'block',
            textTransform: 'capitalize'
          }
        },
        placeholder: {
          styles: {
            color: '#9ca3af',
            fontSize: '15px',
            fontStyle: 'normal',
            opacity: '0.8'
          }
        },
        error: {
          styles: {
            color: '#dc2626',
            fontSize: '13px',
            fontWeight: '500',
            marginTop: '6px'
          },
          className: 'flex items-start gap-2'
        },
        container: {
          styles: {
            marginBottom: '24px',
            position: 'relative'
          },
          focus: 'ring-2 ring-indigo-500 ring-opacity-20'
        }
      }
    }

    ```

    <Tip>
      Use subtle placeholder styling with opacity to create visual hierarchy without overwhelming the user.
    </Tip>
  </Tab>

  <Tab title="Combined Approach">
    ```tsx combined-styles.constant.ts theme={"system"}
    import { type StylesConfig, type CSSVariablesConfig } from '@paynext/sdk'

    // Best practice: Use CSS variables for theme tokens, 
    // component styles for specific overrides
    const combinedStyles: StylesConfig = {
      // Theme-level tokens via CSS variables
      cssVariables: {
        '--paynext-sdk-input-focus-shadow': '0 0 0 3px rgba(99, 102, 241, 0.1)',
        '--paynext-sdk-border': '#e5e7eb',
        '--paynext-sdk-border-focus': '#6366f1',
        '--paynext-sdk-border-radius': '10px'
      },
      
      // Component-specific customization
      Input: {
        container: {
          styles: { marginBottom: '20px' }
        },
        label: {
          styles: { fontWeight: '600' }
        }
      },
      
      // Button with gradient (overrides cssVariables button-bg)
      SubmitButton: {
        styles: {
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          padding: '18px 32px',
          fontSize: '17px',
          fontWeight: '700',
          boxShadow: '0 8px 32px rgba(102, 126, 234, 0.3)'
        }
      }
    }

    ```

    <Tip>
      Component-level `styles` take precedence over `cssVariables`. Set defaults with variables, then override specific components as needed.
    </Tip>
  </Tab>
</Tabs>

***

## Review Complete Styling Example

Here's a comprehensive example that demonstrates styling all available components. This configuration is production-ready and includes:

* **Accessibility compliance**: <Tooltip tip="Web Content Accessibility Guidelines—international standards for accessible web content. Level AA is the recommended conformance level.">WCAG 2.1 AA</Tooltip> standards
* **Performance optimization**: Hardware-accelerated transitions
* **Cross-browser compatibility**: Tested across major browsers
* **Mobile responsiveness**: Touch-friendly targets and spacing

```tsx complete-styling.constant.ts theme={"system"}
import { type PayNextConfig, type StylesConfig, type CSSVariablesConfig } from '@paynext/sdk'

const completeStyles: StylesConfig = {
  // Theme-level tokens (optional, for global consistency)
  cssVariables: {
    '--paynext-sdk-border': '#e5e7eb',
    '--paynext-sdk-border-focus': '#3b82f6',
    '--paynext-sdk-input-focus-shadow': '0 0 0 3px rgba(59, 130, 246, 0.15)',
    '--paynext-sdk-border-radius': '8px'
  },

  // Input field styling
  Input: {
    field: {
      styles: {
        backgroundColor: '#ffffff',
        border: '2px solid #e5e7eb',
        borderRadius: '8px',
        padding: '12px 16px',
        fontSize: '16px',
        fontFamily: 'system-ui, sans-serif',
        transition: 'border-color 0.2s ease'
      },
      className: 'focus:border-blue-500 focus:outline-none'
    },
    label: {
      styles: {
        color: '#374151',
        fontSize: '14px',
        fontWeight: '600',
        marginBottom: '6px',
        display: 'block'
      }
    },
    error: {
      styles: {
        color: '#ef4444',
        fontSize: '13px',
        marginTop: '4px'
      },
      className: 'flex items-center gap-1'
    },
    container: {
      styles: { marginBottom: '16px' },
      focus: 'ring-2 ring-blue-500 ring-opacity-20'
    },
    placeholder: {
      styles: {
        color: '#9ca3af',
        fontSize: '16px'
      }
    }
  },

  // Submit button styling
  SubmitButton: {
    styles: {
      backgroundColor: '#3b82f6',
      color: 'white',
      border: 'none',
      borderRadius: '8px',
      padding: '16px 24px',
      fontSize: '16px',
      fontWeight: '600',
      width: '100%',
      cursor: 'pointer',
      transition: 'all 0.2s ease'
    },
    className: 'hover:bg-blue-700 active:scale-98 disabled:opacity-50'
  },

  // Apple Pay button styling
  ApplePayButton: {
    styles: {
      type: 'buy',
      style: 'black',
      borderRadius: 8,
      size: 'medium'
    }
  },

  // PayPal button styling
  PayPalButton: {
    styles: {
      layout: 'horizontal',
      color: 'gold',
      shape: 'rect',
      label: 'checkout',
      height: 48
    }
  },

  // Google Pay button styling
  GooglePayButton: {
    styles: {
      type: 'buy',
      color: 'default',
      borderRadius: 8,
      size: 'medium'
    }
  },

  // Generic wallet button styling
  WalletButton: {
    styles: {
      backgroundColor: '#f9fafb',
      color: '#374151',
      border: '1px solid #d1d5db',
      borderRadius: '8px',
      padding: '12px 16px',
      fontSize: '14px',
      fontWeight: '500',
      cursor: 'pointer',
      transition: 'all 0.2s ease'
    },
    className: 'hover:bg-gray-50 hover:border-gray-400'
  },

  // Braintree button styling
  BraintreeButton: {
    styles: {
      backgroundColor: '#6366f1',
      color: 'white',
      border: 'none',
      borderRadius: '8px',
      padding: '14px 20px',
      fontSize: '15px',
      fontWeight: '600',
      cursor: 'pointer'
    },
    className: 'hover:bg-indigo-700 focus:ring-4 focus:ring-indigo-100'
  },

  // Cash App Pay button styling
  CashAppButton: {
    styles: {
      backgroundColor: '#14d13a',
      color: '#ffffff',
      border: 'none',
      borderRadius: '12px',
      fontSize: '16px',
      fontWeight: '600',
      height: '40px',
      cursor: 'pointer',
      transition: 'background-color 0.2s ease'
    },
    className: 'hover:bg-[#0ead2e] focus:ring-4 focus:ring-green-100'
  },

  // Amazon Pay button styling
  AmazonPayButton: {
    styles: {
      backgroundColor: '#FFD814',
      color: '#0F1111',
      border: 'none',
      borderRadius: '8px',
      fontSize: '14px',
      fontWeight: '500',
      height: '40px',
      cursor: 'pointer',
      transition: 'background-color 0.2s ease'
    },
    className: 'hover:bg-[#F7CA00] focus:ring-4 focus:ring-yellow-100'
  },

  // Pix button styling (icon-only button — text properties have no effect)
  PixButton: {
    styles: {
      backgroundColor: '#32BCAD',
      border: 'none',
      borderRadius: '8px',
      height: '40px',
      cursor: 'pointer',
      transition: 'background-color 0.2s ease'
    },
    className: 'hover:bg-[#2AA89B] focus:ring-4 focus:ring-teal-100'
  },

  // Pix form styling (Stripe Appearance API variables, not CSSProperties)
  PixForm: {
    colorPrimary: '#32BCAD',
    borderRadius: '8px'
  },

  // Back button styling
  BackButton: {
    styles: {
      width: '30px',
      height: '30px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#f4f4f5',
      borderRadius: '8px'
    },
    className: 'text-gray-700'
  }
}

const completeConfig: PayNextConfig = {
  clientToken: 'your-client-token',
  environment: 'sandbox',
  apiVersion: 'v1',
  styles: completeStyles,
  /* other options */
}

// When mounting (see Getting Started "Mount the Checkout" section):
const checkout = new PayNextCheckout()
await checkout.mount('checkout-container', completeConfig)
```

<Tip>
  This production-ready example includes <Tooltip tip="Web Content Accessibility Guidelines—Level AA is the recommended conformance level.">WCAG 2.1 AA</Tooltip> compliance: 16px min text, 44px touch targets, ≥4.5:1 contrast, and visible focus states.
</Tip>

***

## Apply Best Practices

Use [CSS custom properties](#implement-brand-styles) for design system integration, enabling centralized management, easy theme switching, and team collaboration. For theme-level tokens, prefer [cssVariables](/sdk-reference/web-sdk/customization/theme#css-variables) over inline styles.

<Warning>
  For older browsers, provide fallback values: `backgroundColor: 'var(--color-primary, #3b82f6)'`
</Warning>

***

## Follow Common Styling Patterns

### Responsive Design

<AccordionGroup>
  <Accordion title="Mobile-First Approach">
    Design your checkout form with mobile users in mind first, then enhance for larger screens:

    ```tsx mobile-first.constant.ts theme={"system"}
    const responsiveStyles: StylesConfig = {
      Input: {
        field: {
          styles: {
            fontSize: '16px', // Prevents zoom on iOS
            padding: '14px 16px', // Larger touch targets
            borderRadius: '8px'
          },
          className: 'w-full sm:max-w-md' // Full width on mobile, constrained on desktop
        }
      },
      SubmitButton: {
        styles: {
          padding: '16px 24px', // Generous padding for touch
          fontSize: '16px',
          width: '100%'
        },
        className: 'sm:w-auto sm:min-w-[200px]' // Full width on mobile, auto on desktop
      }
    }
    ```
  </Accordion>

  <Accordion title="Accessibility Considerations">
    Ensure your styling meets accessibility standards:

    ```tsx accessible.constant.ts theme={"system"}
    const accessibleStyles: StylesConfig = {
      Input: {
        field: {
          styles: {
            fontSize: '16px', // Minimum readable size
            padding: '12px 16px',
            border: '2px solid #d1d5db', // Visible border
            backgroundColor: '#ffffff' // High contrast
          },
          className: 'focus:ring-4 focus:ring-blue-500 focus:ring-opacity-50' // Clear focus indicator
        },
        error: {
          styles: {
            color: '#dc2626', // High contrast red
            fontSize: '14px'
          },
          className: 'flex items-center gap-2' // Space for error icon
        },
        placeholder: {
          styles: {
            color: '#6b7280', // Sufficient contrast ratio
            fontSize: '16px' // Same size as input text
          }
        }
      },
      SubmitButton: {
        styles: {
          minHeight: '44px', // Minimum touch target size
          fontSize: '16px',
          fontWeight: '600'
        },
        className: 'focus:ring-4 focus:ring-offset-2' // Clear focus ring
      }
    }
    ```

    <Check>
      <Tooltip tip="Web Content Accessibility Guidelines—Level AA compliance checklist">WCAG</Tooltip> quick checks: 16px min text, ≥4.5:1 contrast, visible focus ring, 44px touch targets, no color-only semantics.
    </Check>
  </Accordion>

  <Accordion title="Performance Optimization">
    Optimize your styles for better performance:

    ```tsx optimized.constant.ts theme={"system"}
    const optimizedStyles: StylesConfig = {
      Input: {
        field: {
          styles: {
            // Use CSS custom properties for dynamic theming
            backgroundColor: 'var(--input-bg, #ffffff)',
            borderColor: 'var(--input-border, #d1d5db)',
            // Prefer transform over changing layout properties
            transition: 'border-color 0.2s ease, box-shadow 0.2s ease'
          }
        }
      },
      SubmitButton: {
        styles: {
          // Use will-change for animations
          willChange: 'transform',
          transition: 'transform 0.1s ease'
        },
        className: 'hover:scale-105 active:scale-95' // Hardware-accelerated transforms
      }
    }
    ```
  </Accordion>
</AccordionGroup>

### Brand Integration

<CardGroup cols={2}>
  <Card title="Color Consistency" icon="palette">
    Use your brand colors consistently across all payment elements to maintain visual cohesion.
  </Card>

  <Card title="Typography Matching" icon="type">
    Match your website's typography by using the same font families and weights in the checkout form.
  </Card>

  <Card title="Border Radius" icon="square">
    Maintain consistent border radius values that match your site's design language.
  </Card>

  <Card title="Animation Timing" icon="clock">
    Use consistent transition durations (typically 0.2s-0.3s) for a cohesive user experience.
  </Card>
</CardGroup>

### Common Styling Patterns

<Tabs>
  <Tab title="Dark Mode">
    ```tsx dark-mode.constant.ts theme={"system"}
    import { type StylesConfig } from '@paynext/sdk'

    // Option 1: Use built-in dark theme with CSS variable overrides
    const darkModeWithVariables: StylesConfig = {
      cssVariables: {
        '--paynext-sdk-bg': '#1a1a1a',
        '--paynext-sdk-text': '#ffffff',
        '--paynext-sdk-border': '#404040',
        '--paynext-sdk-border-focus': '#8b5cf6',
        '--paynext-sdk-input-bg': '#2d2d2d',
        '--paynext-sdk-input-text': '#f5f5f5',
        '--paynext-sdk-input-focus-shadow': '0 0 0 2px rgba(139, 92, 246, 0.3)',
        '--paynext-sdk-button-bg': '#8b5cf6',
        '--paynext-sdk-button-hover-opacity': '0.85'
      }
    }

    // Option 2: Component-level dark styling
    const darkModeStyles: StylesConfig = {
      Input: {
        field: {
          styles: {
            backgroundColor: '#1f2937',
            borderColor: '#374151',
            color: '#f9fafb'
          },
          className: 'focus:border-blue-400 focus:ring-blue-400'
        },
        label: {
          styles: { color: '#e5e7eb' }
        },
        error: {
          styles: { color: '#f87171' }
        }
      },
      SubmitButton: {
        styles: {
          backgroundColor: '#3b82f6',
          color: '#ffffff'
        },
        className: 'hover:bg-blue-600'
      }
    }
    ```

    <Tip>
      Prefer `cssVariables` for dark mode. See [Theme Support](/sdk-reference/web-sdk/customization/theme) for more presets.
    </Tip>
  </Tab>

  <Tab title="Minimal Design">
    ```tsx minimal.constant.ts theme={"system"}
    import { type StylesConfig } from '@paynext/sdk'

    // Clean, minimal aesthetic using CSS variables
    const minimalStyles: StylesConfig = {
      cssVariables: {
        '--paynext-sdk-input-focus-shadow': 'none',
        '--paynext-sdk-border': '#000000',
        '--paynext-sdk-border-focus': '#000000',
        '--paynext-sdk-border-radius': '0px'
      },
      Input: {
        field: {
          styles: {
            border: 'none',
            borderBottom: '2px solid #e5e7eb',
            padding: '12px 0',
            backgroundColor: 'transparent'
          },
          className: 'focus:border-blue-500'
        },
        label: {
          styles: {
            fontSize: '12px',
            textTransform: 'uppercase',
            letterSpacing: '0.1em',
            color: '#6b7280'
          }
        }
      },
      SubmitButton: {
        styles: {
          backgroundColor: 'transparent',
          border: '2px solid #000000',
          color: '#000000',
          padding: '16px 32px',
          textTransform: 'uppercase',
          letterSpacing: '0.05em'
        },
        className: 'hover:bg-black hover:text-white'
      }
    }
    ```
  </Tab>
</Tabs>

***