{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","required","coming-soon","admonition","accordion"]},"type":"markdown"},"seo":{"title":"Implementation","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":"implementation","__idx":0},"children":["Implementation"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn how to use card components in your project."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Every component follows the same basic three-step lifecycle:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Initialise the SDK"]}," and configure your payment environment."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Create and configure components"]}," with your custom settings and callbacks."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Render components"]}," in your Android UI using Jetpack Compose."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"before-you-start","__idx":2},"children":["Before you start"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To use Android components, you need to ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/android/install"},"children":["install the Checkout SDK for Android"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-1-initialise-the-sdk","__idx":3},"children":["Step 1: Initialise the SDK"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To get started, initialise the PXP Checkout SDK in your Activity or Application class."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"class PaymentActivity : ComponentActivity() {\n    private lateinit var pxpCheckout: PxpCheckout\n    \n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        \n        // Initialise the SDK\n        val sdkConfig = PxpSdkConfig(\n            environment = Environment.TEST,\n            session = SessionConfig(\n                sessionId = \"your-session-id\",\n                sessionData = \"your-session-data\"\n            ),\n            ownerId = \"Unity\",\n            ownerType = \"MerchantGroup\",\n            merchantShopperId = \"Shopper_09\",\n            transactionData = TransactionData(\n                currency = CurrencyType.USD,\n                amount = 25.0,\n                entryType = EntryType.Ecom,\n                intent = IntentType.Authorisation,\n                merchantTransactionId = UUID.randomUUID().toString(),\n                merchantTransactionDate = { Instant.now().toString() }\n            ),\n            clientId = \"your-client-id\",\n            kountDisabled = false, // OPTIONAL: Set to true to disable Kount fraud detection\n            // Optional: Restrict accepted card types\n            restrictions = Restrictions(\n                card = RestrictionsCard(\n                    ownerTypes = listOf(RestrictionOwnerType.CONSUMER, RestrictionOwnerType.CORPORATE),\n                    fundingSources = listOf(RestrictionFundingSource.CREDIT, RestrictionFundingSource.DEBIT)\n                )\n            )\n        )\n        \n        pxpCheckout = PxpCheckout.builder()\n            .withConfig(sdkConfig)\n            .withContext(this)\n            .withDebugMode(true)\n            .build()\n    }\n}\n","lang":"kotlin"},"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":["environment"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Environment"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The environment type.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Environment.TEST"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Environment.LIVE"]}]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["session"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["SessionConfig"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Details about the checkout session."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ownerId"]},{"$$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":["Your unique merchant group identifier, as assigned by PXP. You can find it in the Unity Portal, by going to ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Merchant setup > Merchant groups"]}," and checking the ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["Merchant group ID"]}," column."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ownerType"]},{"$$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 type of owner. Set this to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["MerchantGroup"]},".",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["MerchantGroup"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Merchant"]}," ",{"$$mdtype":"Tag","name":"ComingSoon","attributes":{"noSpace":false},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Site"]}," ",{"$$mdtype":"Tag","name":"ComingSoon","attributes":{"noSpace":false},"children":[]}]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["merchantShopperId"]},{"$$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 unique identifier for this shopper."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionData"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["TransactionData"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Details about the transaction."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionData.currency"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CurrencyType"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The currency code associated with the transaction, in ISO 4217 format."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionData.amount"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Double"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The transaction amount."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionData.entryType"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["EntryType"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The entry type.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["EntryType.Ecom"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["EntryType.MOTO"]}]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionData.intent.card"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The intent for card transactions that determines the type of card operation.",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["IntentType.Authorisation"]},": Reserve funds on the card (not captured)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["IntentType.Purchase"]},": Immediate charge (autorisation and capture)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["IntentType.Verification"]},": Verify card validity ($0 or minimal amount)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["IntenType.EstimatedAuthorisation"]},": Pre-authorisation with estimated amount"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["IntentType.Payout"]},": Send funds to the cardholder's card (disbursement/withdrawal)"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionData.merchantTransactionId"]},{"$$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 unique identifier for this transaction."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionData.merchantTransactionDate"]},{"$$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 date and time of the transaction, in ISO 8601 format."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["clientId"]},{"$$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":["Your client identifier for API authentication."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["kountDisabled"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to disable the Kount fraud detection service. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," (fraud detection enabled)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["restrictions"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Restrictions"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Optional card restrictions for frontend validation. Restricts what card types are accepted in the new card component.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Restrictions"]}," object contains:",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["card: RestrictionsCard?"]},": Card-specific restrictions"]}]},"The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["RestrictionsCard"]}," object contains:",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ownerTypes: List<RestrictionOwnerType>?"]},": Allowed card owner segments (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Corporate"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Consumer"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fundingSources: List<RestrictionFundingSource>?"]},": Allowed funding sources (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Prepaid"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Credit"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Debit"]},")"]}]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":["If restrictions are specified in both the session (via backend API) and the SDK config, they are merged. The merge uses a union approach: session restrictions come first, followed by SDK-only values. If a restriction axis is empty after merging, it becomes ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-2-create-a-component","__idx":4},"children":["Step 2: Create a component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Next, you're going to create a component. Use the following snippet and change the component type to the one you want to add."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val component = pxpCheckout.createComponent<ComponentClass, ConfigClass>(\n    type = ComponentType.COMPONENT_NAME,\n    config = configInstance\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Accordion","attributes":{"title":"View list of component names","defaultOpen":false},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Pre-built components:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ComponentType.CARD_ON_FILE"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ComponentType.CLICK_ONCE"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ComponentType.BILLING_ADDRESS"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ComponentType.NEW_CARD"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Standalone components:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ComponentType.CARD_NUMBER"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ComponentType.CARD_EXPIRY_DATE"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ComponentType.CARD_CVC"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ComponentType.CARD_HOLDER_NAME"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ComponentType.CARD_BRAND_SELECTOR"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ComponentType.CARD_CONSENT"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ComponentType.DYNAMIC_CARD_IMAGE"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ComponentType.CARD_SUBMIT"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ComponentType.COUNTRY_SELECTION"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ComponentType.POSTCODE"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ComponentType.ADDRESS"]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-3-render-the-component","__idx":5},"children":["Step 3: Render the component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To render the component in your Android UI, use Jetpack Compose and the SDK's built-in rendering method."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"@Composable\nfun PaymentScreen() {\n    Column(\n        modifier = Modifier\n            .fillMaxSize()\n            .padding(16.dp)\n    ) {\n        Text(\n            text = \"Payment Information\",\n            style = MaterialTheme.typography.headlineMedium,\n            modifier = Modifier.padding(bottom = 16.dp)\n        )\n        \n        // Render the component using the SDK's buildComponentView\n        pxpCheckout.buildComponentView(\n            component = component,\n            modifier = Modifier.fillMaxWidth()\n        )\n    }\n}\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-4-handle-the-component-lifecycle","__idx":6},"children":["Step 4: Handle the component lifecycle"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Components are automatically managed by the SDK, but you can manually control their lifecycle if needed:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"class PaymentActivity : ComponentActivity() {\n    private lateinit var pxpCheckout: PxpCheckout\n    private lateinit var newCardComponent: NewCardComponent\n    \n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        \n        setupPxpCheckout()\n        createComponents()\n        \n        setContent {\n            PaymentScreen()\n        }\n    }\n    \n    override fun onDestroy() {\n        super.onDestroy()\n        // Components are automatically cleaned up by the SDK\n        // Manual cleanup only needed for custom integrations\n    }\n    \n    override fun onSaveInstanceState(outState: Bundle) {\n        super.onSaveInstanceState(outState)\n        // Component state is automatically preserved by the SDK\n        // Additional state saving can be implemented here if needed\n    }\n    \n    override fun onRestoreInstanceState(savedInstanceState: Bundle) {\n        super.onRestoreInstanceState(savedInstanceState)\n        // Component state is automatically restored by the SDK\n        // Additional state restoration can be implemented here if needed\n    }\n    \n    private fun createComponents() {\n        newCardComponent = pxpCheckout.createComponent(\n            ComponentType.NEW_CARD,\n            NewCardComponentConfig()\n        )\n    }\n}\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"whats-next","__idx":7},"children":["What's next?"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customise-the-look-and-feel","__idx":8},"children":["Customise the look and feel"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can configure the appearance and behaviour of components to fit your brand. We've documented all configurable parameters for each component in the component-specific documentation."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val cardNumberConfig = CardNumberComponentConfig(\n    label = \"Card Number\",\n    placeholder = \"Enter card number\",\n    isRequired = true,\n    acceptedBrands = listOf(CardBrand.VISA, CardBrand.MASTERCARD, CardBrand.AMEX),\n    style = CardNumberStyle(\n        labelTextStyle = TextStyle(\n            fontSize = 16.sp,\n            color = Color(0xFF333333)\n        ),\n        inputTextStyle = TextStyle(\n            fontSize = 16.sp,\n            color = Color.Black\n        ),\n        borderColor = Color.LightGray,\n        focusedBorderColor = Color.Blue,\n        errorBorderColor = Color.Red\n    )\n)\n\nval cardNumber = pxpCheckout.createComponent<CardNumberComponent, CardNumberComponentConfig>(\n    ComponentType.CARD_NUMBER,\n    cardNumberConfig\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-event-handling","__idx":9},"children":["Add event handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Components emit events based on user interaction or validation. You can implement callback functions to handle these events and perform actions, such as displaying success and error messages."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val newCardConfig = NewCardComponentConfig(\n    fields = NewCardComponentConfig.Fields().apply {\n        cardNumber = CardNumberComponentConfig(\n            onChange = { event ->\n                Log.d(\"Payment\", \"Card number changed: ${event.value}\")\n            },\n            onValidationFailed = { result ->\n                Log.e(\"Payment\", \"Card number validation failed: ${result.message}\")\n                showFieldError(\"card_number\", result.message)\n            },\n            onCardBrandDetected = { event ->\n                Log.d(\"Payment\", \"Card brand detected: ${event.cardBrand.name}\")\n                updateCardBrandIcon(event.cardBrand)\n            }\n        )\n        \n        expiryDate = CardExpiryDateComponentConfig(\n            onChange = { event ->\n                Log.d(\"Payment\", \"Expiry date changed\")\n            },\n            onValidationPassed = { result ->\n                Log.d(\"Payment\", \"Expiry date validation passed\")\n                clearFieldError(\"expiry_date\")\n            }\n        )\n    },\n    \n    onValidation = { validationResults ->\n        Log.d(\"Payment\", \"Overall form validation\")\n        handleFormValidation(validationResults)\n    },\n    \n    submit = CardSubmitComponentConfig(\n        onPostAuthorisation = { result ->\n            when (result.state) {\n                AuthorisationState.AUTHORISED -> {\n                    Log.d(\"Payment\", \"Payment successful!\")\n                    navigateToSuccessScreen()\n                }\n                AuthorisationState.DECLINED -> {\n                    Log.e(\"Payment\", \"Payment declined\")\n                    showErrorDialog(\"Payment was declined. Please try again.\")\n                }\n            }\n        }\n    )\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"implement-analytics-tracking","__idx":10},"children":["Implement analytics tracking"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Components automatically trigger analytics events when significant actions or states occur. You can consume these events to gather real-time insights."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val sdkConfig = PxpSdkConfig(\n    // ... other configuration\n    analyticsEvent = { analyticsEvent ->\n        when (analyticsEvent) {\n            is ClickOncePaymentCompletionTimeAnalyticsEvent -> {\n                val completionTime = analyticsEvent.duration\n                if (completionTime > 5000) { // Alert if over 5s\n                    alertPerformanceTeam(analyticsEvent)\n                }\n            }\n            is ComponentErrorAnalyticsEvent -> {\n                Log.e(\"Analytics\", \"Component error: ${analyticsEvent.errorMessage}\")\n                crashlytics.recordException(Exception(analyticsEvent.errorMessage))\n            }\n            is PaymentAbandonmentAnalyticsEvent -> {\n                analytics.track(\"payment_abandoned\", mapOf(\n                    \"session_id\" to analyticsEvent.sessionId,\n                    \"component_type\" to analyticsEvent.componentType\n                ))\n            }\n        }\n    }\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-error-handling","__idx":11},"children":["Add error handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Error handling is crucial for payment components because they deal with sensitive financial data and complex validation rules."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"class PaymentActivity : ComponentActivity() {\n    \n    private fun createComponentsWithErrorHandling() {\n        try {\n            val component = pxpCheckout.createComponent<NewCardComponent, NewCardComponentConfig>(\n                ComponentType.NEW_CARD,\n                newCardConfig\n            )\n            \n            // Component created successfully\n            renderComponent(component)\n            \n        } catch (e: ComponentCreationException) {\n            Log.e(\"Payment\", \"Failed to create component: ${e.message}\")\n            showErrorMessage(\"Unable to load payment form. Please try again.\")\n        } catch (e: ValidationException) {\n            Log.e(\"Payment\", \"Validation error: ${e.message}\")\n            showErrorMessage(\"Invalid configuration. Please contact support.\")\n        } catch (e: Exception) {\n            Log.e(\"Payment\", \"Unexpected error: ${e.message}\")\n            showFallbackUI()\n        }\n    }\n    \n    private fun showErrorMessage(message: String) {\n        AlertDialog.Builder(this)\n            .setTitle(\"Payment Error\")\n            .setMessage(message)\n            .setPositiveButton(\"OK\") { dialog, _ ->\n                dialog.dismiss()\n            }\n            .show()\n    }\n    \n    private fun showFallbackUI() {\n        // Show alternative payment method or contact information\n    }\n}\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"complete-example","__idx":12},"children":["Complete example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here's a complete example of implementing a new card component in an Android Activity:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"package com.example.payment\n\nimport android.os.Bundle\nimport android.util.Log\nimport androidx.activity.ComponentActivity\nimport androidx.activity.compose.setContent\nimport androidx.compose.foundation.layout.*\nimport androidx.compose.material3.*\nimport androidx.compose.runtime.*\nimport androidx.compose.ui.Modifier\nimport androidx.compose.ui.graphics.Color\nimport androidx.compose.ui.text.TextStyle\nimport androidx.compose.ui.text.font.FontWeight\nimport androidx.compose.ui.unit.dp\nimport androidx.compose.ui.unit.sp\nimport com.pxp.PxpCheckout\nimport com.pxp.checkout.components.newcard.NewCardComponent\nimport com.pxp.checkout.components.newcard.NewCardComponentConfig\nimport com.pxp.checkout.components.cardnumber.CardNumberComponentConfig\nimport com.pxp.checkout.components.cardexpirydate.CardExpiryDateComponentConfig\nimport com.pxp.checkout.components.cardcvc.CardCvcComponentConfig\nimport com.pxp.checkout.components.cardholdername.CardHolderNameComponentConfig\nimport com.pxp.checkout.components.cardsubmit.CardSubmitComponentConfig\nimport com.pxp.checkout.config.*\nimport com.pxp.checkout.types.*\nimport java.time.Instant\nimport java.util.*\n\nclass PaymentActivity : ComponentActivity() {\n    private lateinit var pxpCheckout: PxpCheckout\n    private lateinit var newCardComponent: NewCardComponent\n    \n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        \n        setupPxpCheckout()\n        createNewCardComponent()\n        \n        setContent {\n            PaymentScreen()\n        }\n    }\n    \n    private fun setupPxpCheckout() {\n        val sdkConfig = PxpSdkConfig(\n            environment = Environment.TEST,\n            session = SessionConfig(\n                sessionId = \"session-${System.currentTimeMillis()}\",\n                sessionData = \"your-session-data\"\n            ),\n            ownerId = \"Unity\",\n            ownerType = \"MerchantGroup\",\n            merchantShopperId = \"shopper-123\",\n            transactionData = TransactionData(\n                currency = CurrencyType.USD,\n                amount = 10.0,\n                entryType = EntryType.Ecom,\n                intent = IntentType.Authorisation,\n                merchantTransactionId = \"txn-${System.currentTimeMillis()}\",\n                merchantTransactionDate = { Instant.now().toString() }\n            ),\n            clientId = \"your-client-id\",\n            analyticsEvent = { analyticsEvent ->\n                handleAnalyticsEvent(analyticsEvent)\n            }\n        )\n        \n        pxpCheckout = PxpCheckout.builder()\n            .withConfig(sdkConfig)\n            .withContext(this)\n            .withDebugMode(true)\n            .build()\n    }\n    \n    private fun createNewCardComponent() {\n        val fields = NewCardComponentConfig.Fields().apply {\n            cardNumber = CardNumberComponentConfig(\n                label = \"Card Number\",\n                placeholder = \"1234 5678 9012 3456\",\n                isRequired = true,\n                acceptedBrands = listOf(CardBrand.VISA, CardBrand.MASTERCARD, CardBrand.AMEX),\n                style = CardNumberStyle(\n                    labelTextStyle = TextStyle(\n                        fontSize = 14.sp,\n                        fontWeight = FontWeight.Medium,\n                        color = Color(0xFF333333)\n                    ),\n                    inputTextStyle = TextStyle(\n                        fontSize = 16.sp,\n                        color = Color.Black\n                    ),\n                    borderColor = Color(0xFFDDDDDD),\n                    focusedBorderColor = Color(0xFF4CAF50),\n                    errorBorderColor = Color.Red\n                ),\n                onCardBrandDetected = { event ->\n                    Log.d(\"Payment\", \"Card brand detected: ${event.cardBrand.name}\")\n                    trackAnalyticsEvent(\"card_brand_detected\", mapOf(\"brand\" to event.cardBrand.name))\n                },\n                onChange = { event ->\n                    Log.d(\"Payment\", \"Card number changed\")\n                },\n                onValidationFailed = { result ->\n                    Log.e(\"Payment\", \"Card number validation failed: ${result.message}\")\n                }\n            )\n            \n            expiryDate = CardExpiryDateComponentConfig(\n                label = \"Expiry Date\",\n                placeholder = \"MM/YY\",\n                isRequired = true,\n                style = CardExpiryDateStyle(\n                    labelTextStyle = TextStyle(\n                        fontSize = 14.sp,\n                        fontWeight = FontWeight.Medium,\n                        color = Color(0xFF333333)\n                    ),\n                    inputTextStyle = TextStyle(\n                        fontSize = 16.sp,\n                        color = Color.Black\n                    ),\n                    borderColor = Color(0xFFDDDDDD),\n                    focusedBorderColor = Color(0xFF4CAF50),\n                    errorBorderColor = Color.Red\n                )\n            )\n            \n            cvc = CardCvcComponentConfig(\n                label = \"Security Code\",\n                placeholder = \"123\",\n                isRequired = true,\n                style = CardCvcStyle(\n                    labelTextStyle = TextStyle(\n                        fontSize = 14.sp,\n                        fontWeight = FontWeight.Medium,\n                        color = Color(0xFF333333)\n                    ),\n                    inputTextStyle = TextStyle(\n                        fontSize = 16.sp,\n                        color = Color.Black\n                    ),\n                    borderColor = Color(0xFFDDDDDD),\n                    focusedBorderColor = Color(0xFF4CAF50),\n                    errorBorderColor = Color.Red\n                )\n            )\n            \n            holderName = CardHolderNameComponentConfig(\n                label = \"Cardholder Name\",\n                placeholder = \"John Doe\",\n                isRequired = true,\n                style = CardHolderNameStyle(\n                    labelTextStyle = TextStyle(\n                        fontSize = 14.sp,\n                        fontWeight = FontWeight.Medium,\n                        color = Color(0xFF333333)\n                    ),\n                    inputTextStyle = TextStyle(\n                        fontSize = 16.sp,\n                        color = Color.Black\n                    ),\n                    borderColor = Color(0xFFDDDDDD),\n                    focusedBorderColor = Color(0xFF4CAF50),\n                    errorBorderColor = Color.Red\n                ),\n                onChange = { event ->\n                    trackAnalyticsEvent(\"cardholder_name_changed\", mapOf(\"length\" to event.value.length))\n                }\n            )\n        }\n        \n        val config = NewCardComponentConfig(\n            fields = fields,\n            style = NewCardStyle(\n                fieldSpacing = 16.dp,\n                sectionSpacing = 24.dp,\n                backgroundColor = Color.White,\n                cornerRadius = 8.dp\n            ),\n            submit = CardSubmitComponentConfig(\n                buttonText = \"Pay $10.00\",\n                loadingText = \"Processing...\",\n                style = CardSubmitStyle(\n                    backgroundColor = Color(0xFF4CAF50),\n                    textColor = Color.White,\n                    cornerRadius = 6.dp,\n                    textStyle = TextStyle(\n                        fontSize = 16.sp,\n                        fontWeight = FontWeight.Bold\n                    )\n                ),\n                onPreAuthorisation = { data ->\n                    TransactionInitiationData(\n                        psd2Data = null, // Set to Psd2Data(scaExemption = ...) if needed\n                        riskScreeningData = RiskScreeningData(\n                            performRiskScreening = true,\n                            userIp = \"192.168.1.100\",\n                            account = RiskScreeningAccount(\n                                id = \"user_12345678\",\n                                creationDateTime = \"2024-01-15T10:30:00.000Z\"\n                            ),\n                            items = listOf(\n                                RiskScreeningItem(\n                                    price = 10.00,\n                                    quantity = 1,\n                                    category = \"General\"\n                                )\n                            ),\n                            fulfillments = listOf(\n                                RiskScreeningFulfillment(\n                                    type = FulfillmentType.SHIPPED,\n                                    recipientPerson = RiskScreeningRecipientPerson(\n                                        phoneNumber = \"+1234567890\"\n                                    )\n                                )\n                            )\n                        )\n                    )\n                },\n                onPostAuthorisation = { result ->\n                    handlePaymentResult(result)\n                },\n                onSubmitError = { error ->\n                    handlePaymentError(error)\n                }\n            ),\n            onValidation = { validationResults ->\n                handleFormValidation(validationResults)\n            }\n        )\n        \n        newCardComponent = pxpCheckout.createComponent(\n            ComponentType.NEW_CARD,\n            config\n        )\n    }\n    \n    @Composable\n    fun PaymentScreen() {\n        Column(\n            modifier = Modifier\n                .fillMaxSize()\n                .padding(16.dp)\n        ) {\n            Card(\n                modifier = Modifier.fillMaxWidth(),\n                colors = CardDefaults.cardColors(containerColor = Color.White),\n                elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)\n            ) {\n                Column(\n                    modifier = Modifier.padding(24.dp)\n                ) {\n                    Text(\n                        text = \"Complete your payment\",\n                        style = MaterialTheme.typography.headlineMedium,\n                        fontWeight = FontWeight.Bold,\n                        color = Color(0xFF333333),\n                        modifier = Modifier.padding(bottom = 24.dp)\n                    )\n                    \n                    // Render the new card component\n                    pxpCheckout.buildComponentView(\n                        component = newCardComponent,\n                        modifier = Modifier.fillMaxWidth()\n                    )\n                }\n            }\n        }\n    }\n    \n    private fun handleAnalyticsEvent(analyticsEvent: BaseAnalyticsEvent) {\n        Log.d(\"Analytics\", \"Event: ${analyticsEvent.eventName}\")\n        \n        when (analyticsEvent) {\n            is ComponentLifecycleAnalyticsEvent -> {\n                trackAnalyticsEvent(\"component_lifecycle\", mapOf(\n                    \"event_type\" to analyticsEvent.eventType.name,\n                    \"component_id\" to analyticsEvent.componentId,\n                    \"component_type\" to analyticsEvent.componentType\n                ))\n            }\n            is ErrorTracker.ComponentErrorEvent -> {\n                Log.e(\"Analytics\", \"Component error: ${analyticsEvent.message}\")\n                trackAnalyticsEvent(\"component_error\", mapOf(\n                    \"error_code\" to analyticsEvent.code,\n                    \"error_message\" to analyticsEvent.message,\n                    \"component_id\" to analyticsEvent.componentId\n                ))\n            }\n            is ErrorTracker.ComponentValidationEvent -> {\n                trackAnalyticsEvent(\"component_validation\", mapOf(\n                    \"component_id\" to analyticsEvent.componentId,\n                    \"is_valid\" to analyticsEvent.isValid,\n                    \"validation_message\" to analyticsEvent.validationMessage\n                ))\n            }\n        }\n    }\n    \n    private fun handlePaymentResult(result: PaymentResult) {\n        when (result.status) {\n            PaymentStatus.AUTHORISED -> {\n                Log.d(\"Payment\", \"Payment successful!\")\n                trackAnalyticsEvent(\"payment_success\", mapOf(\"amount\" to 10.0))\n                showSuccessDialog(\"Payment successful!\")\n            }\n            PaymentStatus.DECLINED -> {\n                Log.e(\"Payment\", \"Payment declined\")\n                trackAnalyticsEvent(\"payment_failed\", mapOf(\"reason\" to \"declined\"))\n                showErrorDialog(\"Payment was declined. Please try again.\")\n            }\n            PaymentStatus.ERROR -> {\n                Log.e(\"Payment\", \"Payment error: ${result.error}\")\n                trackAnalyticsEvent(\"payment_failed\", mapOf(\"reason\" to \"error\"))\n                showErrorDialog(\"Payment failed. Please try again.\")\n            }\n        }\n    }\n    \n    private fun handlePaymentError(error: PaymentError) {\n        Log.e(\"Payment\", \"Payment error: ${error.message}\")\n        trackAnalyticsEvent(\"payment_error\", mapOf(\n            \"error_code\" to error.code,\n            \"error_message\" to error.message\n        ))\n        showErrorDialog(\"An error occurred while processing your payment. Please try again.\")\n    }\n    \n    private fun handleFormValidation(validationResults: List<ValidationResult>) {\n        val allValid = validationResults.all { it.isValid }\n        Log.d(\"Validation\", \"Form validation complete. All valid: $allValid\")\n        \n        if (!allValid) {\n            val errors = validationResults.filter { !it.isValid }\n            errors.forEach { result ->\n                Log.w(\"Validation\", \"Field '${result.fieldName}' validation failed: ${result.message}\")\n            }\n        }\n    }\n    \n    private fun showSuccessDialog(message: String) {\n        androidx.appcompat.app.AlertDialog.Builder(this)\n            .setTitle(\"Success\")\n            .setMessage(message)\n            .setPositiveButton(\"OK\") { dialog, _ ->\n                dialog.dismiss()\n                // Navigate to success screen or finish activity\n            }\n            .show()\n    }\n    \n    private fun showErrorDialog(message: String) {\n        androidx.appcompat.app.AlertDialog.Builder(this)\n            .setTitle(\"Payment Error\")\n            .setMessage(message)\n            .setPositiveButton(\"OK\") { dialog, _ ->\n                dialog.dismiss()\n            }\n            .show()\n    }\n    \n    private fun trackAnalyticsEvent(eventName: String, properties: Map<String, Any>) {\n        Log.d(\"Analytics\", \"Custom event: $eventName with properties: $properties\")\n        // Integrate with your analytics platform (Firebase, Mixpanel, etc.)\n    }\n}\n","lang":"kotlin"},"children":[]}]},"headings":[{"value":"Implementation","id":"implementation","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Before you start","id":"before-you-start","depth":2},{"value":"Step 1: Initialise the SDK","id":"step-1-initialise-the-sdk","depth":2},{"value":"Step 2: Create a component","id":"step-2-create-a-component","depth":2},{"value":"Step 3: Render the component","id":"step-3-render-the-component","depth":2},{"value":"Step 4: Handle the component lifecycle","id":"step-4-handle-the-component-lifecycle","depth":2},{"value":"What's next?","id":"whats-next","depth":2},{"value":"Customise the look and feel","id":"customise-the-look-and-feel","depth":3},{"value":"Add event handling","id":"add-event-handling","depth":3},{"value":"Implement analytics tracking","id":"implement-analytics-tracking","depth":3},{"value":"Add error handling","id":"add-error-handling","depth":3},{"value":"Complete example","id":"complete-example","depth":2}],"frontmatter":{"seo":{"title":"Implementation"}},"lastModified":"2026-05-19T10:00:02.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/android/card/implementation","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}