{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","admonition"]},"type":"markdown"},"seo":{"title":"Amount component","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":"amount-component","__idx":0},"children":["Amount component"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display the payout amount to customers in your Android app."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The payout amount component is a read-only display component that shows the payout amount to customers. It automatically retrieves the amount and currency from the SDK configuration's transaction data, ensuring consistency across your payout flow."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"when-to-use","__idx":2},"children":["When to use"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the amount component when:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["You want to display the payout amount before the customer confirms."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["You need a consistent display format for payout amounts."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["You want to show the amount alongside receiver details in the withdrawal flow."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"component-creation","__idx":3},"children":["Component creation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create the amount component using the SDK's factory method:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"import com.pxp.checkout.components.payoutamount.PayoutAmountComponentConfig\nimport com.pxp.checkout.types.ComponentType\n\nval amountComponent = pxpCheckout.createComponent(\n    type = ComponentType.PAYOUT_AMOUNT,\n    config = PayoutAmountComponentConfig(\n        label = \"Withdrawal Amount\"\n    )\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuration-options","__idx":4},"children":["Configuration options"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"payoutamountcomponentconfig","__idx":5},"children":["PayoutAmountComponentConfig"]},{"$$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":["label"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The label displayed above the amount. Customise it to match your app's terminology. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Amount\""]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validationMessages"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["PayoutAmountValidationMessages"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom validation messages used for internal validation. These are typically not shown to users in read-only display. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayoutAmountValidationMessages()"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["PayoutAmountStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom styling configuration. Customise colours, typography, and spacing. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The amount and currency are automatically retrieved from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PxpSdkConfig.transactionData.amount"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PxpSdkConfig.transactionData.currency"]},". You don't need to pass these values to the component."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"payoutamountvalidationmessages","__idx":6},"children":["PayoutAmountValidationMessages"]},{"$$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":["invalidNumeric"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Error message for non-numeric values. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Amount must be a valid number\""]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["amountMustBePositive"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Error message for zero or negative amounts. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Amount must be greater than zero\""]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"rendering-the-component","__idx":7},"children":["Rendering the component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Render the component using Jetpack Compose:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"@Composable\nfun PayoutScreen() {\n    val amountComponent = remember {\n        pxpCheckout.createComponent(\n            type = ComponentType.PAYOUT_AMOUNT,\n            config = PayoutAmountComponentConfig(\n                label = \"Withdrawal Amount\"\n            )\n        )\n    }\n    \n    Column(\n        modifier = Modifier\n            .fillMaxWidth()\n            .padding(16.dp)\n    ) {\n        pxpCheckout.buildComponentView(\n            component = amountComponent,\n            modifier = Modifier.fillMaxWidth()\n        )\n    }\n}\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"complete-example","__idx":8},"children":["Complete example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here's a complete example showing the amount component in a payout flow:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"import android.os.Bundle\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.unit.dp\nimport com.pxp.checkout.PxpCheckout\nimport com.pxp.checkout.components.payoutamount.PayoutAmountComponentConfig\nimport com.pxp.checkout.models.*\nimport com.pxp.checkout.types.ComponentType\nimport java.util.UUID\n\nclass PayoutAmountActivity : ComponentActivity() {\n    \n    private lateinit var pxpCheckout: PxpCheckout\n    \n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        \n        // Initialise SDK with payout configuration\n        pxpCheckout = PxpCheckout.builder()\n            .withConfig(\n                PxpSdkConfig(\n                    environment = Environment.TEST,\n                    session = sessionData,\n                    ownerId = \"Unity\",\n                    ownerType = \"MerchantGroup\",\n                    clientId = \"your-client-id\",\n                    transactionData = TransactionData(\n                        amount = 150.0,  // Amount in dollars\n                        currency = \"USD\",\n                        merchant = \"your-merchant-id\",\n                        entryType = EntryType.Ecom,\n                        intent = TransactionIntentData(paypal = IntentType.Payout),\n                        merchantTransactionId = UUID.randomUUID().toString(),\n                        merchantTransactionDate = { System.currentTimeMillis() }\n                    ),\n                    paypalConfig = PaypalConfig(\n                        payout = PayoutConfig(\n                            proceedPayoutWithSdk = true,\n                            paypalWallet = PayPalPayOutWalletConfig(\n                                email = \"customer@example.com\",\n                                payerId = \"PAYER_ID_XXX\"\n                            )\n                        )\n                    )\n                )\n            )\n            .withContext(this)\n            .build()\n        \n        setContent {\n            MaterialTheme {\n                PayoutAmountScreen()\n            }\n        }\n    }\n    \n    @Composable\n    fun PayoutAmountScreen() {\n        // Create amount component\n        val amountComponent = remember {\n            pxpCheckout.createComponent(\n                type = ComponentType.PAYOUT_AMOUNT,\n                config = PayoutAmountComponentConfig(\n                    label = \"You're withdrawing\"\n                )\n            )\n        }\n        \n        Surface(\n            modifier = Modifier.fillMaxSize(),\n            color = MaterialTheme.colorScheme.background\n        ) {\n            Column(\n                modifier = Modifier\n                    .fillMaxSize()\n                    .padding(16.dp),\n                verticalArrangement = Arrangement.spacedBy(16.dp)\n            ) {\n                Text(\n                    text = \"Withdrawal Details\",\n                    style = MaterialTheme.typography.headlineMedium\n                )\n                \n                Card(\n                    modifier = Modifier.fillMaxWidth(),\n                    colors = CardDefaults.cardColors(\n                        containerColor = MaterialTheme.colorScheme.surfaceVariant\n                    )\n                ) {\n                    Column(\n                        modifier = Modifier.padding(16.dp)\n                    ) {\n                        // Amount component\n                        pxpCheckout.buildComponentView(\n                            component = amountComponent,\n                            modifier = Modifier.fillMaxWidth()\n                        )\n                    }\n                }\n                \n                Text(\n                    text = \"This amount will be sent to your PayPal account\",\n                    style = MaterialTheme.typography.bodySmall,\n                    color = MaterialTheme.colorScheme.onSurfaceVariant\n                )\n            }\n        }\n    }\n}\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling","__idx":9},"children":["Styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customise the component appearance using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style"]}," property:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val amountConfig = PayoutAmountComponentConfig(\n    label = \"Withdrawal Amount\",\n    style = PayoutAmountStyle(\n        // Add custom styling properties\n    )\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices","__idx":10},"children":["Best practices"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"clear-labelling","__idx":11},"children":["Clear labelling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use descriptive labels that match your app's terminology:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"// Good examples\nPayoutAmountComponentConfig(label = \"Withdrawal amount\")\nPayoutAmountComponentConfig(label = \"You're withdrawing\")\nPayoutAmountComponentConfig(label = \"Payout amount\")\n\n// Avoid vague labels\nPayoutAmountComponentConfig(label = \"Amount\")  // Too generic\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"consistent-placement","__idx":12},"children":["Consistent placement"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Place the amount component at the top of your payout form for clarity:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"@Composable\nfun PayoutForm() {\n    Column {\n        // Amount first for visibility\n        pxpCheckout.buildComponentView(amountComponent)\n        \n        Divider()\n        \n        // Then receiver details\n        pxpCheckout.buildComponentView(receiverComponent)\n        \n        Divider()\n        \n        // Finally submission button\n        pxpCheckout.buildComponentView(submitComponent)\n    }\n}\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"proper-sdk-initialisation","__idx":13},"children":["Proper SDK initialisation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Ensure your SDK is initialised with a valid amount and currency:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"// Correct initialisation\ntransactionData = TransactionData(\n    amount = 100.0,      // Valid positive amount\n    currency = \"USD\",    // Valid ISO currency code\n    intent = TransactionIntentData(paypal = IntentType.Payout)\n)\n\n// Will cause validation errors\ntransactionData = TransactionData(\n    amount = 0.0,        // Invalid: must be > 0\n    currency = \"INVALID\", // Invalid: not a valid ISO code\n    intent = TransactionIntentData(paypal = IntentType.Payout)\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"common-use-cases","__idx":14},"children":["Common use cases"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"withdrawal-flow-with-amount-display","__idx":15},"children":["Withdrawal flow with amount display"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"@Composable\nfun WithdrawalFlow() {\n    val amountComponent = remember { createAmountComponent() }\n    val receiverComponent = remember { createReceiverComponent() }\n    val submitComponent = remember { createSubmitComponent() }\n    \n    Card(modifier = Modifier.fillMaxWidth()) {\n        Column(\n            modifier = Modifier.padding(16.dp),\n            verticalArrangement = Arrangement.spacedBy(12.dp)\n        ) {\n            Text(\n                text = \"Review withdrawal\",\n                style = MaterialTheme.typography.titleMedium\n            )\n            \n            pxpCheckout.buildComponentView(\n                component = amountComponent,\n                modifier = Modifier.fillMaxWidth()\n            )\n            \n            Divider()\n            \n            pxpCheckout.buildComponentView(\n                component = receiverComponent,\n                modifier = Modifier.fillMaxWidth()\n            )\n            \n            Divider()\n            \n            pxpCheckout.buildComponentView(\n                component = submitComponent,\n                modifier = Modifier.fillMaxWidth()\n            )\n        }\n    }\n}\n","lang":"kotlin"},"children":[]}]},"headings":[{"value":"Amount component","id":"amount-component","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"When to use","id":"when-to-use","depth":2},{"value":"Component creation","id":"component-creation","depth":2},{"value":"Configuration options","id":"configuration-options","depth":2},{"value":"PayoutAmountComponentConfig","id":"payoutamountcomponentconfig","depth":3},{"value":"PayoutAmountValidationMessages","id":"payoutamountvalidationmessages","depth":3},{"value":"Rendering the component","id":"rendering-the-component","depth":2},{"value":"Complete example","id":"complete-example","depth":2},{"value":"Styling","id":"styling","depth":2},{"value":"Best practices","id":"best-practices","depth":2},{"value":"Clear labelling","id":"clear-labelling","depth":3},{"value":"Consistent placement","id":"consistent-placement","depth":3},{"value":"Proper SDK initialisation","id":"proper-sdk-initialisation","depth":3},{"value":"Common use cases","id":"common-use-cases","depth":2},{"value":"Withdrawal flow with amount display","id":"withdrawal-flow-with-amount-display","depth":3}],"frontmatter":{"seo":{"title":"Amount component"}},"lastModified":"2026-02-26T12:14:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/android/paypal/payouts/amount-component","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}