{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","required","admonition"]},"type":"markdown"},"seo":{"title":"Pre-built PayPal 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":"pre-built-paypal-component","__idx":0},"children":["Pre-built PayPal component"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn about how to configure the composite pre-built PayPal component."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-usage","__idx":1},"children":["Basic usage"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"minimal-configuration","__idx":2},"children":["Minimal configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["At minimum, the pre-built PayPal component requires the following configuration to function:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val prebuiltConfig = PreBuiltPayPalComponentConfig(\n    paypalConfig = PayPalComponentConfig(\n        renderType = \"standalone\",\n        fundingSources = \"paypal\",\n        shippingPreference = \"NoShipping\",\n        userAction = \"PayNow\"\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":{"align":"left","data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paypalConfig"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["PayPalComponentConfig"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Configuration for the PayPal component. Controls the PayPal button's appearance and behaviour. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/android/paypal/paypal-component"},"children":["PayPal component"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"advanced-configuration","__idx":3},"children":["Advanced configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more complex implementations, you can configure additional components and settings:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val prebuiltConfig = PreBuiltPayPalComponentConfig(\n    // PayPal button configuration\n    paypalConfig = PayPalComponentConfig(\n        renderType = \"standalone\",\n        fundingSources = \"paypal\",\n        shippingPreference = \"NoShipping\",\n        userAction = \"PayNow\",\n        payeeEmailAddress = \"merchant@example.com\",\n        paymentDescription = \"Premium subscription\",\n        enableOneClickPayment = true,\n        style = PayPalButtonStyle(\n            layout = \"horizontal\",\n            color = \"blue\",\n            shape = \"rect\",\n            height = 48,\n            label = \"pay\"\n        )\n    ),\n    \n    // Toggle component configuration\n    toggleConfig = ToggleComponentConfig(\n        label = \"Use a different PayPal account\",\n        initialChecked = false,\n        toggleStyle = ToggleVisualStyle(\n            activeTrackColor = Color(0xFF0070BA),\n            inactiveTrackColor = Color(0xFFE5E5E5)\n        )\n    ),\n    \n    // Layout configuration\n    layoutMode = PreBuiltPayPalLayoutMode.VERTICAL\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":{"align":"left","data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggleConfig"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ToggleComponentConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Configuration for the toggle component. Controls the toggle switch for payment method switching. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/android/paypal/toggle-component"},"children":["Toggle component"]},". Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["layoutMode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["PreBuiltPayPalLayoutMode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The component layout orientation. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PreBuiltPayPalLayoutMode.VERTICAL"]},".",{"$$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":["VERTICAL"]},": Stacked layout"]}]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The pre-built component automatically links the PayPal button with the toggle component, handling the one-click payment flow for you."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling","__idx":4},"children":["Styling"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-styling","__idx":5},"children":["Default styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The pre-built PayPal component renders with these default styles:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"style = PreBuiltPayPalStyle(\n    colorStyles = PreBuiltPayPalStyle.ColorStyles(\n        backgroundColor = PxpThemeValues.Colors.surfaceColor,\n        containerBackgroundColor = PxpThemeValues.Colors.surfaceColor,\n        textColor = PxpThemeValues.Colors.onSurfaceColor\n    ),\n    layoutStyles = PreBuiltPayPalStyle.LayoutStyles(\n        containerPadding = 16.dp,\n        spacingBetweenElements = 16.dp\n    ),\n    componentStyles = PreBuiltPayPalStyle.ComponentStyles(\n        containerShape = RoundedCornerShape(8.dp)\n    )\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The pre-built component inherits PayPal button styling from the PayPal component configuration and adds container-specific styling options."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-styling","__idx":6},"children":["Custom styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can override the default appearance by providing custom styles for the container:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val prebuiltConfig = PreBuiltPayPalComponentConfig(\n    paypalConfig = paypalConfig,\n    toggleConfig = toggleConfig,\n    \n    style = PreBuiltPayPalStyle(\n        // Color styles\n        colorStyles = PreBuiltPayPalStyle.ColorStyles(\n            backgroundColor = Color.White,\n            containerBackgroundColor = Color(0xFFF8F9FA),\n            textColor = Color(0xFF212529)\n        ),\n        \n        // Text styles\n        textStyles = PreBuiltPayPalStyle.TextStyles(\n            textStyle = TextStyle(\n                fontSize = 14.sp,\n                fontWeight = FontWeight.Normal,\n                color = Color(0xFF495057)\n            ),\n            labelTextStyle = TextStyle(\n                fontSize = 12.sp,\n                fontWeight = FontWeight.Medium,\n                color = Color(0xFF6C757D)\n            )\n        ),\n        \n        // Layout styles\n        layoutStyles = PreBuiltPayPalStyle.LayoutStyles(\n            containerPadding = 20.dp,\n            spacingBetweenElements = 16.dp\n        ),\n        \n        // Component styles\n        componentStyles = PreBuiltPayPalStyle.ComponentStyles(\n            containerShape = RoundedCornerShape(12.dp),\n            borderWidth = 1.dp,\n            borderColor = Color(0xFFDEE2E6),\n            elevation = 4.dp\n        )\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":{"align":"left","data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["PreBuiltPayPalStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Custom styling configuration for the pre-built component container. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.colorStyles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ColorStyles"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Colour-related style configuration."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.colorStyles.backgroundColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The main background colour of the component. Defaults to the theme's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["surface"]}," colour."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.colorStyles.containerBackgroundColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The background colour of the container. Defaults to the theme ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["surface"]}," colour."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.colorStyles.textColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The primary text colour. Defaults to the theme's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onSurface"]}," colour."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.textStyles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["TextStyles"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Text-related style configuration."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.textStyles.textStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["TextStyle"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text style for body text. Defaults to the default text style."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.textStyles.labelTextStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["TextStyle"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text style for labels. Defaults to the default label style."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.layoutStyles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["LayoutStyles"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Layout-related style configuration."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.layoutStyles.containerPadding"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Dp"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The padding around the container. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["16.dp"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.layoutStyles.spacingBetweenElements"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Dp"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The spacing between child components (toggle and PayPal button). Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["16.dp"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.componentStyles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ComponentStyles"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Component-related style configuration."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.componentStyles.containerShape"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Shape"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The shape of the container (corners). Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["RoundedCornerShape(8.dp)"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.componentStyles.borderWidth"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Dp"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The width of the container border. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["0.dp"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.componentStyles.borderColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The colour of the container border. Defaults to transparent."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.componentStyles.elevation"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Dp"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The elevation/shadow of the container. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["0.dp"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"event-handling","__idx":7},"children":["Event handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The pre-built PayPal component provides event handlers through its child components:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val prebuiltConfig = PreBuiltPayPalComponentConfig(\n    paypalConfig = PayPalComponentConfig(\n        // PayPal event handlers\n        onSuccess = { data: String -> },\n        onError = { error: String -> },\n        onCancel = { -> },\n        onShippingAddressChange = { data: String -> String? },\n        onShippingOptionsChange = { data: String -> String? },\n        onOrderCreated = { orderData: String -> },\n        onSubmitError = { error: String -> },\n        onScriptLoaded = { -> },\n        onGetConsent = { -> Boolean }\n    ),\n    toggleConfig = ToggleComponentConfig(\n        // Toggle event handler\n        onToggleChanged = { isChecked: Boolean -> }\n    )\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"paypal-event-handlers","__idx":8},"children":["PayPal event handlers"]},{"$$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":{"align":"left","data-label":"Callback"},"children":["Callback"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onSuccess: ((String) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when the PayPal payment succeeds with payment approval data."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onError: ((String) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when the PayPal payment encounters an error."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCancel: (() -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when the user cancels the PayPal payment flow."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onShippingAddressChange: ((String) -> String?)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when the shipping address changes in the PayPal checkout."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onShippingOptionsChange: ((String) -> String?)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when shipping options change in PayPal checkout."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onOrderCreated: ((String) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when the PayPal order is successfully created."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onSubmitError: ((String) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when order creation or submission fails."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onScriptLoaded: (() -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when the PayPal SDK script loads successfully."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onGetConsent: (() -> Boolean)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler to get user consent for vaulting their PayPal account."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"toggle-event-handler","__idx":9},"children":["Toggle event handler"]},{"$$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":{"align":"left","data-label":"Callback"},"children":["Callback"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onToggleChanged: ((Boolean) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when the toggle's state changes for payment method switching."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For detailed information about event data structures and usage patterns, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/android/paypal/events"},"children":["Events"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"methods","__idx":10},"children":["Methods"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The pre-built PayPal component provides methods for lifecycle management."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"content","__idx":11},"children":["Content()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Renders the pre-built component in Jetpack Compose:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"@Composable\nfun PaymentScreen() {\n    val prebuiltComponent = remember {\n        pxpCheckout.createComponent(\n            type = ComponentType.PREBUILT_PAYPAL,\n            config = prebuiltConfig\n        )\n    }\n    \n    pxpCheckout.buildComponentView(\n        component = prebuiltComponent,\n        modifier = Modifier.fillMaxWidth()\n    )\n}\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"getvalue","__idx":12},"children":["getValue()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Retrieves the current component state:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val componentValue = prebuiltComponent.getValue()\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":13},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-pre-built-component","__idx":14},"children":["Basic pre-built component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A straightforward implementation with essential configuration:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val prebuiltConfig = PreBuiltPayPalComponentConfig(\n    paypalConfig = PayPalComponentConfig(\n        renderType = \"standalone\",\n        fundingSources = \"paypal\",\n        shippingPreference = \"NoShipping\",\n        userAction = \"PayNow\",\n        payeeEmailAddress = \"merchant@example.com\",\n        paymentDescription = \"Product purchase\",\n        enableOneClickPayment = false,\n        \n        onSuccess = { data ->\n            val jsonObject = JSONObject(data)\n            val orderID = jsonObject.getString(\"orderID\")\n            Log.d(\"PreBuilt\", \"Payment successful: $orderID\")\n            navigateToSuccessScreen(orderID)\n        },\n        \n        onError = { error ->\n            Log.e(\"PreBuilt\", \"Payment failed: $error\")\n            showErrorMessage(\"Payment failed. Please try again.\")\n        }\n    )\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"pre-built-with-one-click-payment","__idx":15},"children":["Pre-built with one-click payment"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implementation with toggle for returning customers:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val prebuiltConfig = PreBuiltPayPalComponentConfig(\n    // PayPal configuration\n    paypalConfig = PayPalComponentConfig(\n        renderType = \"standalone\",\n        fundingSources = \"paypal\",\n        shippingPreference = \"NoShipping\",\n        userAction = \"PayNow\",\n        payeeEmailAddress = \"merchant@example.com\",\n        paymentDescription = \"Order payment\",\n        enableOneClickPayment = true,\n        scriptParams = PayPalScriptParams(\n            userIdToken = getUserIdToken()\n        ),\n        style = PayPalButtonStyle(\n            layout = \"horizontal\",\n            color = \"blue\",\n            shape = \"rect\",\n            height = 48,\n            label = \"pay\"\n        ),\n        \n        onSuccess = { data ->\n            handlePaymentSuccess(data)\n        },\n        \n        onError = { error ->\n            handlePaymentError(error)\n        }\n    ),\n    \n    // Toggle configuration\n    toggleConfig = ToggleComponentConfig(\n        label = \"Use a different PayPal account\",\n        initialChecked = false,\n        labelStyle = ToggleLabelStyle(\n            color = Color(0xFF0070BA),\n            fontSizeSp = 14f,\n            fontWeight = FontWeight.Medium\n        ),\n        toggleStyle = ToggleVisualStyle(\n            activeTrackColor = Color(0xFF0070BA),\n            inactiveTrackColor = Color(0xFFE5E5E5)\n        ),\n        \n        onToggleChanged = { isChecked ->\n            Log.d(\"PreBuilt\", \"Toggle changed: $isChecked\")\n            if (isChecked) {\n                trackAnalyticsEvent(\"change_payment_method\")\n            }\n        }\n    ),\n    \n    layoutMode = PreBuiltPayPalLayoutMode.VERTICAL\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"enterprise-pre-built-with-full-customisation","__idx":16},"children":["Enterprise pre-built with full customisation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A comprehensive implementation with custom styling and complete event handling:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val prebuiltConfig = PreBuiltPayPalComponentConfig(\n    // PayPal configuration\n    paypalConfig = PayPalComponentConfig(\n        renderType = \"standalone\",\n        fundingSources = \"paypal\",\n        shippingPreference = \"NoShipping\",\n        userAction = \"PayNow\",\n        payeeEmailAddress = \"enterprise@example.com\",\n        paymentDescription = \"Enterprise subscription\",\n        enableOneClickPayment = true,\n        \n        scriptParams = PayPalScriptParams(\n            userIdToken = getUserIdToken(),\n            clientToken = getClientToken(),\n            pageType = \"checkout\"\n        ),\n        \n        style = PayPalButtonStyle(\n            layout = \"horizontal\",\n            color = \"blue\",\n            shape = \"pill\",\n            height = 48,\n            borderRadius = 24,\n            label = \"buynow\"\n        ),\n        \n        queryParams = PayPalQueryParams(\n            debug = BuildConfig.DEBUG,\n            integrationDate = \"2025-07-01\"\n        ),\n        \n        componentLayoutConfig = PayPalComponentLayoutConfig(\n            minHeightPercent = 0.1f,\n            maxHeightPercent = 0.8f\n        ),\n        \n        onScriptLoaded = {\n            Log.d(\"PreBuilt\", \"PayPal SDK loaded\")\n            hideLoadingIndicator()\n        },\n        \n        onOrderCreated = { orderId ->\n            Log.d(\"PreBuilt\", \"Order created: $orderId\")\n            trackAnalyticsEvent(\"order_created\", mapOf(\"orderId\" to orderId))\n        },\n        \n        onSuccess = { data ->\n            hideLoadingIndicator()\n            \n            val jsonObject = JSONObject(data)\n            val orderID = jsonObject.getString(\"orderID\")\n            val payerID = jsonObject.getString(\"payerID\")\n            \n            trackAnalyticsEvent(\"payment_success\", mapOf(\n                \"orderId\" to orderID,\n                \"payerId\" to payerID,\n                \"method\" to \"prebuilt_paypal\"\n            ))\n            \n            showPaymentSuccessMessage()\n            setTimeout({\n                navigateToSuccessScreen(orderID)\n            }, 2000)\n        },\n        \n        onError = { error ->\n            hideLoadingIndicator()\n            \n            val errorMessage = when {\n                error.contains(\"SDK\") -> \"Failed to load PayPal. Check connection.\"\n                error.contains(\"transaction\") -> \"Payment processing error.\"\n                else -> \"Payment error: $error\"\n            }\n            \n            Log.e(\"PreBuilt\", \"Payment error: $error\")\n            trackAnalyticsEvent(\"payment_error\", mapOf(\"error\" to error))\n            showErrorDialog(errorMessage)\n        },\n        \n        onCancel = {\n            Log.d(\"PreBuilt\", \"Payment cancelled\")\n            trackAnalyticsEvent(\"payment_cancelled\")\n            showMessage(\"Payment was cancelled.\")\n        }\n    ),\n    \n    // Toggle configuration\n    toggleConfig = ToggleComponentConfig(\n        label = \"Change preferred payment method\",\n        initialChecked = false,\n        \n        labelStyle = ToggleLabelStyle(\n            color = Color(0xFF212529),\n            fontSizeSp = 15f,\n            fontWeight = FontWeight.SemiBold,\n            position = LabelPosition.START,\n            spacing = 16.dp\n        ),\n        \n        toggleStyle = ToggleVisualStyle(\n            width = 54.dp,\n            height = 32.dp,\n            borderWidth = 2.dp,\n            borderColor = Color(0xFFDEE2E6),\n            borderRadius = 16.dp,\n            activeTrackColor = Color(0xFF0070BA),\n            inactiveTrackColor = Color(0xFFE9ECEF),\n            activeThumbColor = Color.White,\n            inactiveThumbColor = Color(0xFF6C757D)\n        ),\n        \n        onToggleChanged = { isChecked ->\n            Log.d(\"PreBuilt\", \"Toggle state: $isChecked\")\n            \n            trackAnalyticsEvent(\"toggle_payment_method\", mapOf(\n                \"action\" to if (isChecked) \"change\" else \"use_saved\"\n            ))\n            \n            if (isChecked) {\n                showPaymentMethodChangeFlow()\n            } else {\n                useVaultedPaymentMethod()\n            }\n        }\n    ),\n    \n    // Container styling\n    style = PreBuiltPayPalStyle(\n        colorStyles = PreBuiltPayPalStyle.ColorStyles(\n            backgroundColor = Color.White,\n            containerBackgroundColor = Color(0xFFF8F9FA),\n            textColor = Color(0xFF212529)\n        ),\n        \n        textStyles = PreBuiltPayPalStyle.TextStyles(\n            textStyle = TextStyle(\n                fontSize = 14.sp,\n                fontWeight = FontWeight.Normal,\n                color = Color(0xFF495057)\n            ),\n            labelTextStyle = TextStyle(\n                fontSize = 12.sp,\n                fontWeight = FontWeight.Medium,\n                color = Color(0xFF6C757D)\n            )\n        ),\n        \n        layoutStyles = PreBuiltPayPalStyle.LayoutStyles(\n            containerPadding = 24.dp,\n            spacingBetweenElements = 20.dp\n        ),\n        \n        componentStyles = PreBuiltPayPalStyle.ComponentStyles(\n            containerShape = RoundedCornerShape(16.dp),\n            borderWidth = 1.dp,\n            borderColor = Color(0xFFDEE2E6),\n            elevation = 4.dp\n        )\n    ),\n    \n    layoutMode = PreBuiltPayPalLayoutMode.VERTICAL\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"pre-built-with-multiple-funding-sources","__idx":17},"children":["Pre-built with multiple funding sources"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implementation supporting PayPal and Pay Later:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val prebuiltConfig = PreBuiltPayPalComponentConfig(\n    paypalConfig = PayPalComponentConfig(\n        renderType = \"setOfButtons\",\n        fundingSources = listOf(\"paypal\", \"paylater\"),\n        shippingPreference = \"NoShipping\",\n        userAction = \"PayNow\",\n        payeeEmailAddress = \"merchant@example.com\",\n        paymentDescription = \"Product purchase\",\n        \n        style = PayPalButtonStyle(\n            layout = \"vertical\",\n            color = \"gold\",\n            shape = \"rect\",\n            height = 45\n        ),\n        \n        message = PayPalMessage(\n            amount = 299.99,\n            align = \"center\",\n            color = \"black\",\n            position = \"bottom\"\n        ),\n        \n        onSuccess = { data ->\n            val jsonObject = JSONObject(data)\n            val orderID = jsonObject.getString(\"orderID\")\n            val paymentSource = jsonObject.optString(\"paymentSource\", \"paypal\")\n            \n            Log.d(\"PreBuilt\", \"Payment via $paymentSource: $orderID\")\n            trackAnalyticsEvent(\"payment_success\", mapOf(\n                \"source\" to paymentSource,\n                \"orderId\" to orderID\n            ))\n            navigateToSuccessScreen(orderID)\n        }\n    ),\n    \n    style = PreBuiltPayPalStyle(\n        layoutStyles = PreBuiltPayPalStyle.LayoutStyles(\n            containerPadding = 16.dp,\n            spacingBetweenElements = 12.dp\n        )\n    )\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"dynamic-pre-built-component","__idx":18},"children":["Dynamic pre-built component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example showing conditional toggle based on vault status:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"@Composable\nfun DynamicPreBuiltPayPal() {\n    var hasVaultedAccount by remember { mutableStateOf(false) }\n    \n    LaunchedEffect(Unit) {\n        hasVaultedAccount = checkVaultStatus()\n    }\n    \n    val prebuiltConfig = remember(hasVaultedAccount) {\n        PreBuiltPayPalComponentConfig(\n            paypalConfig = PayPalComponentConfig(\n                renderType = \"standalone\",\n                fundingSources = \"paypal\",\n                shippingPreference = \"NoShipping\",\n                userAction = \"PayNow\",\n                enableOneClickPayment = hasVaultedAccount,\n                scriptParams = if (hasVaultedAccount) {\n                    PayPalScriptParams(userIdToken = getUserIdToken())\n                } else null,\n                onSuccess = { handlePaymentSuccess(it) }\n            ),\n            toggleConfig = if (hasVaultedAccount) {\n                ToggleComponentConfig(\n                    label = \"Use different PayPal account\",\n                    onToggleChanged = { handleToggleChange(it) }\n                )\n            } else null\n        )\n    }\n    \n    val prebuiltComponent = remember(prebuiltConfig) {\n        pxpCheckout.createComponent(\n            type = ComponentType.PREBUILT_PAYPAL,\n            config = prebuiltConfig\n        )\n    }\n    \n    pxpCheckout.buildComponentView(\n        component = prebuiltComponent,\n        modifier = Modifier.fillMaxWidth()\n    )\n}\n","lang":"kotlin"},"children":[]}]},"headings":[{"value":"Pre-built PayPal component","id":"pre-built-paypal-component","depth":1},{"value":"Basic usage","id":"basic-usage","depth":2},{"value":"Minimal configuration","id":"minimal-configuration","depth":3},{"value":"Advanced configuration","id":"advanced-configuration","depth":3},{"value":"Styling","id":"styling","depth":2},{"value":"Default styling","id":"default-styling","depth":3},{"value":"Custom styling","id":"custom-styling","depth":3},{"value":"Event handling","id":"event-handling","depth":2},{"value":"PayPal event handlers","id":"paypal-event-handlers","depth":3},{"value":"Toggle event handler","id":"toggle-event-handler","depth":3},{"value":"Methods","id":"methods","depth":2},{"value":"Content()","id":"content","depth":3},{"value":"getValue()","id":"getvalue","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"Basic pre-built component","id":"basic-pre-built-component","depth":3},{"value":"Pre-built with one-click payment","id":"pre-built-with-one-click-payment","depth":3},{"value":"Enterprise pre-built with full customisation","id":"enterprise-pre-built-with-full-customisation","depth":3},{"value":"Pre-built with multiple funding sources","id":"pre-built-with-multiple-funding-sources","depth":3},{"value":"Dynamic pre-built component","id":"dynamic-pre-built-component","depth":3}],"frontmatter":{"seo":{"title":"Pre-built PayPal component"}},"lastModified":"2026-02-26T12:14:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/android/paypal/pre-built-component","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}