{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading"]},"type":"markdown"},"seo":{"title":"About customisation","description":"Transform your commerce with PXP's unified platform—seamless payments, real-time insights, and global growth in one powerful integration.","lang":"en-UK","siteUrl":"https://developer.pxp.io","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"about-customisation","__idx":0},"children":["About customisation"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn about how you can customise card components."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Card components come with responsive and accessible default styling, but are designed to be fully customisable."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"core-styling-architecture","__idx":2},"children":["Core styling architecture"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"state-based-styling-system","__idx":3},"children":["State-based styling system"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All styling configurations support multiple states to provide dynamic visual feedback:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"interface StateStyles {\n  base?: CSSProperties;      // Default appearance\n  valid?: CSSProperties;     // When field passes validation\n  invalid?: CSSProperties;   // When field fails validation\n}\n\ninterface ComponentStyles {\n  base?: CSSProperties;      // Container styles\n  valid?: CSSProperties;     // Valid state container\n  invalid?: CSSProperties;   // Invalid state container\n  input?: CSSProperties;     // Input element specific styles\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"css-properties-integration","__idx":4},"children":["CSS properties integration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All styling options use React's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CSSProperties"]}," interface, providing:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Type safety"]},": IntelliSense support and compile-time validation."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Comprehensive properties"]},": Access to all CSS properties."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Pseudo-selectors"]},": Support for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":hover"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":focus"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":active"]}," states."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Camel case conversion"]},": Automatic conversion from camelCase to kebab-case."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"component-specific-styling-options","__idx":5},"children":["Component-specific styling options"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"field-components-input-based","__idx":6},"children":["Field components (input-based)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All field components inherit from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FieldComponentConfig"]}," and support comprehensive styling:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"interface FieldComponentConfig {\n  // Container styling with state support\n  componentStyles?: ComponentStyles;\n    \n  // Input element styling with states\n  inputStyles?: StateStyles;\n    \n  // Label styling with states\n  labelStyles?: StateStyles;\n    \n  // Label positioning\n  labelPosition?: 'above' | 'below' | 'left' | 'right';\n  isFloatingLabel?: boolean;\n    \n  // Error message styling\n  invalidTextStyles?: CSSProperties;\n  invalidTextPosition?: 'above' | 'below' | 'left' | 'right';\n    \n  // Icon customisation\n  validIconSrc?: string;\n  invalidIconSrc?: string;\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example","__idx":7},"children":["Example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here's an example of a customised card number component."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const cardNumberConfig: CardNumberComponentConfig = {\n  // Container styling\n  componentStyles: {\n    base: {\n      backgroundColor: '#f8f9fa',\n      borderRadius: '8px',\n      padding: '16px',\n      boxShadow: '0 2px 4px rgba(0,0,0,0.1)'\n    },\n    valid: {\n      borderColor: '#28a745',\n      backgroundColor: '#f8fff8'\n    },\n    invalid: {\n      borderColor: '#dc3545',\n      backgroundColor: '#fff8f8'\n    }\n  },\n    \n  // Input field styling\n  inputStyles: {\n    base: {\n      fontSize: '18px',\n      fontWeight: '500',\n      color: '#2c3e50',\n      border: '2px solid #e9ecef',\n      borderRadius: '6px',\n      padding: '12px 16px',\n      transition: 'all 0.3s ease'\n    },\n    valid: {\n      borderColor: '#28a745',\n      ':focus': {\n        borderColor: '#20c997',\n        boxShadow: '0 0 0 3px rgba(40, 167, 69, 0.1)'\n      }\n    },\n    invalid: {\n      borderColor: '#dc3545',\n      ':focus': {\n        borderColor: '#c82333',\n        boxShadow: '0 0 0 3px rgba(220, 53, 69, 0.1)'\n      }\n     }\n    },\n    \n  // Label styling\n  labelStyles: {\n    base: {\n      fontSize: '14px',\n      fontWeight: '600',\n      color: '#495057',\n      marginBottom: '8px',\n      textTransform: 'uppercase',\n      letterSpacing: '0.5px'\n    },\n    invalid: {\n      color: '#dc3545'\n    }\n  },\n    \n  // Floating label configuration\n  isFloatingLabel: true,\n  labelPosition: 'above',\n    \n  // Error message styling\n  invalidTextStyles: {\n    fontSize: '12px',\n    color: '#dc3545',\n    fontStyle: 'italic',\n    marginTop: '4px'\n  },\n    \n  // Icon customisation\n  showHintIcon: true,\n  hintIconSrc: 'https://example.com/card-icon.svg'\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"card-submit","__idx":8},"children":["Card submit"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const submitButtonConfig: CardSubmitComponentConfig = {\n  submitText: 'Complete payment',\n  styles: {\n    base: {\n      backgroundColor: '#6c5ce7',\n      color: '#ffffff',\n      fontSize: '16px',\n        fontWeight: '600',\n        padding: '14px 32px',\n        borderRadius: '8px',\n        border: 'none',\n        cursor: 'pointer',\n        transition: 'all 0.2s ease',\n        textTransform: 'uppercase',\n        letterSpacing: '0.5px'\n      },\n      hover: {\n        backgroundColor: '#5a52d5',\n        transform: 'translateY(-1px)',\n        boxShadow: '0 4px 12px rgba(108, 92, 231, 0.3)'\n      },\n      disabled: {\n        backgroundColor: '#95a5a6',\n        cursor: 'not-allowed',\n        transform: 'none',\n        boxShadow: 'none'\n      }\n    }\n  }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"country-selection","__idx":9},"children":["Country selection"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const countryConfig: CountrySelectionComponentConfig = {\n  // Base field styling\n  componentStyles: {\n    base: {\n      position: 'relative',\n      width: '100%'\n    }\n  },\n    \n  // Dropdown container styling\n  dropdownStyles: {\n    backgroundColor: '#ffffff',\n    border: '1px solid #dee2e6',\n    borderRadius: '0 0 12px 12px',\n    boxShadow: '0 8px 25px rgba(0, 0, 0, 0.15)',\n    maxHeight: '250px',\n    overflowY: 'auto',\n    zIndex: 1000\n  },\n    \n  // Dropdown option styling\n  dropdownOptionStyles: {\n    unselected: {\n      padding: '12px 16px',\n      cursor: 'pointer',\n      borderBottom: '1px solid #f8f9fa',\n      transition: 'background-color 0.2s ease'\n    },\n    hover: {\n      backgroundColor: '#e3f2fd',\n      borderLeft: '3px solid #2196f3'\n    },\n    selected: {\n      backgroundColor: '#e8f5e8',\n      color: '#2e7d32',\n      fontWeight: '600',\n      borderLeft: '3px solid #4caf50'\n    }\n  }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"checkbox-components","__idx":10},"children":["Checkbox components"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const checkboxConfig: CheckboxComponentConfig = {\n  label: 'Save payment method for future use',\n  checkedColor: '#4caf50', \n  labelStyles: {\n    checked: {\n      color: '#2e7d32',\n      fontWeight: '500'\n    },\n    unchecked: {\n      color: '#6c757d',\n      fontWeight: '400'\n    }\n  }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"advanced-styling-patterns","__idx":11},"children":["Advanced styling patterns"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"pseudo-selectors-support","__idx":12},"children":["Pseudo-selectors support"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const advancedInputStyles = {\n  base: {\n    fontSize: '16px',\n    padding: '12px',\n    // Pseudo-selectors using key prefixes\n    ':hover': {\n      borderColor: '#007bff'\n    },\n    ':focus': {\n      borderColor: '#0056b3',\n      boxShadow: '0 0 0 3px rgba(0, 123, 255, 0.1)'\n    },\n    ':active': {\n      transform: 'translateY(1px)'\n    },\n    '::placeholder': {\n      color: '#6c757d',\n      fontStyle: 'italic'\n    }\n  }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"responsive-design","__idx":13},"children":["Responsive design"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const responsiveStyles = {\n  base: {\n    fontSize: '16px',\n    padding: '12px',\n    // Use CSS custom properties for responsive behaviour\n    '--mobile-padding': '8px',\n    '--desktop-padding': '16px',\n    \n    // Media queries via CSS-in-JS (if supported)\n    '@media (max-width: 768px)': {\n      fontSize: '14px',\n      padding: 'var(--mobile-padding)'\n    },\n    '@media (min-width: 769px)': {\n      padding: 'var(--desktop-padding)'\n    }\n  }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"typography-and-branding","__idx":14},"children":["Typography and branding"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"consistent-typography-system","__idx":15},"children":["Consistent typography system"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const typographyTheme = {\n  // Font families\n  primaryFont: 'Inter, system-ui, -apple-system, sans-serif',\n  monospaceFont: 'SF Mono, Monaco, monospace',\n    \n  // Font sizes\n  fontSizes: {\n    xs: '12px',\n    sm: '14px',\n    base: '16px',\n    lg: '18px',\n    xl: '20px'\n  },\n    \n  // Line heights\n  lineHeights: {\n    tight: '1.2',\n    normal: '1.5',\n    relaxed: '1.7'\n  }\n};\n\n// Apply to components\nconst cardNumberConfig = {\n  inputStyles: {\n    base: {\n      fontFamily: typographyTheme.primaryFont,\n      fontSize: typographyTheme.fontSizes.base,\n      lineHeight: typographyTheme.lineHeights.normal\n    }\n  },\n  labelStyles: {\n    base: {\n      fontFamily: typographyTheme.primaryFont,\n      fontSize: typographyTheme.fontSizes.sm,\n      lineHeight: typographyTheme.lineHeights.tight\n    }\n  }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"brand-colour-system","__idx":16},"children":["Brand colour system"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const brandColors = {\n  primary: '#6c5ce7',\n  secondary: '#00b894',\n  accent: '#fd79a8',\n  neutral: {\n    50: '#f8f9fa',\n    100: '#e9ecef',\n    200: '#dee2e6',\n    500: '#6c757d',\n    900: '#212529'\n  },\n  semantic: {\n    success: '#00b894',\n    warning: '#fdcb6e',\n    error: '#e17055',\n    info: '#74b9ff'\n  }\n};\n\n// Apply brand colours\nconst brandedComponentStyles = {\n  base: {\n    backgroundColor: brandColors.neutral[50],\n    borderColor: brandColors.neutral[200]\n  },\n  valid: {\n    borderColor: brandColors.semantic.success,\n    color: brandColors.semantic.success\n  },\n  invalid: {\n    borderColor: brandColors.semantic.error,\n    color: brandColors.semantic.error\n  }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"animation-and-transitions","__idx":17},"children":["Animation and transitions"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const animatedStyles = {\n  base: {\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    transform: 'translateY(0)',\n    opacity: 1\n  },\n  invalid: {\n    transform: 'translateX(2px)',\n    animation: 'shake 0.5s ease-in-out'\n  }\n};\n\n// Add keyframes via CSS injection\nconst keyframes = `\n  @keyframes shake {\n    0%, 100% { transform: translateX(0); }\n    25% { transform: translateX(-2px); }\n    75% { transform: translateX(2px); }\n  }\n`;\n","lang":"typescript"},"children":[]}]},"headings":[{"value":"About customisation","id":"about-customisation","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Core styling architecture","id":"core-styling-architecture","depth":2},{"value":"State-based styling system","id":"state-based-styling-system","depth":3},{"value":"CSS properties integration","id":"css-properties-integration","depth":3},{"value":"Component-specific styling options","id":"component-specific-styling-options","depth":2},{"value":"Field components (input-based)","id":"field-components-input-based","depth":3},{"value":"Example","id":"example","depth":4},{"value":"Card submit","id":"card-submit","depth":3},{"value":"Country selection","id":"country-selection","depth":3},{"value":"Checkbox components","id":"checkbox-components","depth":3},{"value":"Advanced styling patterns","id":"advanced-styling-patterns","depth":2},{"value":"Pseudo-selectors support","id":"pseudo-selectors-support","depth":3},{"value":"Responsive design","id":"responsive-design","depth":3},{"value":"Typography and branding","id":"typography-and-branding","depth":2},{"value":"Consistent typography system","id":"consistent-typography-system","depth":3},{"value":"Brand colour system","id":"brand-colour-system","depth":3},{"value":"Animation and transitions","id":"animation-and-transitions","depth":3}],"frontmatter":{"seo":{"title":"About customisation"}},"lastModified":"2026-02-26T12:14:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/card/about-customisation","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}