{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","admonition","br","details","required"]},"type":"markdown"},"seo":{"title":"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":"customisation","__idx":0},"children":["Customisation"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn about customisation options for the Apple Pay component for iOS applications."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Apple Pay component comes with responsive and accessible default styling that follows Apple's design guidelines, but is designed to be customisable to match your brand and application requirements."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can find Apple's official recommendations around button styling in their ",{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"https://developer.apple.com/documentation/passkit/pkpaymentbutton"},"children":["PKPaymentButton documentation"]}," and ",{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"https://developer.apple.com/documentation/passkit"},"children":["PassKit framework reference"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"default-styling","__idx":2},"children":["Default styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The default implementation uses Apple's native ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PKPaymentButton"]}," component with the iOS SDK:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = ApplePayButtonComponentConfig()\n\n// Basic styling configuration\nconfig.buttonType = .buy\nconfig.buttonStyle = .black\nconfig.buttonRadius = 4.0\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-button-types","__idx":3},"children":["Default button types"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Use case"},"children":["Use case"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".plain"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Apple Pay logo only."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Minimal interfaces"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Custom layouts"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".buy"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Standard purchase button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["E-commerce"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Retail"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".setUp"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Setup button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Account setup"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Configuration"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".inStore"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["In-store payment button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Point of sale"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Retail locations"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".donate"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Donation button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Charities"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Crowdfunding"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".checkout"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Checkout button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Shopping cart"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Final payment"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".book"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Booking button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Travel"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Reservations"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".subscribe"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Subscribe button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Newsletters"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Services"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".reload"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Reload button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Gift cards"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Prepaid"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".addMoney"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Add money button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Wallet top-up"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Account credits"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".topUp"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Top-up button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Prepaid"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Credits"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".order"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Order button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Food delivery"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Services"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".rent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Rent button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Rentals"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Subscriptions"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".support"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Support button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Support"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Help"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".contribute"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Contribution button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Subscriptions"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Memberships"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".tip"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Tip button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Gratuities"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Tips"]}]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-button-styles","__idx":4},"children":["Default button styles"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Style"},"children":["Style"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".black"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black background with white text."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".white"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["White background with black text."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".whiteOutline"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["White background with a black border and text."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".automatic"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Adapts to the system's appearance (iOS 13+)."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"custom-styling-implementation","__idx":5},"children":["Custom styling implementation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When you need more control over the button appearance, you can customise various properties:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = ApplePayButtonComponentConfig()\n\n// Button appearance customisation\nconfig.buttonType = .buy\nconfig.buttonStyle = .black\nconfig.buttonRadius = 8.0\n\n// Optional: Custom SwiftUI content for advanced customisation\nconfig.customContent = {\n    return AnyView(\n        HStack(spacing: 8) {\n            Image(systemName: \"applelogo\")\n                .foregroundColor(.white)\n            Text(\"Buy with Apple Pay\")\n                .foregroundColor(.white)\n                .fontWeight(.semibold)\n        }\n        .frame(maxWidth: .infinity, minHeight: 50)\n        .background(\n            LinearGradient(\n                gradient: Gradient(colors: [Color.black, Color.gray]),\n                startPoint: .leading,\n                endPoint: .trailing\n            )\n        )\n        .cornerRadius(8)\n    )\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuration-options","__idx":6},"children":["Configuration options"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Apple Pay component accepts the main configuration class that controls its appearance and behaviour."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"applepaybuttoncomponentconfig","__idx":7},"children":["ApplePayButtonComponentConfig"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// Definition\nclass ApplePayButtonComponentConfig: BaseComponentConfig {\n    // Basic payment configuration\n    var merchantDisplayName: String\n    var paymentDescription: String\n    var currencyCode: String\n    var countryCode: String\n    var supportedNetworks: [PaymentNetwork]\n    var merchantCapabilities: [MerchantCapability]\n    \n    // Button appearance\n    var buttonType: ApplePaymentButtonType = .plain\n    var buttonStyle: ApplePaymentButtonStyle = .black\n    var buttonRadius: CGFloat = 4.0\n    \n    // Payment items\n    var totalPaymentItem: ApplePayPaymentSummaryItem?\n    var paymentItems: [ApplePayPaymentSummaryItem]?\n    \n    // Contact fields\n    var requiredBillingContactFields: [ContactField]?\n    var requiredShippingContactFields: [ContactField]?\n    \n    // Shipping configuration\n    var shippingMethods: [ApplePayShippingMethod]?\n    var shippingType: ShippingType?\n    \n    // Advanced features\n    var recurringRequest: ApplePayRecurringPaymentRequest?\n    var deferredPaymentRequest: ApplePayDeferredPaymentRequest?\n    var automaticReloadPaymentRequest: ApplePayAutomaticReloadPaymentRequest?\n    \n    // Custom content\n    var customContent: (() -> AnyView)?\n    \n    // Consent component\n    weak var applePayConsentComponent: ApplePayConsentComponent?\n    \n    // Event handlers\n    var onPreAuthorisation: (() async -> ApplePayTransactionInitData?)?\n    var onPostAuthorisation: ((BaseSubmitResult) -> Void)?\n    var onShippingContactSelected: ((PKContact) async -> PKPaymentRequestShippingContactUpdate)?\n    var onShippingMethodSelected: ((PKShippingMethod) -> PKPaymentRequestShippingMethodUpdate)?\n    var onPaymentMethodSelected: ((PKPaymentMethod) -> PKPaymentRequestPaymentMethodUpdate)?\n    var onCouponCodeChanged: ((String) async -> PKPaymentRequestCouponCodeUpdate)?\n    var onError: ((Error) -> Void)?\n    var onCancel: ((Error?) -> Void)?\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example-configuration","__idx":8},"children":["Example configuration"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = ApplePayButtonComponentConfig()\n\n// Required fields\nconfig.merchantDisplayName = \"Acme Store\"\nconfig.paymentDescription = \"Product Purchase\"\nconfig.currencyCode = \"USD\"\nconfig.countryCode = \"US\"\nconfig.supportedNetworks = [.visa, .masterCard, .amex]\nconfig.merchantCapabilities = [.threeDSecure, .emv, .credit, .debit]\n\n// Payment items\nconfig.totalPaymentItem = ApplePayPaymentSummaryItem(\n    amount: 99.99,\n    label: \"Total\",\n    type: .final\n)\n\nconfig.paymentItems = [\n    ApplePayPaymentSummaryItem(amount: 89.99, label: \"Product\", type: .final),\n    ApplePayPaymentSummaryItem(amount: 10.00, label: \"Tax\", type: .final)\n]\n\n// Button styling\nconfig.buttonType = .buy\nconfig.buttonStyle = .black\nconfig.buttonRadius = 8.0\n\n// Contact fields\nconfig.requiredBillingContactFields = [.postalAddress, .name, .emailAddress]\n\n// Event handlers\nconfig.onPreAuthorisation = {\n    return ApplePayTransactionInitData(\n        riskScreeningData: RiskScreeningData(\n            performRiskScreening: true,\n            deviceSessionId: generateDeviceSessionId(),\n            userIp: \"192.168.1.100\",\n            account: RiskScreeningAccount(\n                id: \"user_12345678\",\n                creationDateTime: \"2024-01-15T10:30:00.000Z\"\n            ),\n            fulfillments: [\n                RiskScreeningFulfillment(\n                    type: .shipped,\n                    recipientPerson: RiskScreeningRecipientPerson(\n                        phoneNumber: \"+1234567890\"\n                    )\n                )\n            ]\n        )\n    )\n}\n\nconfig.onPostAuthorisation = { result in\n    if let authorizedResult = result as? AuthorisedSubmitResult {\n        print(\"Payment successful: \\(authorizedResult.provider.code)\")\n    } else if let failedResult = result as? FailedSubmitResult {\n        print(\"Payment failed: \\(failedResult.errorReason)\")\n    }\n}\n\nconfig.onShippingContactSelected = { contact in\n    let shippingCost = 5.99\n    let tax = 2.00\n    let total = 89.99 + shippingCost + tax\n    \n    return PKPaymentRequestShippingContactUpdate(\n        errors: [],\n        shippingMethods: [\n            PKShippingMethod(label: \"Standard Shipping\", amount: NSDecimalNumber(value: shippingCost))\n        ],\n        paymentSummaryItems: [\n            PKPaymentSummaryItem(label: \"Product\", amount: NSDecimalNumber(value: 89.99)),\n            PKPaymentSummaryItem(label: \"Shipping\", amount: NSDecimalNumber(value: shippingCost)),\n            PKPaymentSummaryItem(label: \"Tax\", amount: NSDecimalNumber(value: tax)),\n            PKPaymentSummaryItem(label: \"Total\", amount: NSDecimalNumber(value: total))\n        ]\n    )\n}\n\nconfig.onError = { error in\n    print(\"Apple Pay error: \\(error)\")\n    // Show error to user\n}\n\nconfig.onCancel = { error in\n    print(\"Apple Pay cancelled by user\")\n    // Handle cancellation\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["merchantDisplayName"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The display name for your business."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDescription"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A description of what the payment is for."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["currencyCode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The currency code (ISO 4217, e.g., \"USD\")."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["countryCode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The country code (ISO 3166-1 alpha-2, e.g., \"US\")."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["supportedNetworks"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["[PaymentNetwork]"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The supported payment networks."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["merchantCapabilities"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["[MerchantCapability]"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The merchant capabilities."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttonType"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ApplePaymentButtonType"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The button type. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".plain"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttonStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ApplePaymentButtonStyle"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The button style. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".black"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttonRadius"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CGFloat"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The button corner radius. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["4.0"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["totalPaymentItem"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ApplePayPaymentSummaryItem?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The total payment amount display."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentItems"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["[ApplePayPaymentSummaryItem]?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The line items to display."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["requiredBillingContactFields"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["[ContactField]?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required billing contact fields."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["requiredShippingContactFields"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["[ContactField]?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required shipping contact fields."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shippingMethods"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["[ApplePayShippingMethod]?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Available shipping methods."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customContent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(() -> AnyView)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom SwiftUI content for the button."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["applePayConsentComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ApplePayConsentComponent?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Consent component for data processing."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreAuthorisation"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(() async -> ApplePayTransactionInitData?)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for before payment authorisation."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostAuthorisation"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["((BaseSubmitResult) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for after payment authorisation."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onShippingContactSelected"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for shipping address changes."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onShippingMethodSelected"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for shipping method changes."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPaymentMethodSelected"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for payment method changes."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCouponCodeChanged"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for coupon code changes (iOS 15.0+)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onError"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["((Error) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for errors."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCancel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["((Error?) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for cancellation."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"custom-swiftui-implementation","__idx":9},"children":["Custom SwiftUI implementation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When you need complete control over the button appearance, use custom SwiftUI content:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = ApplePayButtonComponentConfig()\n\n// Basic configuration\nconfig.merchantDisplayName = \"Urban Fashion Boutique\"\nconfig.paymentDescription = \"Designer Jacket Purchase\"\nconfig.currencyCode = \"USD\"\nconfig.countryCode = \"US\"\nconfig.supportedNetworks = [.visa, .masterCard, .amex]\nconfig.merchantCapabilities = [.threeDSecure, .emv, .credit, .debit]\n\n// Custom SwiftUI button\nconfig.customContent = {\n    return AnyView(\n        HStack(spacing: 12) {\n            // Apple Pay logo\n            Image(systemName: \"applelogo\")\n                .font(.title2)\n                .foregroundColor(.white)\n            \n            // Custom text\n            VStack(alignment: .leading, spacing: 2) {\n                Text(\"Pay with\")\n                    .font(.caption)\n                    .foregroundColor(.white.opacity(0.8))\n                Text(\"Apple Pay\")\n                    .font(.headline)\n                    .fontWeight(.semibold)\n                    .foregroundColor(.white)\n            }\n            \n            Spacer()\n            \n            // Security indicator\n            Image(systemName: \"lock.shield.fill\")\n                .font(.title3)\n                .foregroundColor(.green)\n        }\n        .padding(.horizontal, 16)\n        .padding(.vertical, 12)\n        .frame(maxWidth: .infinity, minHeight: 52)\n        .background(\n            LinearGradient(\n                gradient: Gradient(colors: [\n                    Color.black,\n                    Color.gray.opacity(0.8)\n                ]),\n                startPoint: .topLeading,\n                endPoint: .bottomTrailing\n            )\n        )\n        .overlay(\n            RoundedRectangle(cornerRadius: 12)\n                .stroke(Color.white.opacity(0.2), lineWidth: 1)\n        )\n        .cornerRadius(12)\n        .shadow(color: .black.opacity(0.3), radius: 8, x: 0, y: 4)\n    )\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":10},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-customisation-with-native-button","__idx":11},"children":["Basic customisation with native button"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"import UIKit\nimport PXPCheckoutSDK\n\nclass BasicCustomizationViewController: UIViewController {\n    \n    private var applePayComponent: ApplePayButtonComponent?\n    private var checkout: PxpCheckout?\n    \n    override func viewDidLoad() {\n        super.viewDidLoad()\n        setupBasicApplePay()\n    }\n    \n    private func setupBasicApplePay() {\n        let checkoutConfig = CheckoutConfig(\n            environment: .test,\n            session: SessionConfig(sessionId: \"your-session-id\"),\n            transactionData: TransactionData(\n                amount: 129.99,\n                currency: \"USD\",\n                entryType: .ecom,\n                intent: .sale,\n                merchantTransactionId: \"order-\\(Int(Date().timeIntervalSince1970))\",\n                merchantTransactionDate: Date()\n            )\n        )\n        \n        do {\n            checkout = try PxpCheckout.initialize(config: checkoutConfig)\n            let applePayConfig = createBasicApplePayConfig()\n            applePayComponent = try checkout?.create(.applePayButton, componentConfig: applePayConfig)\n            \n            if let componentView = applePayComponent?.render() {\n                view.addSubview(componentView)\n                setupConstraints(for: componentView)\n            }\n        } catch {\n            print(\"Failed to initialize: \\(error)\")\n        }\n    }\n    \n    private func createBasicApplePayConfig() -> ApplePayButtonComponentConfig {\n        let config = ApplePayButtonComponentConfig()\n        \n        // Basic configuration\n        config.merchantDisplayName = \"Acme Electronics Store\"\n        config.paymentDescription = \"Wireless Headphones Purchase\"\n        config.currencyCode = \"USD\"\n        config.countryCode = \"US\"\n        config.supportedNetworks = [.visa, .masterCard, .amex, .discover]\n        config.merchantCapabilities = [.threeDSecure, .emv, .credit, .debit]\n        \n        // Button styling\n        config.buttonType = .buy\n        config.buttonStyle = .black\n        config.buttonRadius = 8.0\n        \n        // Payment items\n        config.totalPaymentItem = ApplePayPaymentSummaryItem(\n            amount: 129.99,\n            label: \"Total\",\n            type: .final\n        )\n        \n        config.paymentItems = [\n            ApplePayPaymentSummaryItem(amount: 119.99, label: \"Wireless Headphones\", type: .final),\n            ApplePayPaymentSummaryItem(amount: 10.00, label: \"Tax\", type: .final)\n        ]\n        \n        // Contact fields\n        config.requiredBillingContactFields = [.postalAddress, .name, .emailAddress]\n        config.requiredShippingContactFields = [.postalAddress, .name, .phoneNumber]\n        \n        // Event handlers\n        config.onPostAuthorisation = { [weak self] result in\n            DispatchQueue.main.async {\n                if let authorizedResult = result as? AuthorisedSubmitResult {\n                    print(\"Payment successful: \\(authorizedResult.provider.code)\")\n                    self?.navigateToOrderConfirmation(transactionId: authorizedResult.provider.code)\n                } else if let failedResult = result as? FailedSubmitResult {\n                    print(\"Payment failed: \\(failedResult.errorReason)\")\n                    self?.showErrorMessage(\"Payment was declined. Please try a different payment method.\")\n                }\n            }\n        }\n        \n        config.onError = { [weak self] error in\n            print(\"Apple Pay Error: \\(error)\")\n            DispatchQueue.main.async {\n                self?.showErrorMessage(\"Payment failed. Please try again.\")\n            }\n        }\n        \n        config.onCancel = { error in\n            print(\"User cancelled Apple Pay\")\n            // Track cancellation analytics\n        }\n        \n        return config\n    }\n    \n    private func setupConstraints(for componentView: UIView) {\n        componentView.translatesAutoresizingMaskIntoConstraints = false\n        \n        NSLayoutConstraint.activate([\n            componentView.centerXAnchor.constraint(equalTo: view.centerXAnchor),\n            componentView.centerYAnchor.constraint(equalTo: view.centerYAnchor),\n            componentView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),\n            componentView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),\n            componentView.heightAnchor.constraint(equalToConstant: 50)\n        ])\n    }\n    \n    private func navigateToOrderConfirmation(transactionId: String) {\n        // Navigate to order confirmation screen\n        let alert = UIAlertController(title: \"Order Successful\", message: \"Order ID: \\(transactionId)\", preferredStyle: .alert)\n        alert.addAction(UIAlertAction(title: \"OK\", style: .default))\n        present(alert, animated: true)\n    }\n    \n    private func showErrorMessage(_ message: String) {\n        let alert = UIAlertController(title: \"Payment Error\", message: message, preferredStyle: .alert)\n        alert.addAction(UIAlertAction(title: \"OK\", style: .default))\n        present(alert, animated: true)\n    }\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-swiftui-implementation-with-shipping","__idx":12},"children":["Custom SwiftUI implementation with shipping"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"import SwiftUI\nimport PXPCheckoutSDK\n\nstruct CustomApplePayView: View {\n    @State private var applePayComponent: ApplePayButtonComponent?\n    @State private var checkout: PxpCheckout?\n    @State private var showingOrderDetails = false\n    @State private var orderTotal: Double = 89.97\n    \n    var body: some View {\n        VStack(spacing: 20) {\n            Text(\"Outdoor Adventure Gear\")\n                .font(.largeTitle)\n                .fontWeight(.bold)\n            \n            VStack(spacing: 10) {\n                HStack {\n                    Text(\"Camping Tent\")\n                    Spacer()\n                    Text(\"$69.99\")\n                }\n                HStack {\n                    Text(\"Sleeping Bag\")\n                    Spacer()\n                    Text(\"$14.99\")\n                }\n                HStack {\n                    Text(\"Tax\")\n                    Spacer()\n                    Text(\"$4.99\")\n                }\n                Divider()\n                HStack {\n                    Text(\"Total\")\n                        .fontWeight(.semibold)\n                    Spacer()\n                    Text(\"$\\(orderTotal, specifier: \"%.2f\")\")\n                        .fontWeight(.semibold)\n                }\n            }\n            .padding()\n            .background(Color.gray.opacity(0.1))\n            .cornerRadius(10)\n            \n            // Custom Apple Pay Button\n            ApplePayButtonWrapper(\n                onComponentCreated: { component in\n                    self.applePayComponent = component\n                }\n            )\n            .frame(height: 52)\n            .cornerRadius(12)\n            \n            Button(\"Show Order Details\") {\n                showingOrderDetails = true\n            }\n            .foregroundColor(.blue)\n        }\n        .padding()\n        .onAppear {\n            setupCustomApplePay()\n        }\n        .sheet(isPresented: $showingOrderDetails) {\n            OrderDetailsView()\n        }\n    }\n    \n    private func setupCustomApplePay() {\n        let checkoutConfig = CheckoutConfig(\n            environment: .test,\n            session: SessionConfig(sessionId: \"your-session-id\"),\n            transactionData: TransactionData(\n                amount: orderTotal,\n                currency: \"USD\",\n                entryType: .ecom,\n                intent: .sale,\n                merchantTransactionId: \"camping-\\(Int(Date().timeIntervalSince1970))\",\n                merchantTransactionDate: Date()\n            )\n        )\n        \n        do {\n            checkout = try PxpCheckout.initialize(config: checkoutConfig)\n        } catch {\n            print(\"Failed to initialize: \\(error)\")\n        }\n    }\n}\n\nstruct ApplePayButtonWrapper: UIViewRepresentable {\n    let onComponentCreated: (ApplePayButtonComponent) -> Void\n    \n    func makeUIView(context: Context) -> UIView {\n        let containerView = UIView()\n        \n        let checkoutConfig = CheckoutConfig(\n            environment: .test,\n            session: SessionConfig(sessionId: \"your-session-id\"),\n            transactionData: TransactionData(\n                amount: 89.97,\n                currency: \"USD\",\n                entryType: .ecom,\n                intent: .sale,\n                merchantTransactionId: \"order-\\(Int(Date().timeIntervalSince1970))\",\n                merchantTransactionDate: Date()\n            )\n        )\n        \n        do {\n            let checkout = try PxpCheckout.initialize(config: checkoutConfig)\n            let config = createCustomApplePayConfig()\n            let component = try checkout.create(.applePayButton, componentConfig: config)\n            \n            if let componentView = component.render() {\n                containerView.addSubview(componentView)\n                componentView.translatesAutoresizingMaskIntoConstraints = false\n                \n                NSLayoutConstraint.activate([\n                    componentView.topAnchor.constraint(equalTo: containerView.topAnchor),\n                    componentView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),\n                    componentView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),\n                    componentView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor)\n                ])\n            }\n            \n            onComponentCreated(component)\n        } catch {\n            print(\"Failed to create Apple Pay component: \\(error)\")\n        }\n        \n        return containerView\n    }\n    \n    func updateUIView(_ uiView: UIView, context: Context) {\n        // Updates handled by the component\n    }\n    \n    private func createCustomApplePayConfig() -> ApplePayButtonComponentConfig {\n        let config = ApplePayButtonComponentConfig()\n        \n        // Basic configuration\n        config.merchantDisplayName = \"Outdoor Adventure Gear\"\n        config.paymentDescription = \"Camping Equipment Order\"\n        config.currencyCode = \"USD\"\n        config.countryCode = \"US\"\n        config.supportedNetworks = [.visa, .masterCard, .amex, .discover]\n        config.merchantCapabilities = [.threeDSecure, .emv, .credit, .debit]\n        \n        // Custom SwiftUI button\n        config.customContent = {\n            return AnyView(\n                HStack(spacing: 12) {\n                    // Apple logo\n                    Image(systemName: \"applelogo\")\n                        .font(.title2)\n                        .foregroundColor(.white)\n                    \n                    // Button text\n                    VStack(alignment: .leading, spacing: 2) {\n                        Text(\"Buy with\")\n                            .font(.caption)\n                            .foregroundColor(.white.opacity(0.8))\n                        Text(\"Apple Pay\")\n                            .font(.headline)\n                            .fontWeight(.semibold)\n                            .foregroundColor(.white)\n                    }\n                    \n                    Spacer()\n                    \n                    // Animated shimmer effect\n                    Rectangle()\n                        .frame(width: 2, height: 20)\n                        .foregroundColor(.white.opacity(0.6))\n                        .animation(\n                            Animation.linear(duration: 1.5)\n                                .repeatForever(autoreverses: false),\n                            value: UUID()\n                        )\n                }\n                .padding(.horizontal, 16)\n                .padding(.vertical, 12)\n                .frame(maxWidth: .infinity, minHeight: 52)\n                .background(\n                    LinearGradient(\n                        gradient: Gradient(colors: [\n                            Color(red: 0.1, green: 0.1, blue: 0.1),\n                            Color(red: 0.3, green: 0.3, blue: 0.3)\n                        ]),\n                        startPoint: .topLeading,\n                        endPoint: .bottomTrailing\n                    )\n                )\n                .overlay(\n                    RoundedRectangle(cornerRadius: 12)\n                        .stroke(\n                            LinearGradient(\n                                gradient: Gradient(colors: [\n                                    Color.white.opacity(0.2),\n                                    Color.clear\n                                ]),\n                                startPoint: .topLeading,\n                                endPoint: .bottomTrailing\n                            ),\n                            lineWidth: 1\n                        )\n                )\n                .cornerRadius(12)\n                .shadow(color: .black.opacity(0.3), radius: 8, x: 0, y: 4)\n            )\n        }\n        \n        // Payment items\n        config.totalPaymentItem = ApplePayPaymentSummaryItem(\n            amount: 89.97,\n            label: \"Total\",\n            type: .final\n        )\n        \n        config.paymentItems = [\n            ApplePayPaymentSummaryItem(amount: 69.99, label: \"Camping Tent\", type: .final),\n            ApplePayPaymentSummaryItem(amount: 14.99, label: \"Sleeping Bag\", type: .final),\n            ApplePayPaymentSummaryItem(amount: 4.99, label: \"Tax\", type: .final)\n        ]\n        \n        // Contact fields\n        config.requiredBillingContactFields = [.postalAddress, .name, .emailAddress]\n        config.requiredShippingContactFields = [.postalAddress, .name, .phoneNumber]\n        \n        // Shipping methods\n        config.shippingMethods = [\n            ApplePayShippingMethod(\n                amount: 0.00,\n                detail: \"5-7 business days\",\n                identifier: \"standard\",\n                label: \"Standard Shipping\"\n            ),\n            ApplePayShippingMethod(\n                amount: 12.99,\n                detail: \"2-3 business days\",\n                identifier: \"express\",\n                label: \"Express Shipping\"\n            )\n        ]\n        \n        // Event handlers\n        config.onShippingMethodSelected = { method in\n            let baseAmount = 84.98 // Subtotal + tax\n            let shippingCost = method.amount.doubleValue\n            let newTotal = baseAmount + shippingCost\n            \n            return PKPaymentRequestShippingMethodUpdate(\n                paymentSummaryItems: [\n                    PKPaymentSummaryItem(label: \"Camping Tent\", amount: NSDecimalNumber(value: 69.99)),\n                    PKPaymentSummaryItem(label: \"Sleeping Bag\", amount: NSDecimalNumber(value: 14.99)),\n                    PKPaymentSummaryItem(label: \"Tax\", amount: NSDecimalNumber(value: 4.99)),\n                    PKPaymentSummaryItem(label: \"Shipping (\\(method.label))\", amount: method.amount),\n                    PKPaymentSummaryItem(label: \"Total\", amount: NSDecimalNumber(value: newTotal))\n                ]\n            )\n        }\n        \n        config.onPostAuthorisation = { result in\n            DispatchQueue.main.async {\n                if let authorizedResult = result as? AuthorisedSubmitResult {\n                    print(\"Order successful: \\(authorizedResult.provider.code)\")\n                    // Send order confirmation and navigate\n                } else if let failedResult = result as? FailedSubmitResult {\n                    print(\"Order failed: \\(failedResult.errorReason)\")\n                    // Show error notification\n                }\n            }\n        }\n        \n        config.onError = { error in\n            print(\"Apple Pay Error: \\(error)\")\n            // Handle error\n        }\n        \n        return config\n    }\n}\n\nstruct OrderDetailsView: View {\n    var body: some View {\n        NavigationView {\n            VStack {\n                Text(\"Order Details\")\n                    .font(.largeTitle)\n                    .padding()\n                \n                Text(\"Your camping gear order is being processed.\")\n                    .padding()\n                \n                Spacer()\n            }\n            .navigationBarTitleDisplayMode(.inline)\n            .toolbar {\n                ToolbarItem(placement: .navigationBarTrailing) {\n                    Button(\"Done\") {\n                        // Dismiss view\n                    }\n                }\n            }\n        }\n    }\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"subscription-service-with-recurring-payments","__idx":13},"children":["Subscription service with recurring payments"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"import UIKit\nimport PXPCheckoutSDK\n\nclass SubscriptionViewController: UIViewController {\n    \n    @IBOutlet weak var subscriptionPlanLabel: UILabel!\n    @IBOutlet weak var priceLabel: UILabel!\n    @IBOutlet weak var featuresStackView: UIStackView!\n    @IBOutlet weak var applePayContainer: UIView!\n    \n    private var applePayComponent: ApplePayButtonComponent?\n    private var checkout: PxpCheckout?\n    private let subscriptionPrice: Double = 14.99\n    \n    override func viewDidLoad() {\n        super.viewDidLoad()\n        setupSubscriptionUI()\n        setupRecurringApplePay()\n    }\n    \n    private func setupSubscriptionUI() {\n        subscriptionPlanLabel.text = \"StreamMax Premium\"\n        priceLabel.text = \"$\\(subscriptionPrice, specifier: \"%.2f\")/month\"\n        \n        // Add feature list\n        let features = [\n            \"Ad-free streaming\",\n            \"4K Ultra HD quality\",\n            \"Download for offline viewing\",\n            \"Stream on up to 4 devices\",\n            \"Exclusive content access\"\n        ]\n        \n        features.forEach { feature in\n            let featureView = createFeatureView(text: feature)\n            featuresStackView.addArrangedSubview(featureView)\n        }\n    }\n    \n    private func createFeatureView(text: String) -> UIView {\n        let stackView = UIStackView()\n        stackView.axis = .horizontal\n        stackView.spacing = 8\n        stackView.alignment = .center\n        \n        let checkmark = UIImageView(image: UIImage(systemName: \"checkmark.circle.fill\"))\n        checkmark.tintColor = .systemGreen\n        checkmark.widthAnchor.constraint(equalToConstant: 20).isActive = true\n        checkmark.heightAnchor.constraint(equalToConstant: 20).isActive = true\n        \n        let label = UILabel()\n        label.text = text\n        label.font = UIFont.systemFont(ofSize: 16)\n        label.textColor = .label\n        \n        stackView.addArrangedSubview(checkmark)\n        stackView.addArrangedSubview(label)\n        \n        return stackView\n    }\n    \n    private func setupRecurringApplePay() {\n        let checkoutConfig = CheckoutConfig(\n            environment: .test,\n            session: SessionConfig(sessionId: \"your-session-id\"),\n            transactionData: TransactionData(\n                amount: subscriptionPrice,\n                currency: \"USD\",\n                entryType: .ecom,\n                intent: .sale,\n                merchantTransactionId: \"subscription-\\(Int(Date().timeIntervalSince1970))\",\n                merchantTransactionDate: Date()\n            )\n        )\n        \n        do {\n            checkout = try PxpCheckout.initialize(config: checkoutConfig)\n            let subscriptionConfig = createSubscriptionApplePayConfig()\n            applePayComponent = try checkout?.create(.applePayButton, componentConfig: subscriptionConfig)\n            \n            if let componentView = applePayComponent?.render() {\n                applePayContainer.addSubview(componentView)\n                setupApplePayConstraints(for: componentView)\n            }\n        } catch {\n            print(\"Failed to initialize: \\(error)\")\n        }\n    }\n    \n    private func createSubscriptionApplePayConfig() -> ApplePayButtonComponentConfig {\n        let config = ApplePayButtonComponentConfig()\n        \n        // Basic configuration\n        config.merchantDisplayName = \"StreamMax Entertainment\"\n        config.paymentDescription = \"Premium Streaming Subscription\"\n        config.currencyCode = \"USD\"\n        config.countryCode = \"US\"\n        config.supportedNetworks = [.visa, .masterCard, .amex, .discover]\n        config.merchantCapabilities = [.threeDSecure, .emv, .credit, .debit]\n        \n        // Subscription-specific button styling\n        config.buttonType = .subscribe\n        config.buttonStyle = .black\n        config.buttonRadius = 8.0\n        \n        // Custom gradient button using SwiftUI\n        config.customContent = {\n            return AnyView(\n                HStack(spacing: 10) {\n                    Image(systemName: \"applelogo\")\n                        .font(.title2)\n                        .foregroundColor(.white)\n                    \n                    VStack(alignment: .leading, spacing: 2) {\n                        Text(\"Subscribe with\")\n                            .font(.caption)\n                            .foregroundColor(.white.opacity(0.9))\n                        Text(\"Apple Pay\")\n                            .font(.headline)\n                            .fontWeight(.semibold)\n                            .foregroundColor(.white)\n                    }\n                    \n                    Spacer()\n                    \n                    VStack(alignment: .trailing, spacing: 2) {\n                        Text(\"$14.99\")\n                            .font(.headline)\n                            .fontWeight(.bold)\n                            .foregroundColor(.white)\n                        Text(\"per month\")\n                            .font(.caption2)\n                            .foregroundColor(.white.opacity(0.8))\n                    }\n                }\n                .padding(.horizontal, 16)\n                .padding(.vertical, 12)\n                .frame(maxWidth: .infinity, minHeight: 48)\n                .background(\n                    LinearGradient(\n                        gradient: Gradient(colors: [\n                            Color(red: 1.0, green: 0.42, blue: 0.21), // FF6B35\n                            Color(red: 0.97, green: 0.58, blue: 0.12)  // F7931E\n                        ]),\n                        startPoint: .leading,\n                        endPoint: .trailing\n                    )\n                )\n                .cornerRadius(8)\n                .shadow(color: Color(red: 1.0, green: 0.42, blue: 0.21).opacity(0.3), radius: 4, x: 0, y: 2)\n            )\n        }\n        \n        // Payment items\n        config.totalPaymentItem = ApplePayPaymentSummaryItem(\n            amount: subscriptionPrice,\n            label: \"First Month\",\n            type: .final\n        )\n        \n        config.paymentItems = [\n            ApplePayPaymentSummaryItem(amount: 12.99, label: \"Premium Subscription\", type: .final),\n            ApplePayPaymentSummaryItem(amount: 2.00, label: \"Tax\", type: .final)\n        ]\n        \n        // Recurring payment configuration\n        config.recurringRequest = ApplePayRecurringPaymentRequest(\n            paymentDescription: \"StreamMax Premium Monthly Subscription\",\n            regularBilling: ApplePayRecurringPaymentSummaryItem(\n                label: \"Monthly Premium Subscription\",\n                amount: NSDecimalNumber(value: subscriptionPrice)\n            ),\n            managementURL: \"https://streammax.com/manage-subscription\",\n            tokenNotificationURL: \"https://api.streammax.com/webhooks/subscription\"\n        )\n        \n        // Configure recurring schedule\n        let calendar = Calendar.current\n        let nextMonth = calendar.date(byAdding: .month, value: 1, to: Date()) ?? Date()\n        \n        config.recurringRequest?.regularBilling.startDate = nextMonth\n        config.recurringRequest?.regularBilling.intervalUnit = .month\n        config.recurringRequest?.regularBilling.intervalCount = 1\n        \n        // Contact fields\n        config.requiredBillingContactFields = [.postalAddress, .name, .emailAddress]\n        \n        // Event handlers\n        config.onPreAuthorisation = { [weak self] in\n            // Get user consent for recurring payments\n            let userConsent = await self?.getUserSubscriptionConsent() ?? false\n            guard userConsent else {\n                throw SubscriptionError.userDeclinedTerms\n            }\n            \n            return ApplePayTransactionInitData(\n                riskScreeningData: RiskScreeningData(\n                    performRiskScreening: true,\n                    deviceSessionId: generateDeviceSessionId(),\n                    userIp: \"192.168.1.100\",\n                    account: RiskScreeningAccount(\n                        id: \"user_12345678\",\n                        creationDateTime: \"2024-01-15T10:30:00.000Z\"\n                    ),\n                    items: [\n                        RiskScreeningItem(\n                            price: 9.99,\n                            quantity: 1,\n                            category: \"Subscription\"\n                        )\n                    ],\n                    fulfillments: [\n                        RiskScreeningFulfillment(\n                            type: .digital,\n                            recipientPerson: RiskScreeningRecipientPerson(\n                                phoneNumber: \"+1234567890\"\n                            )\n                        )\n                    ],\n                    transaction: RiskScreeningTransaction(\n                        subtotal: 9.99\n                    )\n                )\n            )\n        }\n        \n        config.onPostAuthorisation = { [weak self] result in\n            DispatchQueue.main.async {\n                if let authorizedResult = result as? AuthorisedSubmitResult {\n                    print(\"Subscription setup successful: \\(authorizedResult.provider.code)\")\n                    \n                    // Create subscription record\n                    self?.createSubscription(\n                        transactionId: authorizedResult.provider.code,\n                        subscriptionPlan: \"premium\",\n                        billingCycle: \"monthly\",\n                        nextBillingDate: nextMonth\n                    )\n                    \n                    // Navigate to welcome screen\n                    self?.navigateToWelcomeScreen(subscriptionId: authorizedResult.provider.code)\n                    \n                } else if let failedResult = result as? FailedSubmitResult {\n                    print(\"Subscription setup failed: \\(failedResult.errorReason)\")\n                    self?.showError(\"Subscription setup failed. Please try again.\")\n                }\n            }\n        }\n        \n        config.onError = { [weak self] error in\n            print(\"Subscription Error: \\(error)\")\n            DispatchQueue.main.async {\n                self?.showError(\"Unable to set up subscription. Please try again or contact support.\")\n            }\n        }\n        \n        return config\n    }\n    \n    // Helper methods\n    private func getUserSubscriptionConsent() async -> Bool {\n        return await withCheckedContinuation { continuation in\n            DispatchQueue.main.async {\n                let alert = UIAlertController(\n                    title: \"Subscription Terms\",\n                    message: \"You will be charged $14.99 monthly starting 30 days from today. You can cancel anytime in your account settings.\",\n                    preferredStyle: .alert\n                )\n                \n                alert.addAction(UIAlertAction(title: \"Accept & Subscribe\", style: .default) { _ in\n                    continuation.resume(returning: true)\n                })\n                \n                alert.addAction(UIAlertAction(title: \"Cancel\", style: .cancel) { _ in\n                    continuation.resume(returning: false)\n                })\n                \n                self.present(alert, animated: true)\n            }\n        }\n    }\n    \n    private func getDeviceFingerprint() async -> String {\n        return \"device_\\(UIDevice.current.identifierForVendor?.uuidString ?? \"unknown\")_\\(Int(Date().timeIntervalSince1970))\"\n    }\n    \n    private func createSubscription(transactionId: String, subscriptionPlan: String, billingCycle: String, nextBillingDate: Date) {\n        // Store subscription details\n        let subscriptionData: [String: Any] = [\n            \"transactionId\": transactionId,\n            \"plan\": subscriptionPlan,\n            \"billingCycle\": billingCycle,\n            \"nextBillingDate\": nextBillingDate,\n            \"createdAt\": Date()\n        ]\n        \n        UserDefaults.standard.set(subscriptionData, forKey: \"subscription_\\(transactionId)\")\n        print(\"Subscription created: \\(subscriptionData)\")\n    }\n    \n    private func navigateToWelcomeScreen(subscriptionId: String) {\n        let alert = UIAlertController(\n            title: \"Welcome to StreamMax Premium!\",\n            message: \"Your subscription is now active. Subscription ID: \\(subscriptionId)\",\n            preferredStyle: .alert\n        )\n        alert.addAction(UIAlertAction(title: \"Start Streaming\", style: .default))\n        present(alert, animated: true)\n    }\n    \n    private func showError(_ message: String) {\n        let alert = UIAlertController(title: \"Error\", message: message, preferredStyle: .alert)\n        alert.addAction(UIAlertAction(title: \"OK\", style: .default))\n        present(alert, animated: true)\n    }\n    \n    private func setupApplePayConstraints(for componentView: UIView) {\n        componentView.translatesAutoresizingMaskIntoConstraints = false\n        \n        NSLayoutConstraint.activate([\n            componentView.topAnchor.constraint(equalTo: applePayContainer.topAnchor),\n            componentView.leadingAnchor.constraint(equalTo: applePayContainer.leadingAnchor),\n            componentView.trailingAnchor.constraint(equalTo: applePayContainer.trailingAnchor),\n            componentView.bottomAnchor.constraint(equalTo: applePayContainer.bottomAnchor),\n            componentView.heightAnchor.constraint(equalToConstant: 48)\n        ])\n    }\n}\n\nenum SubscriptionError: Error {\n    case userDeclinedTerms\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"dynamic-state-management","__idx":14},"children":["Dynamic state management"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"import UIKit\nimport PXPCheckoutSDK\n\nclass DynamicApplePayManager: NSObject {\n    \n    enum PaymentState {\n        case idle, loading, success, error\n    }\n    \n    private var component: ApplePayButtonComponent?\n    private var containerView: UIView\n    private var state: PaymentState = .idle\n    private var stateIndicator: UIView?\n    \n    init(containerView: UIView) {\n        self.containerView = containerView\n        super.init()\n    }\n    \n    func create(theme: Theme = .light) -> DynamicApplePayManager {\n        let checkoutConfig = CheckoutConfig(\n            environment: .test,\n            session: SessionConfig(sessionId: \"your-session-id\"),\n            transactionData: TransactionData(\n                amount: 189.99,\n                currency: \"USD\",\n                entryType: .ecom,\n                intent: .sale,\n                merchantTransactionId: \"gaming-\\(Int(Date().timeIntervalSince1970))\",\n                merchantTransactionDate: Date()\n            )\n        )\n        \n        do {\n            let checkout = try PxpCheckout.initialize(config: checkoutConfig)\n            let config = createDynamicConfig(theme: theme)\n            component = try checkout.create(.applePayButton, componentConfig: config)\n        } catch {\n            print(\"Failed to create component: \\(error)\")\n        }\n        \n        return self\n    }\n    \n    func mount() -> DynamicApplePayManager {\n        guard let component = component else { return self }\n        \n        if let componentView = component.render() {\n            containerView.addSubview(componentView)\n            setupConstraints(for: componentView)\n            setupStateIndicator()\n        }\n        \n        return self\n    }\n    \n    private func createDynamicConfig(theme: Theme) -> ApplePayButtonComponentConfig {\n        let config = ApplePayButtonComponentConfig()\n        \n        // Basic configuration\n        config.merchantDisplayName = \"TechGadget Pro Store\"\n        config.paymentDescription = \"Wireless Gaming Headset Purchase\"\n        config.currencyCode = \"USD\"\n        config.countryCode = \"US\"\n        config.supportedNetworks = [.visa, .masterCard, .amex, .discover]\n        config.merchantCapabilities = [.threeDSecure, .emv, .credit, .debit]\n        \n        // Dynamic button with state management\n        config.customContent = { [weak self] in\n            return AnyView(self?.createDynamicButton(theme: theme) ?? EmptyView().eraseToAnyView())\n        }\n        \n        // Payment items\n        config.totalPaymentItem = ApplePayPaymentSummaryItem(\n            amount: 189.99,\n            label: \"Total\",\n            type: .final\n        )\n        \n        config.paymentItems = [\n            ApplePayPaymentSummaryItem(amount: 169.99, label: \"Gaming Headset Pro X\", type: .final),\n            ApplePayPaymentSummaryItem(amount: 12.99, label: \"Extended Warranty\", type: .final),\n            ApplePayPaymentSummaryItem(amount: 7.01, label: \"Tax\", type: .final)\n        ]\n        \n        // Contact fields\n        config.requiredBillingContactFields = [.postalAddress, .name, .emailAddress]\n        \n        // Event handlers with state management\n        config.onPostAuthorisation = { [weak self] result in\n            DispatchQueue.main.async {\n                if let _ = result as? AuthorisedSubmitResult {\n                    self?.setState(.success)\n                    DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {\n                        // Navigate to success screen\n                    }\n                } else {\n                    self?.setState(.error)\n                    DispatchQueue.main.asyncAfter(deadline: .now() + 3.0) {\n                        self?.setState(.idle)\n                    }\n                }\n            }\n        }\n        \n        config.onError = { [weak self] error in\n            DispatchQueue.main.async {\n                self?.setState(.error)\n                DispatchQueue.main.asyncAfter(deadline: .now() + 3.0) {\n                    self?.setState(.idle)\n                }\n            }\n        }\n        \n        return config\n    }\n    \n    private func createDynamicButton(theme: Theme) -> some View {\n        let colors = theme.colors\n        \n        return HStack(spacing: 12) {\n            // Apple Pay logo\n            Image(systemName: \"applelogo\")\n                .font(.title2)\n                .foregroundColor(.white)\n            \n            // Button text\n            Text(\"Pay\")\n                .font(.headline)\n                .fontWeight(.semibold)\n                .foregroundColor(.white)\n            \n            Spacer()\n            \n            // Dynamic state indicator\n            Group {\n                switch state {\n                case .idle:\n                    EmptyView()\n                case .loading:\n                    ProgressView()\n                        .progressViewStyle(CircularProgressViewStyle(tint: .white))\n                        .scaleEffect(0.8)\n                case .success:\n                    Image(systemName: \"checkmark.circle.fill\")\n                        .foregroundColor(.green)\n                        .font(.title3)\n                case .error:\n                    Image(systemName: \"xmark.circle.fill\")\n                        .foregroundColor(.red)\n                        .font(.title3)\n                }\n            }\n            .frame(width: 20, height: 20)\n        }\n        .padding(.horizontal, 16)\n        .padding(.vertical, 12)\n        .frame(maxWidth: .infinity, minHeight: 52)\n        .background(backgroundColor(for: state, theme: theme))\n        .cornerRadius(8)\n        .onTapGesture {\n            if state == .idle {\n                setState(.loading)\n            }\n        }\n    }\n    \n    private func backgroundColor(for state: PaymentState, theme: Theme) -> Color {\n        switch state {\n        case .idle:\n            return theme.colors.background\n        case .loading:\n            return theme.colors.background.opacity(0.8)\n        case .success:\n            return Color.green\n        case .error:\n            return Color.red\n        }\n    }\n    \n    private func setState(_ newState: PaymentState) {\n        state = newState\n        updateButtonAppearance()\n    }\n    \n    private func setupStateIndicator() {\n        // Additional state indicators if needed\n    }\n    \n    private func updateButtonAppearance() {\n        // Trigger view update through component refresh\n    }\n    \n    private func setupConstraints(for componentView: UIView) {\n        componentView.translatesAutoresizingMaskIntoConstraints = false\n        \n        NSLayoutConstraint.activate([\n            componentView.topAnchor.constraint(equalTo: containerView.topAnchor),\n            componentView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),\n            componentView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),\n            componentView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor),\n            componentView.heightAnchor.constraint(equalToConstant: 52)\n        ])\n    }\n}\n\n// Theme support\nstruct Theme {\n    let colors: ThemeColors\n    \n    static let light = Theme(colors: ThemeColors(\n        background: Color.black,\n        text: Color.white,\n        hover: Color.gray,\n        success: Color.green,\n        error: Color.red\n    ))\n    \n    static let dark = Theme(colors: ThemeColors(\n        background: Color(red: 0.11, green: 0.11, blue: 0.12),\n        text: Color.white,\n        hover: Color(red: 0.17, green: 0.17, blue: 0.18),\n        success: Color(red: 0.19, green: 0.82, blue: 0.35),\n        error: Color(red: 1.0, green: 0.27, blue: 0.23)\n    ))\n}\n\nstruct ThemeColors {\n    let background: Color\n    let text: Color\n    let hover: Color\n    let success: Color\n    let error: Color\n}\n\n// Extension for type erasure\nextension View {\n    func eraseToAnyView() -> AnyView {\n        return AnyView(self)\n    }\n}\n\n// Usage\n// let applePayManager = DynamicApplePayManager(containerView: applePayContainerView)\n// applePayManager.create(theme: .dark).mount()\n","lang":"swift"},"children":[]}]},"headings":[{"value":"Customisation","id":"customisation","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Default styling","id":"default-styling","depth":2},{"value":"Default button types","id":"default-button-types","depth":3},{"value":"Default button styles","id":"default-button-styles","depth":3},{"value":"Custom styling implementation","id":"custom-styling-implementation","depth":2},{"value":"Configuration options","id":"configuration-options","depth":2},{"value":"ApplePayButtonComponentConfig","id":"applepaybuttoncomponentconfig","depth":3},{"value":"Example configuration","id":"example-configuration","depth":4},{"value":"Custom SwiftUI implementation","id":"custom-swiftui-implementation","depth":2},{"value":"Examples","id":"examples","depth":2},{"value":"Basic customisation with native button","id":"basic-customisation-with-native-button","depth":3},{"value":"Custom SwiftUI implementation with shipping","id":"custom-swiftui-implementation-with-shipping","depth":3},{"value":"Subscription service with recurring payments","id":"subscription-service-with-recurring-payments","depth":3},{"value":"Dynamic state management","id":"dynamic-state-management","depth":3}],"frontmatter":{"seo":{"title":"Customisation"}},"lastModified":"2026-04-22T11:04:41.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/ios/apple-pay/customisation","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}