# Payment Methods Styles Props

You can customize the Authorize Module to integrate better with your website's design style. For this, you can use the optional parameters `style` and `labels` when calling the `window.listOfpaymentMethodsConfig` function.

<CardGroup cols={2}>

<Card title="List Of Payment Methods Page" href="#list-of-payment-methods-page" />

<Card title="Add Or Update Payment Method Page" href="#add-or-update-payment-method-page" />
</CardGroup>

## List Of Payment Methods Page

You can customize the following properties in your List Of Payment Methods page:

### Labels

<table><tbody><tr><th><strong>Prop Name</strong></th><th><strong>Type</strong></th><th><strong>Description</strong></th><th><strong>Default Value</strong></th></tr><tr><td>`widgetHeaderTitle`</td><td>`string`</td><td>The title displayed in the header of the widget container.</td><td>`Manage Payment Methods`</td></tr><tr><td>`addNewButton`</td><td>`string`</td><td>The label for the "Add New" button used to add a new entry.</td><td>`Add New`</td></tr><tr><td>`loadingText`</td><td>`string`</td><td>The caption displayed while the widget is in a loading state.</td><td>`Loading`</td></tr><tr><td>`tableHeaderColumns`</td><td>`array` or `list`</td><td>The table header labels for displaying card details in columns.</td><td>`['Card Holder', 'Card Number', 'Expiry', 'Action']`</td></tr></tbody></table>

### Styles

<table><tbody><tr><th><strong>Prop Name</strong></th><th><strong>Description</strong></th></tr><tr><td>`widgetContainer`</td><td>The main container or wrapper for the entire page widget.</td></tr><tr><td>`widgetHeader`</td><td>The header of the widget, containing the "Manage Payment Methods" label and the "Add New" button.</td></tr><tr><td>`widgetHeaderTitle`</td><td>The title displayed in the widget header, typically labeled "Manage Payment Methods."</td></tr><tr><td>`addNewButton`</td><td>The button labeled "Add New" for adding new entries.</td></tr><tr><td>`loadingText`</td><td>The text or spinner displayed during loading states.</td></tr><tr><td>`tableWrapper`</td><td>The container or scrollable div that wraps the table.</td></tr><tr><td>`tableHeaderRow`</td><td>The row representing the header section of the table.</td></tr><tr><td>`tableHeaderCell`</td><td>The individual cells or columns within the table header.</td></tr><tr><td>`tableBodyRow`</td><td>The row representing the body section of the table.</td></tr><tr><td>`tableBodyCell`</td><td>The individual cells or columns within the table body.</td></tr><tr><td>`editIconWrapper`</td><td>The container for the edit icon.</td></tr><tr><td>`editIcon`</td><td>The icon used to edit table entries.</td></tr><tr><td>`deleteIconWrapper`</td><td>The container for the delete icon.</td></tr><tr><td>`deleteIcon`</td><td>The icon used to delete table entries.</td></tr></tbody></table>

Each property above must receive an object as the value. This value can contain style and cssClass keys:

<table><tbody><tr><th><strong>Key</strong></th><th><strong>Type</strong></th><th><strong>Description</strong></th></tr><tr><td>`style`</td><td>`object`</td><td>An object containing valid CSS styles that will be applied to the HTML element.</td></tr><tr><td>`cssClass`</td><td>`string`</td><td>A class name to be added to the HTML element, allowing for custom styling via CSS.</td></tr></tbody></table>

### Example Usage

The image below shows what each available property affects:

<Image src="/images/payment-method-list-page.png" size="75%" />

## Add Or Update Payment Method Page

Use the following properties to customize styles and labels, and also uiConfig for the add or update payment method page:

### Labels

<table><tbody><tr><th><strong>Prop Name</strong></th><th><strong>Type</strong></th><th><strong>Description</strong></th><th><strong>Default Value</strong></th></tr><tr><td>`widgetHeaderTitle`</td><td>`string`</td><td>The title displayed in the widget header.</td><td>`Add/Update Payment Methods`</td></tr><tr><td>`mandatoryFieldsCaption`</td><td>`string`</td><td>The caption indicating mandatory fields in the form.</td><td>`* Marks Fields are mandatory`</td></tr><tr><td>`cardInformationHeaderLabel`</td><td>`string`</td><td>The section header label for the "Card Information" section.</td><td>`Card Information`</td></tr><tr><td>`billingInformationHeaderLabel`</td><td>`string`</td><td>The section header label for the "Billing Information" section.</td><td>`Billing Information`</td></tr><tr><td>`cardHolderName`</td><td>`string`</td><td>The label for the cardholder name input field.</td><td>`Card Holder Name`</td></tr><tr><td>`cardNumber`</td><td>`string`</td><td>The label for the card number input field.</td><td>`Card Number`</td></tr><tr><td>`cardExpiration`</td><td>`string`</td><td>The label for the card expiration dropdown field.</td><td>`Card Expiration`</td></tr><tr><td>`cvv`</td><td>`string`</td><td>The label for the CVV input field.</td><td>`CVV`</td></tr><tr><td>`country`</td><td>`string`</td><td>The label for the country dropdown field.</td><td>`Country`</td></tr><tr><td>`address1`</td><td>`string`</td><td>The label for the first address input field.</td><td>`Address 1`</td></tr><tr><td>`address2`</td><td>`string`</td><td>The label for the second address input field.</td><td>`Address 2`</td></tr><tr><td>`city`</td><td>`string`</td><td>The label for the city input field.</td><td>`City`</td></tr><tr><td>`state`</td><td>`string`</td><td>The label for the state dropdown or input field.</td><td>`State`</td></tr><tr><td>`zipCode`</td><td>`string`</td><td>The label for the zip code input field.</td><td>`Zip Code`</td></tr><tr><td>`updateButton`</td><td>`string`</td><td>The label for the update payment methods button.</td><td>`Update`</td></tr><tr><td>`addButton`</td><td>`string`</td><td>The label for the add payment methods button.</td><td>`Add Payment Method`</td></tr></tbody></table>

### Styles

<table><tbody><tr><th><strong>Prop Name</strong></th><th><strong>Description</strong></th></tr><tr><td>`widgetContainer`</td><td>The main page or widget container.</td></tr><tr><td>`widgetHeader`</td><td>The widget header containing the "Manage Payment Methods" label and the back button.</td></tr><tr><td>`backButton`</td><td>The button to navigate back to the previous screen.</td></tr><tr><td>`widgetHeaderTitle`</td><td>The caption for the "Manage Payment Methods" section.</td></tr><tr><td>`mandatoryFieldsCaption`</td><td>Caption indicating mandatory fields, with a default text color of crimson.</td></tr><tr><td>`sectionHeader`</td><td>Section headers for "Card Information" and "Billing Information".</td></tr><tr><td>`label`</td><td>Labels for form inputs, dropdowns, or radio buttons.</td></tr><tr><td>`input`</td><td>Input fields or textboxes in the form.</td></tr><tr><td>`dropdown`</td><td>Dropdown fields in the form.</td></tr><tr><td>`updateButton`</td><td>Button labeled "Update" for updating payment methods.</td></tr><tr><td>`addButton`</td><td>Button labeled "Add Payment Method" for adding new payment methods.</td></tr></tbody></table>

### uiConfig

The uiConfig parameter allows you to add two boolean props to it:

<table><tbody><tr><th><strong>Prop Name</strong></th><th><strong>Type</strong></th><th><strong>Description</strong></th><th><strong>Default Value</strong></th></tr><tr><td>`showCardImage`</td><td>`boolean`</td><td>Controls the visibility of the card image. If `true`, the card image is visible. Set to `false` to hide it.</td><td>`true`</td></tr><tr><td>`showBillingInfo`</td><td>`boolean`</td><td>Controls the visibility of the billing information section. If `true`, the section is visible. Set to `false` to hide it.</td><td>`true`</td></tr></tbody></table>

### Example Usage

The image below shows what each available property affects:

<Image src="/images/payment-method-add-page.png" size="75%" />

## Full Code Example

The code block below presents a complete example with all available parameters for the `window.authorizePaymentConfig` function:

<Accordion title="Example">
  ```javascript
  window.addPaymentMethodsConfig = {
    customerReference: "123545745454",
    merchantIdentifier: "ACVX458KJGJLAS7878DSADS",
    labels: {
      widgetHeaderTitle: "Add/Update Payment Methods",
      mandatoryFieldsCaption: "* Marks Fields are mandatory",
      cardInformationHeaderLabel: "Card Info",
      billingInformationHeaderLabel: "Billing Info",
      cardHolderName: "Holder Name",
      cardNumber: "Number",
      cardExpiration: "Expiry",
      cvv: "CVV",
      country: "Country",
      state: "StRegonate",
      address1: "Street",
      address2: "Street 1",
      city: "CITY",
      zipCode: "Zip",
      updateButton: "Update",
      addButton: "Add Payment Method",
      backButton: "Back"
    },
    styles: {
      widgetContainer: {
        style: {
          padding: "20px",
          backgroundColor: "#f9f9f9"
        },
        cssClass: "widget-container-class"
      },

      widgetHeader: {
        style: {
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          paddingBottom: "10px",
          borderBottom: "1px solid #ddd"
        },
        cssClass: "widget-header-class"
      },
      backButton: {
        style: {
          backgroundColor: "#e0e0e0",
          border: "none",
          padding: "8px 16px",
          cursor: "pointer"
        },
        cssClass: "back-button-class"
      },
      input: {
        style: {
          border: "2px dashed cyan",
          padding: "10px",
          borderRadius: "4px"
        },
        cssClass: "input-class"
      },
      dropdown: {
        style: {
          padding: "10px",
          borderRadius: "4px"
        },
        cssClass: "dropdown-class"
      },
      sectionHeader: {
        style: {
          color: "purple",
          fontWeight: "bold",
          marginTop: "20px",
          marginBottom: "10px"
        },
        cssClass: "section-header-class"
      },
      label: {
        style: {
          display: "block",
          marginBottom: "5px",
          fontWeight: "600"
        },
        cssClass: "label-class"
      },
      payButton: {
        style: {
          backgroundColor: "#28a745",
          color: "#fff",
          border: "none",
          padding: "10px 20px",
          cursor: "pointer",
          borderRadius: "4px"
        },
        cssClass: "pay-button-class"
      },
      updateButton: {
        style: {
          backgroundColor: "#007bff",
          color: "#fff",
          border: "none",
          padding: "10px 20px",
          cursor: "pointer",
          borderRadius: "4px"
        },
        cssClass: "update-button-class"
      },
      addButton: {
        style: {
          backgroundColor: "#17a2b8",
          color: "#fff",
          border: "none",
          padding: "10px 20px",
          cursor: "pointer",
          borderRadius: "4px"
        },
        cssClass: "add-button-class"
      },
      tableWrapper: {
        style: {
          overflowX: "auto",
          marginTop: "20px"
        },
        cssClass: "table-wrapper-class"
      },
      tableHeaderRow: {
        style: {
          backgroundColor: "#f1f1f1"
        },
        cssClass: "table-header-row-class"
      },
      tableHeaderCell: {
        style: {
          padding: "10px",
          textAlign: "left",
          borderBottom: "1px solid #ddd"
        },
        cssClass: "table-header-cell-class"
      },
      tableBodyRow: {
        style: {
          borderBottom: "1px solid #ddd"
        },
        cssClass: "table-body-row-class"
      },
      tableBodyCell: {
        style: {
          padding: "10px",
          textAlign: "left"
        },
        cssClass: "table-body-cell-class"
      },
      editIconWrapper: {
        style: {
          display: "inline-block",
          cursor: "pointer"
        },
        cssClass: "edit-icon-wrapper-class"
      },
      editIcon: {
        style: {
          width: "16px",
          height: "16px",
          fill: "#007bff"
        },
        cssClass: "edit-icon-class"
      },
      deleteIconWrapper: {
        style: {
          display: "inline-block",
          cursor: "pointer"
        },
        cssClass: "delete-icon-wrapper-class"
      },
      deleteIcon: {
        style: {
          width: "16px",
          height: "16px",
          fill: "#dc3545"
        },
        cssClass: "delete-icon-class"
      }
    },
    uiConfig: {
      showCardImage: true,      // Default: true (Card image is visible)
      showBillingInfo: true     // Default: true (Billing information section is visible)
    }
  };
  ```
</Accordion>