{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","img","br","admonition"]},"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/street.237a21f84aeabcfec7dcfeae4cbbab95ffdfada9ede1c282c41c931abf517322.b879c550.png","alt":"Address component","framed":false,"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_dropdown.78978ea1c2ba4608dfcd83ed96066ef7e8a94f69ecf64d401e2d6e679f94b431.b879c550.png","alt":"Country selection component","framed":false,"withLightbox":true,"className":"screenshot","width":"300px","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.1072cb8dd2a18bf1d5c84d76db9bac0bb6e2d92fd85a893a45b335829123e6ab.b879c550.png","alt":"Postcode component","framed":false,"withLightbox":true,"className":"screenshot","width":"400px","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 pre-fill billing address checkbox 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/prefill_checkbox.0c8aba6ff497df7f472b611b0c37ec169091c037973a98540fbddce2c6510dff.b879c550.png","alt":"Pre-fill billing address checkbox","framed":false,"withLightbox":true,"className":"screenshot","width":"340px","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":["Display accepted card brands (configured via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardNumberComponentConfig.acceptedCardBrands"]},")."]},{"$$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.ecd3be0640a125149015a680cfce7c85423ed2ac671dec420b2bc0d49a992463.b879c550.png","alt":"Card brand selector","framed":false,"withLightbox":true,"className":"screenshot","width":"300px","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.3e3229647b5840997a8969db59db2ca7ed7152e3359071e3e7b4a0659bb14a8f.b879c550.png","alt":"Card consent","framed":false,"withLightbox":true,"className":"screenshot","width":"340px","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/cvc.0f3bd697ec2c48530e4a7eb2481b6a9fbc6021994eeb74159f864bf7097ffd57.b879c550.png","alt":"Card CVC","framed":false,"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":["Link to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DynamicCardImageComponent"]}," (configured via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DynamicCardImageComponentConfig"]},")."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/cvc_1.bb833e27d681c5993a377de037e86680157451e772d5dd2d30e296c4a44ab47e.b879c550.png","alt":"Card CVC with hint","framed":false,"withLightbox":true,"className":"screenshot","width":"400px","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/expiry_date.351b3ba8373b04d4e27ea833c274b32cc6481781086b38eb36935b9f6c2dfdfe.b879c550.png","alt":"Card expiry date","framed":false,"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":["Link to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DynamicCardImageComponent"]}," (configured via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DynamicCardImageComponentConfig"]},")."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/expiry_date_1.750031400ae62147ff1d705fd8ef80bf562053944831a79d3b4eb51f7d0cc5b9.b879c550.png","alt":"Card expiry date with hint","framed":false,"withLightbox":true,"className":"screenshot","width":"400px","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.3b1a3826c484814a651775ce3014eb814e588e74ad948b41d9b5f2097018ee42.b879c550.png","alt":"Card number","framed":false,"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":["Link to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DynamicCardImageComponent"]}," (configured via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DynamicCardImageComponentConfig"]},")."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/card_number_1.a39eb820489e053bc00a1921644fee8c449e5a4cf0064692e51455c4fa0bcce5.b879c550.png","alt":"Card number input field with brand selector","framed":false,"withLightbox":true,"className":"screenshot","width":"400px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/card_number_2.98157d23e80822faa743685e88e09faeca0a4bfb910aed8fe7ac80cde14adf3a.b879c550.png","alt":"Card number input field with hint","framed":false,"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/card_holder_name.b0ea25d70d53282d447e9d7b61a0cb9a067dcae0ac814d1b6c29d725f93c8960.b879c550.png","alt":"Cardholder name","framed":false,"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":["Link to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DynamicCardImageComponent"]}," (configured via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DynamicCardImageComponentConfig"]},")."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/card_holder_name_1.1f02d66e9fb49783bd32a726f6ad5279a8c594868f1f01dbaf1a43e5500f5f60.b879c550.png","alt":"Cardholder name with hint","framed":false,"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.6da304c25c7edd409610b01113520bf2ee2295228836bc61971bf3075ddf55fb.b879c550.png","alt":"Card submit component","framed":false,"withLightbox":true,"className":"screenshot","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.4130a1944da468aff6adce1d8d8118f383ece8fd455dcde81c634e1bfbe824c1.b879c550.png","alt":"Dynamic card image component","framed":false,"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":"Image","attributes":{"src":"/assets/dynamic_card_image_highlight.89713e99e3d9f677478c2b0237173fb27ff7c93fe08b2ab6bcbeb3626ab60eef.b879c550.png","alt":"Dynamic card image component","framed":false,"withLightbox":true,"className":"screenshot","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-05-18T10:04:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/ios/card/standalone-components","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}