{"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 how to customise card components to match your app's design."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["PXP Android components come with sensible defaults but can be customised to match your app's design system. The SDK uses a simplified styling approach that works with Jetpack Compose and Material Design."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["By customising components, you can:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create a consistent visual experience that matches your brand."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Provide clear visual feedback for validation states."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Ensure accessibility compliance with proper colour contrast."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Adapt to different screen sizes and device orientations."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling-architecture","__idx":2},"children":["Styling architecture"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"component-specific-styles","__idx":3},"children":["Component-specific styles"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Each component type has its own style class for targeted customisation. This allows you to apply different visual treatments to different components, while maintaining consistency across your payment form."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"// Card number styling - organised into logical groups\nCardNumberStyle(\n    colors = CardNumberStyle.ColorStyles(/* colour properties */),\n    textStyles = CardNumberStyle.TextStyles(/* text properties */),\n    shapes = CardNumberStyle.ShapeStyles(/* shape properties */),\n    iconStyles = CardNumberStyle.IconStyles(/* icon properties */),\n    spacingStyles = CardNumberStyle.SpacingStyles(/* spacing properties */),\n    sizeStyles = CardNumberStyle.SizeStyles(/* size properties */)\n)\n\n// Card CVC styling - comprehensive style groups\nCardCvcStyle(\n    colors = CardCvcStyle.ColorStyles(/* colour properties */),\n    textStyles = CardCvcStyle.TextStyles(/* text properties */),\n    dimensions = CardCvcStyle.DimensionStyles(/* dimension properties */),\n    iconStyles = CardCvcStyle.IconStyles(/* icon properties */),\n    tooltipStyles = CardCvcStyle.TooltipStyles(/* tooltip properties */),\n    spacing = CardCvcStyle.SpacingStyles(/* spacing properties */)\n)\n\n// Other components follow the same logical grouping pattern\nDynamicCardImageStyle(\n    colors = DynamicCardImageStyle.ColorStyles(/* colour properties */),\n    textStyles = DynamicCardImageStyle.TextStyles(/* text properties */),\n    cvcStyles = DynamicCardImageStyle.CvcStyles(/* CVC-specific properties */),\n    effectStyles = DynamicCardImageStyle.EffectStyles(/* effect properties */)\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-styling-example","__idx":4},"children":["Basic styling example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here's how to apply basic styling to a card number component:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val cardNumberConfig = CardNumberComponentConfig(\n    label = \"Card number\",\n    placeholder = \"1234 5678 9012 3456\",\n    style = CardNumberStyle(\n        colors = CardNumberStyle.ColorStyles(\n            textColor = Color(0xFF1A1A1A),\n            backgroundColor = Color.White,\n            focusedContainerColor = Color.White,\n            unfocusedContainerColor = Color(0xFFF5F5F5),\n            borderColor = Color(0xFFE0E0E0),\n            focusedBorderColor = Color(0xFF2196F3),\n            errorColor = Color(0xFFD32F2F),\n            errorBorderColor = Color(0xFFD32F2F),\n            cursorColor = Color(0xFF2196F3)\n        ),\n        textStyles = CardNumberStyle.TextStyles(\n            textStyle = TextStyle(\n                fontSize = 16.sp,\n                fontWeight = FontWeight.Normal\n            ),\n            labelStyle = TextStyle(\n                fontSize = 14.sp,\n                fontWeight = FontWeight.Medium\n            )\n        ),\n        shapes = CardNumberStyle.ShapeStyles(\n            shape = RoundedCornerShape(8.dp)\n        )\n    ),\n    showValidIcon = true,\n    showInvalidIcon = true,\n    validIcon = R.drawable.custom_check_icon,\n    invalidIcon = R.drawable.custom_error_icon\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"visual-customisation-options","__idx":5},"children":["Visual customisation options"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"icons-and-visual-elements","__idx":6},"children":["Icons and visual elements"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Most components support customising visual elements to provide better user feedback and match your design system:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"CardNumberComponentConfig(\n    // Validation icons\n    showValidIcon = true,\n    validIcon = R.drawable.ic_check_custom,\n    showInvalidIcon = true, \n    invalidIcon = R.drawable.ic_error_custom,\n    \n    // Card brand icon\n    showTrailingIcon = true,\n    useTransparentCardBrandImage = false,\n    \n    // Hint icon\n    showHintIcon = true,\n    hintIcon = R.drawable.ic_card_hint\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"cvc-component-customisation","__idx":7},"children":["CVC component customisation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The CVC component offers comprehensive customisation options for security code input:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"CardCvcComponentConfig(\n    // Labels and text\n    label = \"Security code\",\n    placeholder = \"123\",\n    guideText = \"3-4 digit code on your card\",\n    \n    // Visual elements\n    showTooltip = true,\n    showMaskToggle = true,\n    applyMask = false,\n    \n    // Icons\n    validIcon = R.drawable.ic_check,\n    invalidIcon = R.drawable.ic_error,\n    visibilityOnIcon = R.drawable.ic_visibility,\n    visibilityOffIcon = R.drawable.ic_visibility_off,\n    \n    // Comprehensive styling\n    style = CardCvcStyle(\n        colors = CardCvcStyle.ColorStyles(\n            textColor = Color(0xFF1A1A1A),\n            focusedContainerColor = Color.White,\n            unfocusedContainerColor = Color(0xFFF8F9FA),\n            backgroundColor = Color.White,\n            borderColor = Color(0xFFE1E5E9),\n            focusedBorderColor = Color(0xFF4285F4),\n            errorColor = Color(0xFFE53E3E),\n            cursorColor = Color(0xFF4285F4),\n            labelColor = Color(0xFF374151),\n            placeholderColor = Color(0xFF9CA3AF),\n            iconColor = Color(0xFF6B7280),\n            hintColor = Color(0xFF6B7280),\n            guideTextColor = Color(0xFF6B7280)\n        ),\n        textStyles = CardCvcStyle.TextStyles(\n            textStyle = TextStyle(\n                fontSize = 16.sp,\n                fontWeight = FontWeight.Normal,\n                lineHeight = 24.sp\n            ),\n            labelStyle = TextStyle(\n                fontSize = 14.sp,\n                fontWeight = FontWeight.Medium,\n                lineHeight = 20.sp\n            ),\n            errorStyle = TextStyle(\n                fontSize = 12.sp,\n                fontWeight = FontWeight.Normal,\n                lineHeight = 16.sp\n            ),\n            guideTextStyle = TextStyle(\n                fontSize = 12.sp,\n                fontWeight = FontWeight.Normal,\n                lineHeight = 16.sp\n            )\n        ),\n        dimensions = CardCvcStyle.DimensionStyles(\n            shape = RoundedCornerShape(8.dp)\n        )\n    ),\n    \n    // Tooltip configuration\n    tooltipData = TooltipData(\n        useAdvancedTooltip = true,\n        tooltipEntries = listOf(\n            CardTooltipData(\n                text = \"Find your security code on the back of your card\",\n                highlightedText = \"security code\",\n                cardImageRes = R.drawable.custom_card_back\n            )\n        )\n    )\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"label-and-text-customisation","__idx":8},"children":["Label and text customisation"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"field-labels","__idx":9},"children":["Field labels"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customise labels and placeholder text to match your application's language and tone:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"CardNumberComponentConfig(\n    label = \"Card number\",\n    placeholder = \"Enter your card number\",\n    displayRequiredIcon = true\n)\n\nCardExpiryDateComponentConfig(\n    label = \"Expiry date\",\n    placeholder = \"MM/YY\"\n)\n\nCardCvcComponentConfig(\n    label = \"Security code\",\n    placeholder = \"123\",\n    guideText = \"3-4 digit code on your card\"\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"validation-messages","__idx":10},"children":["Validation messages"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"CardNumberValidations(\n    required = \"Please enter your card number\",\n    invalid = \"Please enter a valid card number\",\n    tooShort = \"Card number is too short\",\n    typeNotRecognized = \"Card type not recognised\",\n    typeNotSupported = \"This card type is not supported\",\n    luhnFailed = \"Please check your card number\"\n)\n\nCardCvcValidations(\n    required = \"Security code is required\",\n    invalid = \"Invalid security code\",\n    tooShort = \"Security code is too short\",\n    tooLong = \"Security code is too long\"\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"component-integration-styling","__idx":11},"children":["Component integration styling"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"tooltip-customisation","__idx":12},"children":["Tooltip customisation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create helpful tooltips to guide users through the payment process:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"TooltipData(\n    useAdvancedTooltip = true,\n    tooltipEntries = listOf(\n        CardTooltipData(\n            text = \"Your card number is the 16-digit number on the front of your card\",\n            highlightedText = \"16-digit number\",\n            cardImageRes = R.drawable.card_front_highlight\n        ),\n        CardTooltipData(\n            text = \"Some cards may have 15 digits\",\n            highlightedText = \"15 digits\", \n            cardImageRes = R.drawable.card_amex_front\n        )\n    )\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"compose-integration","__idx":13},"children":["Compose integration"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"using-material-theme","__idx":14},"children":["Using Material Theme"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Components integrate seamlessly with your existing Material Theme configuration:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"@Composable\nfun PaymentScreen() {\n    MaterialTheme {\n        Column(\n            modifier = Modifier\n                .fillMaxSize()\n                .padding(16.dp)\n        ) {\n            // Components inherit theme colours and typography\n            pxpCheckout.buildComponentView(\n                component = cardNumberComponent,\n                modifier = Modifier.fillMaxWidth()\n            )\n        }\n    }\n}\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-component-wrapper","__idx":15},"children":["Custom component wrapper"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create reusable wrapper components to add consistent styling across your payment form:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"@Composable\nfun StyledPaymentField(\n    component: Component<*>,\n    label: String,\n    modifier: Modifier = Modifier\n) {\n    Card(\n        modifier = modifier,\n        colors = CardDefaults.cardColors(\n            containerColor = MaterialTheme.colorScheme.surfaceVariant\n        ),\n        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)\n    ) {\n        Column(\n            modifier = Modifier.padding(16.dp)\n        ) {\n            Text(\n                text = label,\n                style = MaterialTheme.typography.labelMedium,\n                color = MaterialTheme.colorScheme.onSurfaceVariant,\n                modifier = Modifier.padding(bottom = 8.dp)\n            )\n            \n            pxpCheckout.buildComponentView(\n                component = component,\n                modifier = Modifier.fillMaxWidth()\n            )\n        }\n    }\n}\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-layout","__idx":16},"children":["Custom layout"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create custom layouts that arrange multiple components for optimal user experience:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"@Composable\nfun CustomPaymentForm() {\n    LazyColumn(\n        modifier = Modifier.fillMaxSize(),\n        contentPadding = PaddingValues(16.dp),\n        verticalArrangement = Arrangement.spacedBy(16.dp)\n    ) {\n        item {\n            StyledPaymentField(\n                component = cardNumberComponent,\n                label = \"Card Information\"\n            )\n        }\n        \n        item {\n            Row(\n                modifier = Modifier.fillMaxWidth(),\n                horizontalArrangement = Arrangement.spacedBy(12.dp)\n            ) {\n                StyledPaymentField(\n                    component = expiryComponent,\n                    label = \"Expiry\",\n                    modifier = Modifier.weight(1f)\n                )\n                \n                StyledPaymentField(\n                    component = cvcComponent,\n                    label = \"CVC\",\n                    modifier = Modifier.weight(1f)\n                )\n            }\n        }\n        \n        item {\n            pxpCheckout.buildComponentView(\n                component = submitComponent,\n                modifier = Modifier.fillMaxWidth()\n            )\n        }\n    }\n}\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"accessibility-customisation","__idx":17},"children":["Accessibility customisation"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"content-descriptions","__idx":18},"children":["Content descriptions"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Components automatically generate appropriate accessibility labels, but you can enhance them with additional context:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"CardNumberComponentConfig(\n    label = \"Card number\",\n    // Components automatically generate accessibility labels\n    // You can enhance with additional context if needed\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"focus-order","__idx":19},"children":["Focus order"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Define logical focus order to help users navigate your payment form efficiently:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"CardNumberComponentConfig(\n    focusOrder = 1\n)\n\nCardExpiryDateComponentConfig(\n    focusOrder = 2  \n)\n\nCardCvcComponentConfig(\n    focusOrder = 3\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-design","__idx":20},"children":["Responsive design"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"screen-size-adaptation","__idx":21},"children":["Screen size adaptation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Adapt your payment form layout for different screen sizes to optimise the user experience:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"@Composable\nfun ResponsivePaymentForm() {\n    val configuration = LocalConfiguration.current\n    val screenWidth = configuration.screenWidthDp.dp\n    \n    if (screenWidth > 600.dp) {\n        // Tablet layout - side by side\n        Row(\n            modifier = Modifier.fillMaxWidth(),\n            horizontalArrangement = Arrangement.spacedBy(16.dp)\n        ) {\n            pxpCheckout.buildComponentView(\n                component = cardNumberComponent,\n                modifier = Modifier.weight(2f)\n            )\n            pxpCheckout.buildComponentView(\n                component = expiryComponent,\n                modifier = Modifier.weight(1f)\n            )\n            pxpCheckout.buildComponentView(\n                component = cvcComponent,\n                modifier = Modifier.weight(1f)\n            )\n        }\n    } else {\n        // Phone layout - stacked\n        Column(\n            verticalArrangement = Arrangement.spacedBy(16.dp)\n        ) {\n            pxpCheckout.buildComponentView(\n                component = cardNumberComponent,\n                modifier = Modifier.fillMaxWidth()\n            )\n            Row(\n                horizontalArrangement = Arrangement.spacedBy(12.dp)\n            ) {\n                pxpCheckout.buildComponentView(\n                    component = expiryComponent,\n                    modifier = Modifier.weight(1f)\n                )\n                pxpCheckout.buildComponentView(\n                    component = cvcComponent,\n                    modifier = Modifier.weight(1f)\n                )\n            }\n        }\n    }\n}\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"dark-theme-support","__idx":22},"children":["Dark theme support"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Components automatically adapt to system theme preferences for better user experience:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"@Composable\nfun ThemedPaymentScreen() {\n    MaterialTheme(\n        colorScheme = if (isSystemInDarkTheme()) {\n            darkColorScheme()\n        } else {\n            lightColorScheme()\n        }\n    ) {\n        PaymentForm()\n    }\n}\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"animation-and-transitions","__idx":23},"children":["Animation and transitions"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"state-changes","__idx":24},"children":["State changes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create smooth animations when component states change to provide clear visual feedback:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"@Composable\nfun AnimatedPaymentField(component: Component<*>) {\n    val isValid by component.state.collectAsState()\n    \n    val borderColor by animateColorAsState(\n        targetValue = if (isValid.isValid) {\n            MaterialTheme.colorScheme.primary\n        } else {\n            MaterialTheme.colorScheme.error\n        }\n    )\n    \n    Card(\n        modifier = Modifier.fillMaxWidth(),\n        border = BorderStroke(2.dp, borderColor)\n    ) {\n        pxpCheckout.buildComponentView(\n            component = component,\n            modifier = Modifier\n                .fillMaxWidth()\n                .padding(16.dp)\n        )\n    }\n}\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"advanced-styling-patterns","__idx":25},"children":["Advanced styling patterns"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"creating-a-consistent-design-system","__idx":26},"children":["Creating a consistent design system"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use consistent styling across multiple components to create a cohesive design system:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"// Define common style values\nobject PaymentTheme {\n    object Colors {\n        val primary = Color(0xFF2563EB)\n        val surface = Color.White\n        val surfaceVariant = Color(0xFFF8FAFC)\n        val outline = Color(0xFFE2E8F0)\n        val error = Color(0xFFDC2626)\n        val onSurface = Color(0xFF1E293B)\n        val onSurfaceVariant = Color(0xFF64748B)\n    }\n    \n    object Typography {\n        val fieldInput = TextStyle(\n            fontSize = 16.sp,\n            fontWeight = FontWeight.Normal,\n            lineHeight = 24.sp\n        )\n        val fieldLabel = TextStyle(\n            fontSize = 14.sp,\n            fontWeight = FontWeight.Medium,\n            lineHeight = 20.sp\n        )\n    }\n    \n    val fieldShape = RoundedCornerShape(8.dp)\n}\n\n// Apply consistent styling to card number component\nval cardNumberConfig = CardNumberComponentConfig(\n    style = CardNumberStyle(\n        colors = CardNumberStyle.ColorStyles(\n            textColor = PaymentTheme.Colors.onSurface,\n            unfocusedContainerColor = PaymentTheme.Colors.surfaceVariant,\n            focusedContainerColor = PaymentTheme.Colors.surface,\n            borderColor = PaymentTheme.Colors.outline,\n            focusedBorderColor = PaymentTheme.Colors.primary,\n            errorBorderColor = PaymentTheme.Colors.error,\n            cursorColor = PaymentTheme.Colors.primary\n        ),\n        textStyles = CardNumberStyle.TextStyles(\n            textStyle = PaymentTheme.Typography.fieldInput,\n            labelStyle = PaymentTheme.Typography.fieldLabel\n        ),\n        shapes = CardNumberStyle.ShapeStyles(\n            shape = PaymentTheme.fieldShape\n        )\n    )\n)\n\n// Apply the same design system to CVC component\nval cardCvcConfig = CardCvcComponentConfig(\n    style = CardCvcStyle(\n        colors = CardCvcStyle.ColorStyles(\n            textColor = PaymentTheme.Colors.onSurface,\n            unfocusedContainerColor = PaymentTheme.Colors.surfaceVariant,\n            focusedContainerColor = PaymentTheme.Colors.surface,\n            borderColor = PaymentTheme.Colors.outline,\n            focusedBorderColor = PaymentTheme.Colors.primary,\n            errorColor = PaymentTheme.Colors.error,\n            cursorColor = PaymentTheme.Colors.primary,\n            labelColor = PaymentTheme.Colors.onSurface,\n            placeholderColor = PaymentTheme.Colors.onSurfaceVariant\n        ),\n        textStyles = CardCvcStyle.TextStyles(\n            textStyle = PaymentTheme.Typography.fieldInput,\n            labelStyle = PaymentTheme.Typography.fieldLabel\n        ),\n        dimensions = CardCvcStyle.DimensionStyles(\n            shape = PaymentTheme.fieldShape\n        )\n    )\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"complete-customisation-example","__idx":27},"children":["Complete customisation example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here's a comprehensive example that includes advanced customisation techniques:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"@Composable\nfun CompleteCustomPaymentForm() {\n    val backgroundColor = MaterialTheme.colorScheme.surface\n    val primaryColor = MaterialTheme.colorScheme.primary\n    \n    Card(\n        modifier = Modifier\n            .fillMaxWidth()\n            .padding(16.dp),\n        colors = CardDefaults.cardColors(\n            containerColor = backgroundColor\n        ),\n        elevation = CardDefaults.cardElevation(defaultElevation = 8.dp)\n    ) {\n        Column(\n            modifier = Modifier.padding(24.dp),\n            verticalArrangement = Arrangement.spacedBy(20.dp)\n        ) {\n            Text(\n                text = \"Payment Details\",\n                style = MaterialTheme.typography.headlineSmall,\n                color = primaryColor,\n                fontWeight = FontWeight.Bold\n            )\n            \n            // Card number with custom wrapper\n            CustomFieldWrapper(\n                label = \"Card number\",\n                icon = Icons.Default.CreditCard\n            ) {\n                pxpCheckout.buildComponentView(\n                    component = cardNumberComponent,\n                    modifier = Modifier.fillMaxWidth()\n                )\n            }\n            \n            // Row for expiry and CVC\n            Row(\n                modifier = Modifier.fillMaxWidth(),\n                horizontalArrangement = Arrangement.spacedBy(16.dp)\n            ) {\n                CustomFieldWrapper(\n                    label = \"Expiry date\",\n                    icon = Icons.Default.CalendarToday,\n                    modifier = Modifier.weight(1f)\n                ) {\n                    pxpCheckout.buildComponentView(\n                        component = expiryComponent,\n                        modifier = Modifier.fillMaxWidth()\n                    )\n                }\n                \n                CustomFieldWrapper(\n                    label = \"Security code\",\n                    icon = Icons.Default.Security,\n                    modifier = Modifier.weight(1f)\n                ) {\n                    pxpCheckout.buildComponentView(\n                        component = cvcComponent,\n                        modifier = Modifier.fillMaxWidth()\n                    )\n                }\n            }\n            \n            // Submit button\n            pxpCheckout.buildComponentView(\n                component = submitComponent,\n                modifier = Modifier.fillMaxWidth()\n            )\n        }\n    }\n}\n\n@Composable\nfun CustomFieldWrapper(\n    label: String,\n    icon: ImageVector,\n    modifier: Modifier = Modifier,\n    content: @Composable () -> Unit\n) {\n    Column(modifier = modifier) {\n        Row(\n            verticalAlignment = Alignment.CenterVertically,\n            modifier = Modifier.padding(bottom = 8.dp)\n        ) {\n            Icon(\n                imageVector = icon,\n                contentDescription = null,\n                tint = MaterialTheme.colorScheme.primary,\n                modifier = Modifier.size(16.dp)\n            )\n            Spacer(modifier = Modifier.width(8.dp))\n            Text(\n                text = label,\n                style = MaterialTheme.typography.labelMedium,\n                color = MaterialTheme.colorScheme.onSurface\n            )\n        }\n        content()\n    }\n}\n","lang":"kotlin"},"children":[]}]},"headings":[{"value":"About customisation","id":"about-customisation","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Styling architecture","id":"styling-architecture","depth":2},{"value":"Component-specific styles","id":"component-specific-styles","depth":3},{"value":"Basic styling example","id":"basic-styling-example","depth":3},{"value":"Visual customisation options","id":"visual-customisation-options","depth":2},{"value":"Icons and visual elements","id":"icons-and-visual-elements","depth":3},{"value":"CVC component customisation","id":"cvc-component-customisation","depth":3},{"value":"Label and text customisation","id":"label-and-text-customisation","depth":2},{"value":"Field labels","id":"field-labels","depth":3},{"value":"Validation messages","id":"validation-messages","depth":3},{"value":"Component integration styling","id":"component-integration-styling","depth":2},{"value":"Tooltip customisation","id":"tooltip-customisation","depth":3},{"value":"Compose integration","id":"compose-integration","depth":2},{"value":"Using Material Theme","id":"using-material-theme","depth":3},{"value":"Custom component wrapper","id":"custom-component-wrapper","depth":3},{"value":"Custom layout","id":"custom-layout","depth":3},{"value":"Accessibility customisation","id":"accessibility-customisation","depth":2},{"value":"Content descriptions","id":"content-descriptions","depth":3},{"value":"Focus order","id":"focus-order","depth":3},{"value":"Responsive design","id":"responsive-design","depth":2},{"value":"Screen size adaptation","id":"screen-size-adaptation","depth":3},{"value":"Dark theme support","id":"dark-theme-support","depth":2},{"value":"Animation and transitions","id":"animation-and-transitions","depth":2},{"value":"State changes","id":"state-changes","depth":3},{"value":"Advanced styling patterns","id":"advanced-styling-patterns","depth":2},{"value":"Creating a consistent design system","id":"creating-a-consistent-design-system","depth":3},{"value":"Complete customisation example","id":"complete-customisation-example","depth":2}],"frontmatter":{"seo":{"title":"About customisation"}},"lastModified":"2026-03-30T13:07:15.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/android/card/about-customisation","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}