{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","admonition"]},"type":"markdown"},"seo":{"title":"About configuration","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-configuration","__idx":0},"children":["About configuration"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn how to configure card components for iOS."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The PXP Checkout iOS SDK provides a suite of configurable components for integrating card payments into your iOS application. Each component is built with SwiftUI and offers comprehensive configuration options for styling, behaviour, and event handling."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuration-structure","__idx":2},"children":["Configuration structure"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All card components follow a consistent configuration pattern:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let componentConfig = ComponentConfig(\n    // Required properties\n    label: \"Label text\",\n    \n    // Optional properties\n    placeholder: \"Placeholder text\",\n    \n    // Styling\n    inputStyles: FieldInputStateStyles(\n        base: FieldInputStyle(/* style properties */)\n    ),\n    \n    // Event handlers\n    onChange: {\n        // Handle change\n    }\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-configuration","__idx":3},"children":["Basic configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["At minimum, each component requires a few essential properties:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// Card number field\nlet cardNumberConfig = CardNumberComponentConfig(\n    label: \"Card number\"\n)\n\n// Card expiry field\nlet expiryConfig = CardExpiryDateComponentConfig(\n    label: \"Expiry date\"\n)\n\n// CVC field\nlet cvcConfig = CardCvcComponentConfig(\n    label: \"CVC\"\n)\n\n// Submit button\nvar submitConfig = CardSubmitComponentConfig()\nsubmitConfig.onPreAuthorisation = { _ async in TransactionInitiationData() }\nsubmitConfig.onPostAuthorisation = { _ in }\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"advanced-configuration","__idx":4},"children":["Advanced configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more complex implementations, you can configure styling, validation, and callbacks:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var cardNumberConfig = CardNumberComponentConfig(\n    // Required configuration\n    label: \"Card number\",\n    placeholder: \"1234 5678 9012 3456\",\n    \n    // Validation\n    acceptedCardBrands: [.visa, .mastercard, .amex],\n    validations: CardNumberValidationResource(\n        CN01: \"Enter a card number\",\n        CN02: \"Use digits only\",\n        CN03: \"Card number looks too short\",\n        CN04: \"We could not recognise this card type\",\n        CN05: \"This card type is not accepted\",\n        CN06: \"Check the number and try again\",\n        CN07: \"%@ not accepted\",\n        CN08: \"Could not determine card type\"\n    ),\n    \n    // Styling\n    inputStyles: FieldInputStateStyles(\n        base: FieldInputStyle(\n            fontSize: 16,\n            borderWidth: 1,\n            borderColor: Color(.separator),\n            cornerRadius: 8\n        ),\n        active: FieldInputStyle(\n            borderColor: .accentColor,\n            borderWidth: 2\n        )\n    ),\n    \n    // Event handlers\n    onChange: {\n        print(\"Card number changed\")\n    },\n    onValidationPassed: { _ in\n        print(\"Card number is valid\")\n    }\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling-components","__idx":5},"children":["Styling components"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-styling","__idx":6},"children":["Default styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All components come with SwiftUI default styling:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Card fields:"]}," Standard text fields with system colours and spacing"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Submit button:"]}," Primary style with standard corner radius"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Consent checkbox:"]}," System checkbox with standard dimensions"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Billing address:"]}," Clean layout with consistent field styling"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-styling","__idx":7},"children":["Custom styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Each component offers comprehensive styling options:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Colours:"]}," Customise backgrounds, text, borders, and state colours."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Typography:"]}," Control font sizes, weights, and text styles."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Layout:"]}," Configure spacing, padding, dimensions, and positioning."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Shapes:"]}," Adjust corner radius and border styles."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let customFieldStyle = FieldInputStateStyles(\n    base: FieldInputStyle(\n        backgroundColor: .white,\n        color: Color(.label),\n        fontSize: 16,\n        fontWeight: .regular,\n        borderWidth: 1,\n        borderColor: Color(.separator),\n        cornerRadius: 8,\n        padding: EdgeInsets(top: 12, leading: 12, bottom: 12, trailing: 12)\n    ),\n    active: FieldInputStyle(\n        borderColor: .accentColor,\n        borderWidth: 2\n    ),\n    invalid: FieldInputStyle(\n        borderColor: .red,\n        borderWidth: 2\n    ),\n    valid: FieldInputStyle(\n        borderColor: .green,\n        borderWidth: 1\n    )\n)\n\nvar cardNumberConfig = CardNumberComponentConfig(\n    label: \"Card number\",\n    inputStyles: customFieldStyle\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"event-handling","__idx":8},"children":["Event handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All components provide event handlers for user interactions and lifecycle events."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Common event patterns:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Field lifecycle:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onChange"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onFocus"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onBlur"]}," for field interactions"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Validation:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onValidationPassed"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onValidationFailed"]}," for validation events"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Payment flow:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreAuthorisation"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostAuthorisation"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onSubmitError"]}," for payments"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["3DS authentication:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreAuthentication"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostAuthentication"]}," for 3DS flows"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var submitConfig = CardSubmitComponentConfig()\n\n// Payment success handling\nsubmitConfig.onPostAuthorisation = { result in\n    switch result {\n    case is AuthorisedSubmitResult:\n        navigateToSuccessScreen()\n    case let refused as RefusedSubmitResult:\n        showRefusalMessage(refused.stateData?.message)\n    case let failed as FailedSubmitResult:\n        showErrorDialog(failed.errorReason ?? \"Unknown error\")\n    default:\n        break\n    }\n}\n\n// Error handling\nsubmitConfig.onSubmitError = { error in\n    print(\"Payment error: \\(error.errorMessage)\")\n    showErrorDialog(error.errorMessage)\n}\n\n// Start handling\nsubmitConfig.onStartSubmit = {\n    showLoadingIndicator()\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"component-linking","__idx":9},"children":["Component linking"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Components can be linked together for coordinated behaviour."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"linking-fields-with-submit","__idx":10},"children":["Linking fields with submit"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// Create card fields first\nlet cardNumber = try pxpCheckout.create(\n    .cardNumber,\n    componentConfig: CardNumberComponentConfig(label: \"Card number\")\n) as! CardNumberComponent\n\nlet cardExpiry = try pxpCheckout.create(\n    .cardExpiryDate,\n    componentConfig: CardExpiryDateComponentConfig(label: \"Expiry\")\n) as! CardExpiryDateComponent\n\nlet cardCvc = try pxpCheckout.create(\n    .cardCvc,\n    componentConfig: CardCvcComponentConfig(label: \"CVC\")\n) as! CardCvcComponent\n\n// Link to submit component\nvar submitConfig = CardSubmitComponentConfig()\nsubmitConfig.cardNumberComponent = cardNumber\nsubmitConfig.cardExpiryDateComponent = cardExpiry\nsubmitConfig.cardCvcComponent = cardCvc\nsubmitConfig.onPreAuthorisation = { _ async in TransactionInitiationData() }\nsubmitConfig.onPostAuthorisation = { _ in }\n\nlet submit = try pxpCheckout.create(.cardSubmit, componentConfig: submitConfig) as! CardSubmitComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"linking-billing-address-with-submit","__idx":11},"children":["Linking billing address with submit"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// Create billing address first\nlet billing = try pxpCheckout.create(\n    .billingAddress,\n    componentConfig: BillingAddressComponentConfig()\n) as! BillingAddressComponent\n\n// Link to submit for AVS\nvar submitConfig = CardSubmitComponentConfig()\nsubmitConfig.avsRequest = true\nsubmitConfig.billingAddressComponents = BillingAddressComponents(\n    billingAddressComponent: billing\n)\nsubmitConfig.onPreAuthorisation = { _ async in TransactionInitiationData() }\nsubmitConfig.onPostAuthorisation = { _ in }\n\nlet submit = try pxpCheckout.create(.cardSubmit, componentConfig: submitConfig) as! CardSubmitComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"linking-dynamic-card-image-with-new-card","__idx":12},"children":["Linking dynamic card image with new card"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// Create dynamic card image first\nlet dynamicCardImage = try pxpCheckout.create(\n    .dynamicCardImage,\n    componentConfig: DynamicCardImageComponentConfig()\n) as! DynamicCardImageComponent\n\n// Link to new card component\nvar submitConfig = CardSubmitComponentConfig()\nsubmitConfig.onPreAuthorisation = { _ async in TransactionInitiationData() }\nsubmitConfig.onPostAuthorisation = { _ in }\n\nlet newCardConfig = NewCardComponentConfig(\n    dynamicCardImageComponent: dynamicCardImage,\n    submit: submitConfig\n)\n\nlet newCard = try pxpCheckout.create(.newCard, componentConfig: newCardConfig) as! NewCardComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices","__idx":13},"children":["Best practices"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"use-appropriate-components","__idx":14},"children":["Use appropriate components"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Choose the right component for your use case:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Simple new card payment:"]}," Use the new card component."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Custom field layout:"]}," Use standalone card fields with submit."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Saved card payment:"]}," Use the card-on-file component."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Quick checkout:"]}," Use click-once for returning customers."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"configure-for-your-brand","__idx":15},"children":["Configure for your brand"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customise the styling to match your app's design:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// Define brand styling\nstruct BrandStyle {\n    static let cornerRadius: CGFloat = 12\n    static let borderWidth: CGFloat = 1\n    static let spacing: CGFloat = 16\n    \n    static let fieldStyle = FieldInputStateStyles(\n        base: FieldInputStyle(\n            borderWidth: borderWidth,\n            borderColor: Color(.separator),\n            cornerRadius: 8\n        ),\n        active: FieldInputStyle(\n            borderColor: .accentColor,\n            borderWidth: 2\n        )\n    )\n}\n\n// Apply to components\nvar newCardConfig = NewCardComponentConfig(\n    styles: ContainerStyle(\n        cornerRadius: BrandStyle.cornerRadius,\n        padding: EdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16),\n        spacing: BrandStyle.spacing\n    ),\n    inputStyles: BrandStyle.fieldStyle,\n    submit: submitConfig\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"handle-all-events","__idx":16},"children":["Handle all events"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implement comprehensive event handling:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var submitConfig = CardSubmitComponentConfig()\n\n// Required callbacks\nsubmitConfig.onPreAuthorisation = { _ async in\n    TransactionInitiationData()\n}\n\nsubmitConfig.onPostAuthorisation = { result in\n    handlePaymentResult(result)\n}\n\n// Error handling\nsubmitConfig.onSubmitError = { error in\n    handlePaymentError(error)\n}\n\n// Optional callbacks\nsubmitConfig.onStartSubmit = {\n    showLoading()\n}\n\nsubmitConfig.onPostTokenisation = { result in\n    if let success = result as? CardTokenizationResultSuccess {\n        saveTokenForFutureUse(success.gatewayTokenId)\n    }\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information about events, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/events"},"children":["Events"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"validate-user-input","__idx":17},"children":["Validate user input"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure validation for a better user experience:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var cardNumberConfig = CardNumberComponentConfig(\n    label: \"Card number\",\n    validationOnChange: true,\n    onValidationPassed: { _ in\n        print(\"Card number is valid\")\n    },\n    onValidationFailed: { _ in\n        print(\"Card number is invalid\")\n    }\n)\n\nvar submitConfig = CardSubmitComponentConfig()\nsubmitConfig.disableUntilValidated = true\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"test-different-scenarios","__idx":18},"children":["Test different scenarios"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Test your components in various conditions:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Light and dark mode"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Different screen sizes and orientations"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Various card brands and types"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["3DS and non-3DS flows"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Error conditions and network failures"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Accessibility features like VoiceOver and Dynamic Type"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuration-layers","__idx":19},"children":["Configuration layers"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"checkout-level-configuration","__idx":20},"children":["Checkout-level configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Global settings like environment, session, and merchant identity are configured once at initialisation:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let checkoutConfig = CheckoutConfig(\n    environment: .test,\n    session: sessionData,\n    transactionData: transactionData,\n    merchantShopperId: \"shopper-id\",\n    ownerId: \"owner-id\",\n    onGetShopper: { async in\n        TransactionShopper(id: \"shopper-id\")\n    },\n    onGetShippingAddress: { async in\n        ShippingAddress(\n            countryCode: \"GB\",\n            postalCode: \"SW1A 1AA\",\n            address: \"10 Downing Street\"\n        )\n    },\n    analyticsEvent: { event in\n        trackAnalytics(event)\n    }\n)\n\nlet pxpCheckout = try PxpCheckout.initialize(config: checkoutConfig)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"component-level-configuration","__idx":21},"children":["Component-level configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Each component has its own configuration type with specific properties:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// Field component configuration\nlet cardNumberConfig = CardNumberComponentConfig(\n    label: \"Card number\",\n    placeholder: \"1234 5678 9012 3456\",\n    acceptedCardBrands: [.visa, .mastercard],\n    inputStyles: fieldStyle\n)\n\n// Submit component configuration\nvar submitConfig = CardSubmitComponentConfig()\nsubmitConfig.styles = buttonStyle\nsubmitConfig.onPreAuthorisation = { _ async in TransactionInitiationData() }\nsubmitConfig.onPostAuthorisation = { _ in }\n\n// Composite component configuration\nlet newCardConfig = NewCardComponentConfig(\n    styles: containerStyle,\n    inputStyles: fieldStyle,\n    fields: NewCardComponentFields(\n        cardNumber: cardNumberConfig\n    ),\n    submit: submitConfig\n)\n","lang":"swift"},"children":[]}]},"headings":[{"value":"About configuration","id":"about-configuration","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Configuration structure","id":"configuration-structure","depth":2},{"value":"Basic configuration","id":"basic-configuration","depth":3},{"value":"Advanced configuration","id":"advanced-configuration","depth":3},{"value":"Styling components","id":"styling-components","depth":2},{"value":"Default styling","id":"default-styling","depth":3},{"value":"Custom styling","id":"custom-styling","depth":3},{"value":"Event handling","id":"event-handling","depth":2},{"value":"Component linking","id":"component-linking","depth":2},{"value":"Linking fields with submit","id":"linking-fields-with-submit","depth":3},{"value":"Linking billing address with submit","id":"linking-billing-address-with-submit","depth":3},{"value":"Linking dynamic card image with new card","id":"linking-dynamic-card-image-with-new-card","depth":3},{"value":"Best practices","id":"best-practices","depth":2},{"value":"Use appropriate components","id":"use-appropriate-components","depth":3},{"value":"Configure for your brand","id":"configure-for-your-brand","depth":3},{"value":"Handle all events","id":"handle-all-events","depth":3},{"value":"Validate user input","id":"validate-user-input","depth":3},{"value":"Test different scenarios","id":"test-different-scenarios","depth":3},{"value":"Configuration layers","id":"configuration-layers","depth":2},{"value":"Checkout-level configuration","id":"checkout-level-configuration","depth":3},{"value":"Component-level configuration","id":"component-level-configuration","depth":3}],"frontmatter":{"seo":{"title":"About configuration"}},"lastModified":"2026-06-12T11:56:36.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/ios/card/about-configuration","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}