{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","img","br","details"]},"type":"markdown"},"seo":{"title":"Pre-built components","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-components","__idx":0},"children":["Pre-built components"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn about the different pre-built components that we offer."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"billing-address","__idx":1},"children":["Billing address"]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/billing_address.2f7e2791c92d7ce2b79a15aa46844233def3257f49289aa8cd6b53e82b7ae833.7019e367.png","alt":"Billing address component","withLightbox":true,"className":"screenshot","width":"400px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The billing address component is a pre-built form that collects billing address information required for payment processing. It combines multiple address-related fields into a single, cohesive component:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Country selection:"]}," a drop-down for selecting the billing country."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Postcode/ZIP code:"]},"  an input field for postal codes."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Address:"]}," an input field for the street address/house number."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Prefill checkbox (optional):"]}," a checkbox that allows the shipping address to be copied to the billing fields."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component handles validation, styling, and data collection automatically, making it easy to integrate address verification (AVS) into your payment flow."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customisation","__idx":2},"children":["Customisation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The billing address component allows you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Decide which fields to display (e.g., postcode, street, country)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Configure whether to request billing address data for AVS during authorisation."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Customise how the billing address fields are displayed and in which order."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Include a checkbox to enable you to prefill the billing address fields with the customer's shipping address."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Additionally, you can:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Adjust the label and validation for each field."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Control the behaviour when no billing address is provided."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/billing_address2.1923aab2110333ab79961c34f9a581e0e9068fb1cbe2848dc7f56a39e7a8e3d1.7019e367.png","alt":"Customised billing address component","withLightbox":true,"className":"screenshot","width":"400px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"card-on-file","__idx":3},"children":["Card-on-file"]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/card_on_file.82e8dcef5b9070981bbf2a4d3fa352a9a91431bffeb79eb0acc98379db1a06cf.7019e367.png","alt":"COF component","withLightbox":true,"className":"screenshot","width":"400px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customisation-1","__idx":4},"children":["Customisation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The card-on-file component allows you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Customise how the card list is displayed, including setting the list order and deciding which cards to show first based on priority."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Choose whether display or hide expired cards and set a maximum number of tokens shown."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Adjust which fields to display and how tokenised cards appear (e.g., generic brand image, card's last four digits)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add in-line or pop-up tooltips for better user guidance."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Enable or disable card deletion with confirmation."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Set flags for CVV request on tokenised cards."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"click-once","__idx":5},"children":["Click-once"]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/clickonce.34d041d808dc6313308c1bf1d56db4b017f979206bbcfc63435baa9129bd7118.7019e367.png","alt":"Click-once component","withLightbox":true,"width":"400px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customisation-2","__idx":6},"children":["Customisation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The click-once component allows you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Adjust how the card information is presented for quick selection."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Display the tokenised card list with configurable priorities."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Set the default behaviour for CVV requests and bypass it for returning users."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Customise error handling and provide user feedback."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Customise the button's styling."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/clickonce2.a89b36d4e0bfac74675e113d9e3d0f2e35ceac131a6e52e50eb05fa9d61e3f0d.7019e367.png","alt":"Click-once component with a custom error message.","withLightbox":true,"width":"400px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Click-once component with a custom error message."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"new-card","__idx":7},"children":["New card"]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/new_card.1fe437e381d7836eb9f42428cebc66ea5e42869d8c3f12d09e97520caa9cd606.7019e367.png","alt":"New card component","withLightbox":true,"className":"screenshot","width":"400px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customisation-3","__idx":8},"children":["Customisation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The new card component allows you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Control which fields are shown and how they're labelled."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Customise the layout by arranging the fields as you wish."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Configure field labels, placeholders, and error messages."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Control the appearance of the submit button and disable it until all fields are valid."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add in-line or pop-up tooltips for each field."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Customise the field styling and input validation rules."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Choose whether to auto-capitalise the cardholder name or allow editing."]}]}]},"headings":[{"value":"Pre-built components","id":"pre-built-components","depth":1},{"value":"Billing address","id":"billing-address","depth":2},{"value":"Customisation","id":"customisation","depth":3},{"value":"Card-on-file","id":"card-on-file","depth":2},{"value":"Customisation","id":"customisation-1","depth":3},{"value":"Click-once","id":"click-once","depth":2},{"value":"Customisation","id":"customisation-2","depth":3},{"value":"New card","id":"new-card","depth":2},{"value":"Customisation","id":"customisation-3","depth":3}],"frontmatter":{"seo":{"title":"Pre-built components"}},"lastModified":"2026-02-26T12:14:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/android/card/pre-built-components","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}