{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","img","br","admonition","equal-split"]},"type":"markdown"},"seo":{"title":"Standalone 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":"standalone-components","__idx":0},"children":["Standalone components"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn about the different standalone components that we offer."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"billing-address-input-fields","__idx":1},"children":["Billing address input fields"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Capture billing address details using highly-customisable standalone input fields."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"address-input-field","__idx":2},"children":["Address input field"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The address input field component allows you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Customise the label copy."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Customise the styling of the input field."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/address.ec8d4fe4c5d1cddd56952acc550c5dd2322e135da6a1155dae038ec3034040af.f7c10768.svg","alt":"Address component","withLightbox":true,"className":"screenshot","width":"400px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"country-selection-drop-down","__idx":3},"children":["Country selection drop-down"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The country selection component allows you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Customise the label copy."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Customise the styling of the drop-down and drop-down options, depending on their state."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Choose a message to display when no country is found."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/country-selection.b71f7cc5bcbf0be7d6f260f6d16566857ce43f82009dd0e2e3ec042214631ace.f7c10768.png","alt":"Country selection component","withLightbox":true,"className":"screenshot","width":"240px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"postcode-input-field","__idx":4},"children":["Postcode input field"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The postcode input field allows you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Customise the label copy."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Customise the styling of the input field."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/postcode.32a664d88d00995f961ee6f93d44ecec8eb9d8e7069b696228fb6cc537001b76.f7c10768.svg","alt":"Postcode component","withLightbox":true,"className":"screenshot","width":"240px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"pre-fill-billing-address-checkbox","__idx":5},"children":["Pre-fill billing address checkbox"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The card consent component allows you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Customise the label copy."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add custom styling for the checked and unchecked versions of the checkbox."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/pre-fill-billing.affaa648837b6dc6afe2aff95a817a60a7d8e0ee5b99bb1949bd8fc28b06b8dc.f7c10768.svg","alt":"Pre-fill billing address checkbox","withLightbox":true,"className":"screenshot","width":"500px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"card-input-fields","__idx":6},"children":["Card input fields"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Capture card details using highly-customisable standalone input fields."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"card-brand-selector","__idx":7},"children":["Card brand selector"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The card brand selector component allows you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Decide which cards to show/accept."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Choose how cards appear when selected."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Highlight the detected card brand as the customer types their card number."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/card-brand-selector.56562b047ed5c741939240a15e1035818dcf7daeb165aed0e9f5aa540a1666e1.f7c10768.svg","alt":"Card brand selector component","withLightbox":true,"className":"screenshot","width":"500px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"card-consent","__idx":8},"children":["Card consent"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The card consent component allows you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Customise the label copy."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add custom styling for the checked and unchecked versions of the checkbox."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/card-consent.cc7be2821bcf3177e18672fa3ba363e0e516bbe9229a0be9f212f0a1967e97e0.f7c10768.svg","alt":"Card consent component","withLightbox":true,"className":"screenshot","width":"500px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"card-cvc","__idx":9},"children":["Card CVC"]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/card-cvc.9b199d9dc575d3652635f389777ea41d6cf1bf589ee5b34bebb3c103c9780f30.f7c10768.svg","alt":"Card CVC component","withLightbox":true,"className":"screenshot","width":"400px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The card CVC component allows you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Decide whether or not to mask the CVC."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add a toggle so cardholders can show or hide the CVC."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Display a hint icon, with or without tooltip."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Sync with the dynamic card component."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/card-cvc-hint.ce1ef2f4ceb1a3b64ab4bb22e4732fea36465cf7878d4d0e4f2b2e1b93b2e94b.f7c10768.svg","alt":"Card CVC with hint","withLightbox":true,"className":"screenshot","width":"240px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"card-expiry-date","__idx":10},"children":["Card expiry date"]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/card-expiry-date.b0225c4424db4af156a446574eec5c0a1156a8ca4a9c6313b3d0c7291f6d7a00.f7c10768.svg","alt":"Card expiry date component","withLightbox":true,"className":"screenshot","width":"400px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The card expiry component allows you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Choose the expiry date format."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Set an initial placeholder value."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Display a hint icon, with or without tooltip."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Sync with the dynamic card component."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/card-expiry-date-hint.1468d8d2b6234582ac6bc28324fa0f7593b78b4271a5e33475745b85c1557ca0.f7c10768.svg","alt":"Card expiry date component with hint","withLightbox":true,"className":"screenshot","width":"240px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"card-number","__idx":11},"children":["Card number"]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/card-number.b3871c176ca7204332c9b1ffadae4c576b8b32fbb463a691056a8fc214f6115d.f7c10768.svg","alt":"Card number component","withLightbox":true,"className":"screenshot","width":"400px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The card number field allows you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Format the card number as the user types."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Display the card scheme logo."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Validate the card number on input change or input blur."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Sync with the dynamic card component."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/card-number-selector.9490df6c928c1fd5fc36d58dc9dce70f86d6868d7acf47019ba226a6d20ebcc4.f7c10768.svg","alt":"Card number input field with brand selector","withLightbox":true,"className":"screenshot","width":"400px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/card-number-hint.b6df12f41b3397878d870b7f583369a0316d5a13bb4a3bb22eb6a56515221e7f.f7c10768.svg","alt":"Card number input field with hint","withLightbox":true,"className":"screenshot","width":"400px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"cardholder-name","__idx":12},"children":["Cardholder name"]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/cardholder-name.3c7867270bd9e411f791a8164f2e35b1ce8fe46ebdae6ca8fc35abf189e43b48.f7c10768.svg","alt":"Cardholder name component","withLightbox":true,"className":"screenshot","width":"400px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The cardholder name component allows you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Set an initial placeholder value."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Choose whether to convert the input to uppercase automatically."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Display a hint icon, with or without tooltip."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Sync with the dynamic card component."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/cardholder-name-hint.00dd7e804e45dea36851c930e091a4874b5dc612ac03f8f06af792975a3cdd63.f7c10768.svg","alt":"Cardholder name with hint","withLightbox":true,"className":"screenshot","width":"400px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"card-submit","__idx":13},"children":["Card submit"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display a button to finalise the payment process."]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/card-submit.9c8760c2d96191fb076a25dc5feec327d2e8da9ed2b99520aca957593320cb90.f7c10768.svg","alt":"Card submit component","withLightbox":true,"width":"400px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The card submit component allows you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Customise the button's text."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Disable the button until all fields are validated or show a loading state."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Show or hide the button based on validation status."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Enable AVS (address verification) checks or skip if not needed."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can also choose to use your own button instead of rendering the PXP button."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"dynamic-card-image","__idx":14},"children":["Dynamic card image"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display a live preview of a customer's card with dynamically updated information."]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/dynamic-card-image.edd772b74c65402d3201c5cf758a1ff32d6bb5edeb917c919dd638d90de3e9ff.f7c10768.svg","alt":"Dynamic card image component","withLightbox":true,"width":"400px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The dynamic card image component allows you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Choose front and back images for the card preview."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Customise the text labels and styles for the card fields displayed on the image."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Dynamically update the card preview as the user types."]}]},{"$$mdtype":"Tag","name":"EqualSplit","attributes":{"centerVertically":true},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/dynamic-card-image-custom.af857d6ed75477b5d193b3458e49e8cfb305d459966b6ed3ce906f87ee64fcdf.f7c10768.svg","alt":"dynamic-card-image-custom.svg","withLightbox":true,"width":"360px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/dynamic-card-image-update.7a07ab44bbcb17119ed65a50ccf436d8ef554d65993d51fec8fc0fa2d23b9789.f7c10768.svg","alt":"dynamic-card-image-update.svg","withLightbox":true,"width":"360px","height":"","align":"center"},"children":[]}]}]},"headings":[{"value":"Standalone components","id":"standalone-components","depth":1},{"value":"Billing address input fields","id":"billing-address-input-fields","depth":2},{"value":"Address input field","id":"address-input-field","depth":3},{"value":"Country selection drop-down","id":"country-selection-drop-down","depth":3},{"value":"Postcode input field","id":"postcode-input-field","depth":3},{"value":"Pre-fill billing address checkbox","id":"pre-fill-billing-address-checkbox","depth":3},{"value":"Card input fields","id":"card-input-fields","depth":2},{"value":"Card brand selector","id":"card-brand-selector","depth":3},{"value":"Card consent","id":"card-consent","depth":3},{"value":"Card CVC","id":"card-cvc","depth":3},{"value":"Card expiry date","id":"card-expiry-date","depth":3},{"value":"Card number","id":"card-number","depth":3},{"value":"Cardholder name","id":"cardholder-name","depth":3},{"value":"Card submit","id":"card-submit","depth":2},{"value":"Dynamic card image","id":"dynamic-card-image","depth":2}],"frontmatter":{"seo":{"title":"Standalone components"}},"lastModified":"2026-02-26T12:14:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/card/standalone-components","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}