PayPal receiver component

Display stored PayPal account details to customers in your Android app.

Overview

The PayPal receiver component is a read-only display component that shows the customer's stored PayPal email address. It automatically retrieves the email from the SDK configuration's payout wallet data and provides optional masking functionality for privacy.

When to use

Use the PayPal receiver component when:

You're implementing the withdrawal flow for returning customers.
You have the customer's PayPal email and payer ID stored.
You want to display which PayPal account will receive the payout.
You want to provide privacy with email masking options.

Component creation

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

import com.pxp.checkout.components.paypalpayoutreceiver.PaypalPayoutReceiverComponentConfig
import com.pxp.checkout.types.ComponentType

val receiverComponent = pxpCheckout.createComponent(
    type = ComponentType.PAYPAL_PAYOUT_RECEIVER,
    config = PaypalPayoutReceiverComponentConfig(
        label = "PayPal Account",
        showMaskToggle = true,
        applyMask = true
    )
)

Configuration options

PaypalPayoutReceiverComponentConfig

Property	Description
`label` String	The label displayed above the email. Customise it to match your app's terminology. Defaults to `"Receiver"`.
`showMaskToggle` Boolean	Whether to show a toggle button to mask/unmask the email. Displays an eye icon button. Allows customers to show or hide their full email. Useful for privacy in public settings. Defaults to `true`.
`applyMask` Boolean	Whether to start with the email masked. When `true`, email displays as `c***@example.com`. When `false`, email displays as `customer@example.com`. Only applies if `showMaskToggle` is `true`. Defaults to `true`.
`placeholder` String	The placeholder text. Not used in read-only display mode. Included for configuration completeness. Defaults to `""`.
`visibilityOnIcon` Int	The resource ID for the visibility on icon, which is shown when the email is visible. Used when `showMaskToggle` is `true`. Defaults to `R.drawable.ic_visibility`.
`visibilityOffIcon` Int	The rsource ID for the visibility off icon, which is shown when the email is masked. Used when `showMaskToggle` is `true`. Defaults to `R.drawable.ic_visibility_off`.
`validationMessages` PaypalPayoutReceiverValidationMessages	Custom validation messages. Customise the error messages for an invalid email format. Defaults to `PaypalPayoutReceiverValidationMessages()`.
`style` PaypalPayoutReceiverStyle?	Custom styling configuration. Customise colours, typography, and spacing. Uses default PayPal styling if not provided. Defaults to `null`.

The PayPal email is automatically retrieved from PxpSdkConfig.paypalConfig.payout.paypalWallet.email. You don't need to pass the email to the component.

PaypalPayoutReceiverValidationMessages

Property	Description
`invalidEmailFormat` String	Error message for invalid email format. Defaults to `"Please enter a valid email address"`.

Rendering the component

Render the component using Jetpack Compose:

@Composable
fun PayoutScreen() {
    val receiverComponent = remember {
        pxpCheckout.createComponent(
            type = ComponentType.PAYPAL_PAYOUT_RECEIVER,
            config = PaypalPayoutReceiverComponentConfig(
                label = "Sending to",
                showMaskToggle = true,
                applyMask = true
            )
        )
    }
    
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        pxpCheckout.buildComponentView(
            component = receiverComponent,
            modifier = Modifier.fillMaxWidth()
        )
    }
}

Complete example

Here's a complete example showing the receiver component in a withdrawal 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.components.paypalpayoutreceiver.PaypalPayoutReceiverComponentConfig
import com.pxp.checkout.components.payoutsubmission.PayoutSubmissionComponentConfig
import com.pxp.checkout.models.*
import com.pxp.checkout.models.payout.PrePayoutSubmitResult
import com.pxp.checkout.types.ComponentType
import java.util.UUID

class PayPalReceiverActivity : ComponentActivity() {
    
    private lateinit var pxpCheckout: PxpCheckout
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // Get stored customer wallet
        val customerWallet = getStoredCustomerWallet()
        
        // Initialise SDK with stored wallet details
        pxpCheckout = PxpCheckout.builder()
            .withConfig(
                PxpSdkConfig(
                    environment = Environment.TEST,
                    session = sessionData,
                    ownerId = "Unity",
                    ownerType = "MerchantGroup",
                    clientId = "your-client-id",
                    transactionData = TransactionData(
                        amount = 150.0,
                        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 = customerWallet.email,  // Retrieved from storage
                                payerId = customerWallet.payerId
                            )
                        )
                    )
                )
            )
            .withContext(this)
            .build()
        
        setContent {
            MaterialTheme {
                WithdrawalScreen()
            }
        }
    }
    
    @Composable
    fun WithdrawalScreen() {
        // Create components
        val amountComponent = remember {
            pxpCheckout.createComponent(
                type = ComponentType.PAYOUT_AMOUNT,
                config = PayoutAmountComponentConfig(
                    label = "Withdrawal Amount"
                )
            )
        }
        
        val receiverComponent = remember {
            pxpCheckout.createComponent(
                type = ComponentType.PAYPAL_PAYOUT_RECEIVER,
                config = PaypalPayoutReceiverComponentConfig(
                    label = "Sending to",
                    showMaskToggle = true,
                    applyMask = true  // Start with masked email for privacy
                )
            )
        }
        
        val submitConfig = remember {
            PayoutSubmissionComponentConfig(
                recipientWallet = "Paypal",
                onPrePayoutSubmit = {
                    val confirmed = showConfirmationDialog()
                    PrePayoutSubmitResult(isApproved = confirmed)
                },
                onPostPayout = { result ->
                    navigateToSuccessScreen(result.merchantTransactionId)
                }
            )
        }
        
        val submitComponent = remember {
            pxpCheckout.createComponent(
                type = ComponentType.PAYOUT_SUBMISSION,
                config = submitConfig
            )
        }
        
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp),
                verticalArrangement = Arrangement.spacedBy(16.dp)
            ) {
                Text(
                    text = "Withdraw funds",
                    style = MaterialTheme.typography.headlineMedium
                )
                
                Text(
                    text = "Review your withdrawal details below",
                    style = MaterialTheme.typography.bodyMedium,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
                
                Card(
                    modifier = Modifier.fillMaxWidth(),
                    colors = CardDefaults.cardColors(
                        containerColor = MaterialTheme.colorScheme.surfaceVariant
                    )
                ) {
                    Column(
                        modifier = Modifier.padding(16.dp),
                        verticalArrangement = Arrangement.spacedBy(12.dp)
                    ) {
                        // Amount
                        pxpCheckout.buildComponentView(
                            component = amountComponent,
                            modifier = Modifier.fillMaxWidth()
                        )
                        
                        Divider()
                        
                        // PayPal receiver with masking
                        pxpCheckout.buildComponentView(
                            component = receiverComponent,
                            modifier = Modifier.fillMaxWidth()
                        )
                        
                        Divider()
                        
                        // Submit button
                        pxpCheckout.buildComponentView(
                            component = submitComponent,
                            modifier = Modifier.fillMaxWidth()
                        )
                    }
                }
                
                TextButton(
                    onClick = { navigateToChangePayoutMethod() }
                ) {
                    Text("Use a different PayPal account?")
                }
            }
        }
    }
}

Email masking

The receiver component provides built-in email masking for privacy:

// Masked email (default)
PaypalPayoutReceiverComponentConfig(
    showMaskToggle = true,
    applyMask = true  // Shows: c***@example.com
)

// Full email shown
PaypalPayoutReceiverComponentConfig(
    showMaskToggle = true,
    applyMask = false  // Shows: customer@example.com
)

// No mask toggle (always shows full email)
PaypalPayoutReceiverComponentConfig(
    showMaskToggle = false
    // Always shows: customer@example.com
)

Styling

Customise the component appearance using the style property:

val receiverConfig = PaypalPayoutReceiverComponentConfig(
    label = "PayPal Account",
    showMaskToggle = true,
    applyMask = true,
    style = PaypalPayoutReceiverStyle(
        // Add custom styling properties
    )
)

Best practices

Enable privacy by default

Start with the email masked for customer privacy:

// Good: Privacy-first approach
PaypalPayoutReceiverComponentConfig(
    showMaskToggle = true,
    applyMask = true  // Start masked
)

// Less ideal: Email exposed by default
PaypalPayoutReceiverComponentConfig(
    showMaskToggle = true,
    applyMask = false  // Start unmasked
)

Provide clear labeling

Use descriptive labels that indicate the purpose:

// Good examples
PaypalPayoutReceiverComponentConfig(label = "Sending to")
PaypalPayoutReceiverComponentConfig(label = "PayPal Account")
PaypalPayoutReceiverComponentConfig(label = "Recipient")

// Avoid vague labels
PaypalPayoutReceiverComponentConfig(label = "Email")  // Too generic

Proper SDK initialisation

Ensure your SDK is initialised with valid PayPal wallet details:

// Correct initialisation for withdrawal flow
paypalConfig = PaypalConfig(
    payout = PayoutConfig(
        proceedPayoutWithSdk = true,
        paypalWallet = PayPalPayOutWalletConfig(
            email = "customer@example.com",  // Required
            payerId = "PAYER_ID_XXX"         // Required for PayPal payouts
        )
    )
)

Common use cases

Standard withdrawal flow

@Composable
fun StandardWithdrawal() {
    Column(
        modifier = Modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        // Amount
        pxpCheckout.buildComponentView(
            component = amountComponent,
            modifier = Modifier.fillMaxWidth()
        )
        
        Divider()
        
        // Receiver with masking
        pxpCheckout.buildComponentView(
            component = receiverComponent,
            modifier = Modifier.fillMaxWidth()
        )
        
        Divider()
        
        // Submit
        pxpCheckout.buildComponentView(
            component = submitComponent,
            modifier = Modifier.fillMaxWidth()
        )
    }
}