{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","required","admonition"]},"type":"markdown"},"seo":{"title":"Card submit","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":"card-submit","__idx":0},"children":["Card submit"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn how to configure the card submit 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 card submit component requires the following card input components to function:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import PxpCheckout from '@pxp-io/web-components-sdk';\n\nconst pxpCheckout = PxpCheckout.initialize({\n  session: {\n    sessionId: 'your-session-id',\n    hmacKey: 'your-hmac-key',\n    encryptionKey: 'your-encryption-key'\n  },\n  environment: 'production',\n  transactionData: {\n    amount: 1000,\n    currency: 'USD',\n    entryType: 'Ecom',\n    intent: {\n      card: 'Authorisation'\n    },\n    merchantTransactionId: 'unique-transaction-id',\n    merchantTransactionDate: () => new Date().toISOString()\n  },\n  kountDisabled: false, // OPTIONAL: Set to true to disable Kount fraud detection\n  ownerType: 'MerchantGroup',\n  ownerId: 'your-owner-id'\n});\n\n// Create card input components\nconst cardNumber = pxpCheckout.create('card-number', {\n  label: \"Card number\"\n});\n\nconst cardExpiry = pxpCheckout.create('card-expiry-date', {\n  label: \"Expiry date\"\n});\n\nconst cardCvc = pxpCheckout.create('card-cvc', {\n  label: \"CVC\"\n});\n\n// Create card submit component\nconst cardSubmitComponent = pxpCheckout.create('card-submit', {\n  cardNumberComponent: cardNumber,\n  cardExpiryDateComponent: cardExpiry,\n  cardCvcComponent: cardCvc\n});\n\n// Mount components\ncardNumber.mount('card-number-container');\ncardExpiry.mount('expiry-date-container');\ncardCvc.mount('cvc-container');\ncardSubmitComponent.mount('submit-container');\n","lang":"typescript"},"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":["cardNumberComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardNumberComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Card number input component. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/card-number"},"children":["Card number"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardExpiryDateComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardExpiryDateComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Card expiry date input component. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/card-expiry-date"},"children":["Card expiry date"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardCvcComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardCvcComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Card CVC input component. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/card-cvc"},"children":["Card CVC"]},"."]}]}]}]}]},{"$$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":"typescript","header":{"controls":{"copy":{}}},"source":"// Create additional components\nconst cardHolderName = pxpCheckout.create('card-holder-name', {\n  label: \"Cardholder name\"\n});\n\nconst cardConsent = pxpCheckout.create('card-consent', {\n  consentText: \"Save this card for future purchases\"\n});\n\nconst billingAddress = pxpCheckout.create('billing-address', {\n  showFullForm: true\n});\n\n// Create card submit with advanced configuration\nconst cardSubmitComponent = pxpCheckout.create('card-submit', {\n  // Required components\n  cardNumberComponent: cardNumber,\n  cardExpiryDateComponent: cardExpiry,\n  cardCvcComponent: cardCvc,\n  \n  // Optional card components\n  cardHolderNameComponent: cardHolderName,\n  cardConsentComponent: cardConsent,\n  \n  // Basic configuration\n  submitText: \"Complete Payment\",\n  disableUntilValidated: true,\n  hideSubmitButton: false,\n  id: \"card-submit-btn\",\n  class: \"payment-submit-button\",\n  label: \"Payment Submission\",\n  submitAriaLabel: \"Complete your payment transaction\",\n  tabIndex: 1,\n  \n  // Card-on-file configuration\n  useCardOnFile: false,\n  \n  // AVS configuration\n  avsRequest: true,\n  billingAddressComponents: {\n    billingAddressComponent: billingAddress\n  }\n});\n","lang":"typescript"},"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":["submitText"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Text displayed on the submit button. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Pay Now\""]}," for payments or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Withdraw\""]}," for payouts."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["disableUntilValidated"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Disables submit button until all fields are valid. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["hideSubmitButton"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Hides the submit button completely. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Unique identifier for the component element. 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":["class"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["CSS class name applied to the 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":["label"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Label text displayed with the 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":["submitAriaLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Accessible label for the submit button. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Submit button\""]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tabIndex"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["number"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Tab order for keyboard navigation. 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":["cardHolderNameComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardHolderNameComponent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Cardholder name input component. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/cardholder-name"},"children":["Cardholder name"]},". 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":["useCardOnFile"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Uses saved card data instead of new card entry. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["avsRequest"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Enables Address Verification System checks. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["newCardComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["NewCardComponent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["New card entry component. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/new-card"},"children":["New card"]},". 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":["cardConsentComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardConsentComponent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Card consent and terms 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":["cardOnFileComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardOnFileComponent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Saved payment methods 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":["clickOnceStandaloneComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ClickOnceStandaloneComponent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["One-click payment 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":["MITEnabled"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Enables Merchant Initiated Transaction (MIT) processing. 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":["applyExemption"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Applies Strong Customer Authentication (SCA) exemptions when applicable. 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":["useUnityAuthenticationStrategy"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", uses Unity authentication strategy for 3DS authentication. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["threeDSStrategySetup"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Advanced 3DS authentication strategy configuration for different SCA scenarios. 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":["billingAddressComponents.billingAddressComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["BillingAddressComponent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Pre-built billing address component for address collection, compliance, or verification. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/billing-address"},"children":["Billing address"]},". 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":["billingAddressComponents.countrySelectionComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CountrySelectionComponent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Standalone country selector 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":["billingAddressComponents.postcodeComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["PostcodeComponent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Standalone postcode input 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":["billingAddressComponents.addressComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["AddressComponent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Standalone address input component. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If both the pre-built ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["billingAddressComponent"]}," and standalone components are provided, the pre-built component takes precedence. When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["avsRequest"]}," is enabled, billing address data will be used for Address Verification System checks during payment processing."]}]},{"$$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 card submit component renders with these default styles:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const defaultCardSubmitStyles = {\n  container: {\n    display: 'block',\n    width: '100%'\n  },\n  \n  button: {\n    backgroundColor: '#007bff',\n    color: '#ffffff',\n    border: '1px solid #007bff',\n    borderRadius: '4px',\n    padding: '12px 24px',\n    fontSize: '16px',\n    cursor: 'pointer',\n    width: '100%'\n  },\n  \n  'button:hover': {\n    backgroundColor: '#0056b3',\n    borderColor: '#0056b3'\n  },\n  \n  'button:disabled': {\n    backgroundColor: '#6c757d',\n    borderColor: '#6c757d',\n    cursor: 'not-allowed'\n  }\n};\n","lang":"typescript"},"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":["id"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Unique identifier for the component element. 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":["class"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["CSS class name applied to the 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":["label"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Label text displayed with the 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":["submitAriaLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Accessible label for the submit button. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Submit button\""]},"."]}]}]}]}]},{"$$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 any part of the component:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const cardSubmitComponent = pxpCheckout.create('card-submit', {\n  cardNumberComponent: cardNumber,\n  cardExpiryDateComponent: cardExpiry,\n  cardCvcComponent: cardCvc,\n  \n  submitText: \"Complete Payment\",\n  \n  styles: {\n    // Container styling\n    container: {\n      backgroundColor: '#ffffff',\n      border: '1px solid #e0e0e0',\n      borderRadius: '8px',\n      padding: '16px',\n      margin: '8px 0',\n      boxShadow: '0 2px 4px rgba(0,0,0,0.1)'\n    },\n    \n    // Submit button styling\n    button: {\n      backgroundColor: '#007bff',\n      color: '#ffffff',\n      border: '1px solid #007bff',\n      borderRadius: '4px',\n      padding: '12px 24px',\n      fontSize: '16px',\n      fontWeight: '500',\n      cursor: 'pointer',\n      width: '100%',\n      transition: 'all 0.2s ease',\n      textAlign: 'center',\n      textDecoration: 'none',\n      display: 'inline-block',\n      lineHeight: '1.5'\n    },\n    \n    // Button hover state\n    'button:hover': {\n      backgroundColor: '#0056b3',\n      borderColor: '#0056b3',\n      transform: 'translateY(-1px)',\n      boxShadow: '0 4px 8px rgba(0,0,0,0.15)'\n    },\n    \n    // Button focus state\n    'button:focus': {\n      outline: '2px solid #007bff',\n      outlineOffset: '2px'\n    },\n    \n    // Button disabled state\n    'button:disabled': {\n      backgroundColor: '#6c757d',\n      borderColor: '#6c757d',\n      cursor: 'not-allowed',\n      opacity: '0.6',\n      transform: 'none',\n      boxShadow: 'none'\n    },\n    \n    // Button active/pressed state\n    'button:active': {\n      backgroundColor: '#004085',\n      borderColor: '#004085',\n      transform: 'translateY(0)'\n    },\n    \n    // Label styling\n    label: {\n      color: '#333333',\n      fontSize: '14px',\n      fontWeight: '500',\n      marginBottom: '8px',\n      display: 'block'\n    },\n    \n    // Error message styling\n    errorMessage: {\n      color: '#dc3545',\n      fontSize: '12px',\n      marginTop: '4px',\n      display: 'block'\n    },\n    \n    // Loading state styling\n    loading: {\n      opacity: '0.7',\n      cursor: 'wait'\n    },\n    \n    // Loading spinner\n    loadingSpinner: {\n      border: '2px solid #f3f3f3',\n      borderTop: '2px solid #007bff',\n      borderRadius: '50%',\n      width: '16px',\n      height: '16px',\n      animation: 'spin 1s linear infinite',\n      display: 'inline-block',\n      marginRight: '8px'\n    }\n  }\n});\n","lang":"typescript"},"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":["styles.container"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSStyleDeclaration"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Styling for the main 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":["styles.container.backgroundColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The background colour of the 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":["styles.container.border"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The border styling for the 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":["styles.container.borderRadius"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The border radius for the 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":["styles.container.padding"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The padding inside the 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":["styles.container.margin"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The margin around the 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":["styles.container.boxShadow"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The box shadow for the 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":["styles.button"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSStyleDeclaration"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Styling for the submit button in its default state. 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":["styles.button.backgroundColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The background colour of the button. 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":["styles.button.color"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text colour of the button. 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":["styles.button.border"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The border styling for the button. 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":["styles.button.borderRadius"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The border radius for the button. 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":["styles.button.padding"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The padding inside the button. 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":["styles.button.fontSize"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The font size of the button text. 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":["styles.button.fontWeight"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The font weight of the button text. 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":["styles.button.cursor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The cursor style when hovering over the button. 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":["styles.button.width"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The width of the button. 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":["styles.button.transition"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["CSS transition effects for the button. 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":["styles.button.textAlign"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text alignment within the button. 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":["styles.button.textDecoration"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Text decoration for the button. 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":["styles.button.display"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The display type for the button. 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":["styles.button.lineHeight"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The line height for the button text. 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":["styles['button:hover']"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSStyleDeclaration"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Styling for the submit button when hovered. 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":["styles['button:hover'].backgroundColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The background colour when button is hovered. 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":["styles['button:hover'].borderColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The border colour when the button is hovered. 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":["styles['button:hover'].transform"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The transform effects when the button is hovered. 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":["styles['button:hover'].boxShadow"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The box shadow when the button is hovered. 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":["styles['button:focus']"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSStyleDeclaration"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Styling for the submit button when focused. 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":["styles['button:focus'].outline"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The outline styling when the button is focused. 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":["styles['button:focus'].outlineOffset"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The outline offset when the button is focused. 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":["styles['button:disabled']"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSStyleDeclaration"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Styling for the submit button when disabled. 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":["styles['button:disabled'].backgroundColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The background colour when the button is disabled. 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":["styles['button:disabled'].borderColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The border colour when the button is disabled. 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":["styles['button:disabled'].cursor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The cursor style when the button is disabled. 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":["styles['button:disabled'].opacity"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The opacity when the button is disabled. 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":["styles['button:disabled'].transform"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The transform effects when the button is disabled. 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":["styles['button:disabled'].boxShadow"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The box shadow when the button is disabled. 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":["styles['button:active']"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSStyleDeclaration"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Styling for the submit button when pressed/active. 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":["styles['button:active'].backgroundColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The background colour when the button is active. 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":["styles['button:active'].borderColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The border colour when the button is active. 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":["styles['button:active'].transform"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The transform effects when the button is active. 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":["styles.label"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSStyleDeclaration"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Styling for any labels associated with the 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":["styles.label.color"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text colour of the label. 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":["styles.label.fontSize"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The font size of the label. 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":["styles.label.fontWeight"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The font weight of the label. 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":["styles.label.marginBottom"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The bottom margin of the label. 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":["styles.label.display"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The display type for the label. 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":["styles.errorMessage"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSStyleDeclaration"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Styling for validation or error messages. 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":["styles.errorMessage.color"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text colour of error messages. 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":["styles.errorMessage.fontSize"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The font size of error messages. 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":["styles.errorMessage.marginTop"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The top margin of error messages. 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":["styles.errorMessage.display"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The display type for error messages. 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":["styles.loading"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSStyleDeclaration"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Styling applied to the component during loading states. 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":["styles.loading.opacity"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The opacity during the loading state. 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":["styles.loading.cursor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The cursor style during the loading state. 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":["styles.loadingSpinner"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSStyleDeclaration"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Styling for loading spinner elements. 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":["styles.loadingSpinner.border"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The border styling for the loading spinner. 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":["styles.loadingSpinner.borderTop"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The top border styling for the loading spinner. 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":["styles.loadingSpinner.borderRadius"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The border radius for the loading spinner. 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":["styles.loadingSpinner.width"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The width of the loading spinner. 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":["styles.loadingSpinner.height"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The height of the loading spinner. 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":["styles.loadingSpinner.animation"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The animation for the loading spinner. 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":["styles.loadingSpinner.display"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The display type for the loading spinner. 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":["styles.loadingSpinner.marginRight"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The right margin for the loading spinner. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"event-handling","__idx":7},"children":["Event handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The card submit component provides event handlers to manage the complete payment flow from user interaction through final authorisation:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const cardSubmitComponent = pxpCheckout.create('card-submit', {\n  cardNumberComponent: cardNumber,\n  cardExpiryDateComponent: cardExpiry,\n  cardCvcComponent: cardCvc,\n  \n  onClick: (event: Event) => {\n    console.log(\"Submit button clicked\");\n  },\n  \n  onStartSubmit: () => {\n    console.log(\"Submission process starting\");\n    showLoadingSpinner();\n  },\n  \n  onChange: (state: ComponentState) => {\n    console.log(\"Component state changed:\", state);\n  },\n  \n  onValidation: (data: ValidationResult[]) => {\n    console.log(\"Validation results:\", data);\n  },\n  \n  onCustomValidation: async () => {\n    // Perform custom validation logic\n    const termsAccepted = document.getElementById('terms-checkbox')?.checked;\n    return termsAccepted === true;\n  },\n  \n  onPreTokenisation: () => {\n    console.log(\"About to tokenise card data\");\n    showLoadingSpinner();\n    return true; // Return false to prevent tokenisation\n  },\n  \n  onPostTokenisation: (data) => {\n    console.log(\"Card tokenised:\", data.token);\n  },\n  \n  onPreInitiateAuthentication: () => {\n    console.log(\"Preparing 3DS authentication\");\n    return null; // Return authentication data or null to skip\n  },\n  \n  onPostInitiateAuthentication: (data) => {\n    console.log(\"Authentication initiated:\", data);\n  },\n  \n  onPreAuthentication: async (data) => {\n    console.log(\"Pre-authentication:\", data);\n    return null; // Return authentication data or null\n  },\n  \n  onPostAuthentication: (data, threeDSData) => {\n    console.log(\"Authentication completed:\", data, threeDSData);\n  },\n  \n  onPreAuthorisation: async (data, threeDSData) => {\n    console.log(\"About to authorise payment:\", data);\n    return null; // Return transaction data or null\n  },\n  \n  onPostAuthorisation: (submitResult) => {\n    hideLoadingSpinner();\n    \n    if (submitResult.success) {\n      console.log(\"Payment authorised successfully\");\n      window.location.href = '/thank-you';\n    } else {\n      console.error(\"Payment failed:\", submitResult.errorMessage);\n      showErrorMessage(submitResult.errorMessage);\n    }\n  },\n  \n  onPreRetrySoftDecline: (result) => {\n    // Return true to retry, false to stop, or object with retry config\n    return confirm(\"Payment was declined. Would you like to retry?\");\n  },\n  \n  onGetFingerprintResult: async () => {\n    // Return device fingerprint data for fraud detection\n    return await getDeviceFingerprint();\n  },\n  \n  onCollectStart: (data) => {\n    console.log(\"Starting data collection:\", data);\n  },\n  \n  onCollectEnd: (data) => {\n    console.log(\"Data collection completed:\", data);\n  },\n  \n  onSubmitError: (error) => {\n    hideLoadingSpinner();\n    console.error(\"Submission error:\", error);\n    showErrorMessage(`Payment failed: ${error.message}`);\n  }\n});\n","lang":"typescript"},"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":"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":["onClick: (event: Event) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when the submit button is clicked. Triggered before any validation or submission logic."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onStartSubmit: () => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler called when submission begins. Triggered after validation passes and before tokenisation begins. Useful for showing loading states or tracking when a submission starts."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onChange: (state: ComponentState) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when the component state changes."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onValidation: (data: ValidationResult[]) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when field validation occurs."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCustomValidation: () => Promise<boolean>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for custom validation before submission. Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," to proceed, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," to prevent submission."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreTokenisation: () => boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler called before tokenisation. Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," to prevent tokenisation."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostTokenisation: (data: CardTokenizationResult) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler called after successful tokenisation with the token data."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreInitiateAuthentication: () => PreInitiateIntegratedAuthenticationData | null | undefined"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler to return authentication data to proceed, or null to skip."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostInitiateAuthentication: (data: AuthenticationResult) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler called after authentication initiation."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreAuthentication: (data: PreInitiateSuccessAuthenticationResult) => Promise<InitiateIntegratedAuthenticationData | null>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler to handle pre-authentication setup."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostAuthentication: (data: AuthenticationResult, threeDSAuthenticationData: ThreeDSAuthenticationData | null) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler called after authentication completion."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreAuthorisation: (data: PreAuthorizationData | null, threeDSAuthenticationData: ThreeDSAuthenticationData | null) => Promise<TransactionInitiationData | null>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler to handle pre-authorisation logic."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostAuthorisation: (submitResult: BaseSubmitResult) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler called after successful payment authorisation."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreRetrySoftDecline: (result: BaseSubmitResult) => boolean | { retry: boolean; updatedConfigs?: object }"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for handling soft declines. Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," or retry object to retry payment, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," to stop."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onGetFingerprintResult: () => Promise<string>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler to provide device fingerprint data for fraud detection."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCollectStart: (data: any) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler called when data collection begins."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCollectEnd: (data: any) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler called when data collection completes."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onSubmitError: (baseSdkException: BaseSdkException) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler called when submission fails with error details."]}]}]}]}]},{"$$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/web/card/events"},"children":["Events"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"methods","__idx":8},"children":["Methods"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The card submit component provides methods for form submission and lifecycle management:"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"submitasync","__idx":9},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["submitAsync()"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Programmatically triggers form submission and payment processing:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"await cardSubmitComponent.submitAsync();\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This method:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Validates all required card fields."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Tokenises the card data."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Performs 3DS authentication (if required)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Initiates payment authorisation."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Executes all configured event handlers in sequence."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Returns a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Promise<void>"]}," that resolves when the submission process completes."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mountcontainerid","__idx":10},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mount(containerId)"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Mounts the component to the DOM:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"cardSubmitComponent.mount('submit-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Parameters:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["containerId"]}," (string) - The ID of the container element"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"unmount","__idx":11},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["unmount()"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Removes the component from the DOM and cleans up resources:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"cardSubmitComponent.unmount();\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["submitAsync()"]}," method is useful for custom submission flows, such as triggering payment from an external button, implementing multi-step forms, or adding custom pre-submission logic."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":12},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-payment-form","__idx":13},"children":["Basic payment form"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A straightforward implementation with essential configuration and error handling:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"// Create card input components\nconst cardNumber = pxpCheckout.create('card-number', {\n  label: \"Card number\",\n  formatCardNumber: true\n});\n\nconst cardExpiry = pxpCheckout.create('card-expiry-date', {\n  label: \"Expiry date\"\n});\n\nconst cardCvc = pxpCheckout.create('card-cvc', {\n  label: \"CVC\"\n});\n\n// Create submit component\nconst cardSubmitComponent = pxpCheckout.create('card-submit', {\n  cardNumberComponent: cardNumber,\n  cardExpiryDateComponent: cardExpiry,\n  cardCvcComponent: cardCvc,\n  \n  submitText: \"Pay now\",\n  disableUntilValidated: true,\n  \n  onPostAuthorisation: (result) => {\n    if (result.success) {\n      window.location.href = '/thank-you';\n    } else {\n      showErrorMessage('Payment was declined. Please try again.');\n    }\n  },\n  \n  onSubmitError: (error) => {\n    console.error('Payment failed:', error);\n    showErrorMessage(error.message);\n  }\n});\n\n// Mount all components\ncardNumber.mount('card-number-container');\ncardExpiry.mount('expiry-date-container');\ncardCvc.mount('cvc-container');\ncardSubmitComponent.mount('submit-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"enterprise-payment-with-full-features","__idx":14},"children":["Enterprise payment with full features"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A comprehensive implementation with AVS, custom styling, and complete event handling:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"// Create all card components\nconst cardNumber = pxpCheckout.create('card-number', {\n  label: \"Card number\",\n  formatCardNumber: true\n});\n\nconst cardExpiry = pxpCheckout.create('card-expiry-date', {\n  label: \"Expiry date\"\n});\n\nconst cardCvc = pxpCheckout.create('card-cvc', {\n  label: \"CVC\"\n});\n\nconst cardHolderName = pxpCheckout.create('card-holder-name', {\n  label: \"Cardholder name\"\n});\n\nconst cardConsent = pxpCheckout.create('card-consent', {\n  consentText: \"Save card for future use\"\n});\n\nconst billingAddress = pxpCheckout.create('billing-address', {\n  showFullForm: true\n});\n\n// Create submit with comprehensive configuration\nconst cardSubmitComponent = pxpCheckout.create('card-submit', {\n  cardNumberComponent: cardNumber,\n  cardExpiryDateComponent: cardExpiry,\n  cardCvcComponent: cardCvc,\n  cardHolderNameComponent: cardHolderName,\n  cardConsentComponent: cardConsent,\n  \n  submitText: \"Complete Payment\",\n  disableUntilValidated: true,\n  id: \"enterprise-submit-btn\",\n  class: \"enterprise-payment-submit\",\n  \n  avsRequest: true,\n  billingAddressComponents: {\n    billingAddressComponent: billingAddress\n  },\n  \n  styles: {\n    button: {\n      backgroundColor: '#2563eb',\n      color: '#ffffff',\n      borderRadius: '6px',\n      padding: '16px 32px',\n      fontSize: '16px',\n      fontWeight: '600'\n    },\n    'button:hover': {\n      backgroundColor: '#1d4ed8'\n    }\n  },\n  \n  onClick: (event) => {\n    if (!validateTermsAcceptance()) {\n      event.preventDefault();\n      showTermsModal();\n    }\n  },\n  \n  onValidation: (validationResults) => {\n    handleValidationFeedback(validationResults);\n  },\n  \n  onPreTokenisation: () => {\n    showLoadingIndicator();\n    return true;\n  },\n  \n  onPostTokenisation: (tokenData) => {\n    console.log('Tokenisation completed:', tokenData.token);\n  },\n  \n  onPostAuthorisation: (submitResult) => {\n    hideLoadingIndicator();\n    \n    if (submitResult.success) {\n      showPaymentSuccessMessage();\n      setTimeout(() => {\n        window.location.href = `/thank-you?order=${submitResult.orderId}`;\n      }, 2000);\n    } else {\n      handlePaymentFailure(submitResult);\n    }\n  },\n  \n  onSubmitError: (error) => {\n    hideLoadingIndicator();\n    \n    switch (error.type) {\n      case 'VALIDATION_ERROR':\n        showValidationErrors(error.details);\n        break;\n      case 'NETWORK_ERROR':\n        showNetworkError();\n        break;\n      default:\n        showGenericError(error.message);\n    }\n  }\n});\n\n// Mount all components\ncardNumber.mount('card-number-container');\ncardExpiry.mount('expiry-date-container');\ncardCvc.mount('cvc-container');\ncardHolderName.mount('cardholder-name-container');\ncardConsent.mount('consent-container');\nbillingAddress.mount('billing-address-container');\ncardSubmitComponent.mount('submit-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-validation-flow","__idx":15},"children":["Custom validation flow"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const cardSubmitComponent = pxpCheckout.create('card-submit', {\n  cardNumberComponent: cardNumber,\n  cardExpiryDateComponent: cardExpiry,\n  cardCvcComponent: cardCvc,\n  \n  submitText: \"Process Payment\",\n  disableUntilValidated: true,\n  \n  onCustomValidation: async () => {\n    // Check terms acceptance\n    const termsAccepted = document.getElementById('terms-checkbox')?.checked;\n    if (!termsAccepted) {\n      showErrorMessage(\"Please accept the terms and conditions\");\n      return false;\n    }\n    \n    // Verify email\n    const email = document.getElementById('email-input')?.value;\n    if (!email || !isValidEmail(email)) {\n      showErrorMessage(\"Please enter a valid email address\");\n      return false;\n    }\n    \n    // All custom validations passed\n    return true;\n  },\n  \n  onPostAuthorisation: (result) => {\n    if (result.success) {\n      // Send confirmation email\n      sendConfirmationEmail(result.transactionId);\n      window.location.href = '/success';\n    }\n  }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"programmatic-submission","__idx":16},"children":["Programmatic submission"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const cardSubmitComponent = pxpCheckout.create('card-submit', {\n  cardNumberComponent: cardNumber,\n  cardExpiryDateComponent: cardExpiry,\n  cardCvcComponent: cardCvc,\n  \n  hideSubmitButton: true, // Hide the default button\n  \n  onPostAuthorisation: (result) => {\n    if (result.success) {\n      window.location.href = '/thank-you';\n    }\n  }\n});\n\ncardSubmitComponent.mount('submit-container');\n\n// Custom submit button\ndocument.getElementById('custom-pay-button')?.addEventListener('click', async () => {\n  try {\n    await cardSubmitComponent.submitAsync();\n  } catch (error) {\n    console.error('Payment failed:', error);\n    showErrorMessage('Unable to process payment');\n  }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"soft-decline-retry-handling","__idx":17},"children":["Soft decline retry handling"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const cardSubmitComponent = pxpCheckout.create('card-submit', {\n  cardNumberComponent: cardNumber,\n  cardExpiryDateComponent: cardExpiry,\n  cardCvcComponent: cardCvc,\n  \n  submitText: \"Pay Now\",\n  \n  onPreRetrySoftDecline: (result) => {\n    // Show custom retry dialog\n    const shouldRetry = confirm(\n      `Payment was declined: ${result.declineReason}\\n\\n` +\n      `Would you like to try again?`\n    );\n    \n    if (shouldRetry) {\n      // Optionally update configuration for retry\n      return {\n        retry: true,\n        updatedConfigs: {\n          applyExemption: true // Try with SCA exemption\n        }\n      };\n    }\n    \n    return false;\n  },\n  \n  onPostAuthorisation: (result) => {\n    if (result.success) {\n      showSuccessMessage('Payment processed successfully');\n    } else if (result.retryAttempted) {\n      showErrorMessage('Payment declined after retry. Please use a different card.');\n    }\n  }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-3ds-authentication-handling","__idx":18},"children":["With 3DS authentication handling"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const cardSubmitComponent = pxpCheckout.create('card-submit', {\n  cardNumberComponent: cardNumber,\n  cardExpiryDateComponent: cardExpiry,\n  cardCvcComponent: cardCvc,\n  \n  submitText: \"Secure Payment\",\n  \n  onPreInitiateAuthentication: () => {\n    console.log(\"Preparing 3DS authentication\");\n    showLoadingMessage(\"Preparing secure authentication...\");\n    return null;\n  },\n  \n  onPostInitiateAuthentication: (data) => {\n    console.log(\"3DS authentication initiated:\", data);\n    showLoadingMessage(\"Please complete authentication...\");\n  },\n  \n  onPostAuthentication: (data, threeDSData) => {\n    if (data.authenticated) {\n      console.log(\"Authentication successful\");\n      showLoadingMessage(\"Processing payment...\");\n    } else {\n      console.log(\"Authentication failed or not required\");\n    }\n  },\n  \n  onPostAuthorisation: (result) => {\n    hideLoadingMessage();\n    \n    if (result.success) {\n      showSuccessMessage(\"Payment completed successfully\");\n      window.location.href = '/confirmation';\n    } else {\n      showErrorMessage(result.errorMessage || \"Payment failed\");\n    }\n  },\n  \n  onSubmitError: (error) => {\n    hideLoadingMessage();\n    console.error(\"Payment error:\", error);\n    showErrorMessage(`Payment failed: ${error.message}`);\n  }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information about integration and events, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/events"},"children":["Events"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/data-validation"},"children":["Data validation"]},"."]}]}]},"headings":[{"value":"Card submit","id":"card-submit","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":"Methods","id":"methods","depth":2},{"value":"submitAsync()","id":"submitasync","depth":3},{"value":"mount(containerId)","id":"mountcontainerid","depth":3},{"value":"unmount()","id":"unmount","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"Basic payment form","id":"basic-payment-form","depth":3},{"value":"Enterprise payment with full features","id":"enterprise-payment-with-full-features","depth":3},{"value":"Custom validation flow","id":"custom-validation-flow","depth":3},{"value":"Programmatic submission","id":"programmatic-submission","depth":3},{"value":"Soft decline retry handling","id":"soft-decline-retry-handling","depth":3},{"value":"With 3DS authentication handling","id":"with-3ds-authentication-handling","depth":3}],"frontmatter":{"seo":{"title":"Card submit"}},"lastModified":"2026-05-19T09:47:25.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/card/card-submit","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}