{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","img","br","equal-split","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.1c8c2c88ea9cf138231972ad3c183ead10888b4d0c0dea0b920dcf77c50fe7a9.f7c10768.svg","alt":"Billing address component","withLightbox":true,"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":"EqualSplit","attributes":{"centerVertically":false},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/billing-address-with-shipping-prefill.dba7198a4c29fb9d0870f75aee4fce99d3947e5d7e2463a6b22c6dc0588b381f.f7c10768.svg","alt":"Billing address component with a shipping checkbox.","withLightbox":true,"width":"400","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Billing address component with a shipping checkbox."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/billing-address-custom.50a220fbda7b339584607312a503a0fd281472758c58194d52cc8df0accb6f61.f7c10768.svg","alt":"Billing address component with custom ordering and styling.","withLightbox":true,"width":"400","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Billing address component with custom ordering and styling."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"card-on-file","__idx":3},"children":["Card-on-file"]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/cof.034ba61c3383cbf8396565e23718fdde400ad90106db98911c407b566bc7a0ae.f7c10768.svg","alt":"COF component","withLightbox":true,"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/click-once.db8999735d5a7fe957cd19103ac07569e7b4d659992edbf95702752fd3c441e4.f7c10768.svg","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/click-once-error.459767f0b82f2bbde5529d4b1dbd25e98e4133ae421ec5de966bb4bb6cc13fe7.f7c10768.svg","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-input.24d2358468c63f0b5bf5dd70b326d28fa777f1f8020b23d868745dcff2e51628.f7c10768.svg","alt":"New card component","withLightbox":true,"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/web/card/pre-built-components","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}