Amount component

Display the payout amount to customers in your Android app.

Overview

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.

When to use

Use the amount component when:

You want to display the payout amount before the customer confirms.
You need a consistent display format for payout amounts.
You want to show the amount alongside receiver details in the withdrawal flow.

Component creation

Create the amount component using the SDK's factory method:

import com.pxp.checkout.components.payoutamount.PayoutAmountComponentConfig
import com.pxp.checkout.types.ComponentType

val amountComponent = pxpCheckout.createComponent(
    type = ComponentType.PAYOUT_AMOUNT,
    config = PayoutAmountComponentConfig(
        label = "Withdrawal Amount"
    )
)

Configuration options

PayoutAmountComponentConfig

Property	Description
`label` String	The label displayed above the amount. Customise it to match your app's terminology. Defaults to `"Amount"`.
`validationMessages` PayoutAmountValidationMessages	Custom validation messages used for internal validation. These are typically not shown to users in read-only display. Defaults to `PayoutAmountValidationMessages()`.
`style` PayoutAmountStyle?	Custom styling configuration. Customise colours, typography, and spacing. Defaults to `null`.

The amount and currency are automatically retrieved from PxpSdkConfig.transactionData.amount and PxpSdkConfig.transactionData.currency. You don't need to pass these values to the component.

PayoutAmountValidationMessages

Property	Description
`invalidNumeric` String	Error message for non-numeric values. Defaults to `"Amount must be a valid number"`.
`amountMustBePositive` String	Error message for zero or negative amounts. Defaults to `"Amount must be greater than zero"`.

Rendering the component

Render the component using Jetpack Compose:

@Composable
fun PayoutScreen() {
    val amountComponent = remember {
        pxpCheckout.createComponent(
            type = ComponentType.PAYOUT_AMOUNT,
            config = PayoutAmountComponentConfig(
                label = "Withdrawal Amount"
            )
        )
    }
    
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        pxpCheckout.buildComponentView(
            component = amountComponent,
            modifier = Modifier.fillMaxWidth()
        )
    }
}

Complete example

Here's a complete example showing the amount component in a payout flow:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.pxp.checkout.PxpCheckout
import com.pxp.checkout.components.payoutamount.PayoutAmountComponentConfig
import com.pxp.checkout.models.*
import com.pxp.checkout.types.ComponentType
import java.util.UUID

class PayoutAmountActivity : ComponentActivity() {
    
    private lateinit var pxpCheckout: PxpCheckout
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // Initialize SDK with payout configuration
        pxpCheckout = PxpCheckout.builder()
            .withConfig(
                PxpSdkConfig(
                    environment = Environment.TEST,
                    session = sessionData,
                    ownerId = "Unity",
                    ownerType = "MerchantGroup",
                    clientId = "your-client-id",
                    transactionData = TransactionData(
                        amount = 150.0,  // Amount in dollars
                        currency = "USD",
                        merchant = "your-merchant-id",
                        entryType = EntryType.Ecom,
                        intent = TransactionIntentData(paypal = IntentType.Payout),
                        merchantTransactionId = UUID.randomUUID().toString(),
                        merchantTransactionDate = { System.currentTimeMillis() }
                    ),
                    paypalConfig = PaypalConfig(
                        payout = PayoutConfig(
                            proceedPayoutWithSdk = true,
                            paypalWallet = PayPalPayOutWalletConfig(
                                email = "customer@example.com",
                                payerId = "PAYER_ID_XXX"
                            )
                        )
                    )
                )
            )
            .withContext(this)
            .build()
        
        setContent {
            MaterialTheme {
                PayoutAmountScreen()
            }
        }
    }
    
    @Composable
    fun PayoutAmountScreen() {
        // Create amount component
        val amountComponent = remember {
            pxpCheckout.createComponent(
                type = ComponentType.PAYOUT_AMOUNT,
                config = PayoutAmountComponentConfig(
                    label = "You're withdrawing"
                )
            )
        }
        
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp),
                verticalArrangement = Arrangement.spacedBy(16.dp)
            ) {
                Text(
                    text = "Withdrawal Details",
                    style = MaterialTheme.typography.headlineMedium
                )
                
                Card(
                    modifier = Modifier.fillMaxWidth(),
                    colors = CardDefaults.cardColors(
                        containerColor = MaterialTheme.colorScheme.surfaceVariant
                    )
                ) {
                    Column(
                        modifier = Modifier.padding(16.dp)
                    ) {
                        // Amount component
                        pxpCheckout.buildComponentView(
                            component = amountComponent,
                            modifier = Modifier.fillMaxWidth()
                        )
                    }
                }
                
                Text(
                    text = "This amount will be sent to your PayPal account",
                    style = MaterialTheme.typography.bodySmall,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
            }
        }
    }
}

Styling

Customise the component appearance using the style property:

val amountConfig = PayoutAmountComponentConfig(
    label = "Withdrawal Amount",
    style = PayoutAmountStyle(
        // Add custom styling properties
    )
)

Best practices

Clear labeling

Use descriptive labels that match your app's terminology:

// Good examples
PayoutAmountComponentConfig(label = "Withdrawal amount")
PayoutAmountComponentConfig(label = "You're withdrawing")
PayoutAmountComponentConfig(label = "Payout amount")

// Avoid vague labels
PayoutAmountComponentConfig(label = "Amount")  // Too generic

Consistent placement

Place the amount component at the top of your payout form for clarity:

@Composable
fun PayoutForm() {
    Column {
        // Amount first for visibility
        pxpCheckout.buildComponentView(amountComponent)
        
        Divider()
        
        // Then receiver details
        pxpCheckout.buildComponentView(receiverComponent)
        
        Divider()
        
        // Finally submission button
        pxpCheckout.buildComponentView(submitComponent)
    }
}

Proper SDK initialisation

Ensure your SDK is initialised with a valid amount and currency:

// Correct initialisation
transactionData = TransactionData(
    amount = 100.0,      // Valid positive amount
    currency = "USD",    // Valid ISO currency code
    intent = TransactionIntentData(paypal = IntentType.Payout)
)

// Will cause validation errors
transactionData = TransactionData(
    amount = 0.0,        // Invalid: must be > 0
    currency = "INVALID", // Invalid: not a valid ISO code
    intent = TransactionIntentData(paypal = IntentType.Payout)
)

Common use cases

Withdrawal flow with amount display

@Composable
fun WithdrawalFlow() {
    val amountComponent = remember { createAmountComponent() }
    val receiverComponent = remember { createReceiverComponent() }
    val submitComponent = remember { createSubmitComponent() }
    
    Card(modifier = Modifier.fillMaxWidth()) {
        Column(
            modifier = Modifier.padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            Text(
                text = "Review withdrawal",
                style = MaterialTheme.typography.titleMedium
            )
            
            pxpCheckout.buildComponentView(
                component = amountComponent,
                modifier = Modifier.fillMaxWidth()
            )
            
            Divider()
            
            pxpCheckout.buildComponentView(
                component = receiverComponent,
                modifier = Modifier.fillMaxWidth()
            )
            
            Divider()
            
            pxpCheckout.buildComponentView(
                component = submitComponent,
                modifier = Modifier.fillMaxWidth()
            )
        }
    }
}