# Authorize 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.authorizePaymentConfig` function.

<CardGroup cols={3}>

<Card title="Main Page" href="#main-page" />

<Card title="Existing Payment Methods Page" href="#existing-payment-methods-page" />

<Card title="Add New Card Page" href="#add-new-card-page" />
</CardGroup>

## Main Page

You can customize the following properties in your main page:

### Labels

<table><tbody><tr><th><strong>Property</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>`paymentMethodOptions`</td><td>`array`</td><td>An array of tab labels for selecting payment methods.</td><td>`["Pay with saved card", "Pay with saved card"]`</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 widget.</td></tr><tr><td>`widgetHeader`</td><td>The header section of the widget, which includes the title.</td></tr><tr><td>`widgetHeaderTitle`</td><td>The text for the widget's header title.</td></tr><tr><td>`tabsContainer`</td><td>The container that holds the tab options for different payment methods.</td></tr><tr><td>`tabItem`</td><td>Individual tab items, such as `"Pay with saved card"` and `"Pay with new card"`.</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 following code block exemplifies the use of this parameters in your function:

```js
window.authorizePaymentConfig = {
  // Required configurations
  ...
  labels : {
    widgetHeaderTitle: 'Manage Payment Method',
    paymetMethodOptions: ['Page 1', 'Page 2']
  },
  styles: {
    widgetContainer: {
      style: {
        "background-color":"green",
        "color": "blue"
        },
        cssClass: "text-danger bg-light"
      },
    widgetHeader: {
      style: {
          display: "none"
      },
      cssClass: ""
    }
  }
}
```

## Existing Payment Methods Page

Use the following properties to configure styles and labels for your existing 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>`loadingText`</td><td>`string`</td><td>The label text displayed while the API fetch is in progress.</td><td>`Loading`</td></tr><tr><td>`cardExpiry`</td><td>`string`</td><td>The label text for the card expiry date field.</td><td>`Valid Thru`</td></tr><tr><td>`cvvInputPlaceHolder`</td><td>`string`</td><td>The placeholder text for the CVV input field.</td><td>`CVV`</td></tr><tr><td>`payButton`</td><td>`string`</td><td>The label text for the pay button.</td><td>`Pay Now`</td></tr><tr><td>`editIconTitle`</td><td>`string`</td><td>The tooltip text displayed when hovering over the edit button.</td><td>`Edit`</td></tr><tr><td>`deleteIconTitle`</td><td>`string`</td><td>The tooltip text displayed when hovering over the delete button.</td><td>`Delete`</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 wrapper or container for the entire page widget.</td></tr><tr><td>`loadingText`</td><td>The text displayed while the loader is active.</td></tr><tr><td>`listContainer`</td><td>The container for the list of saved cards.</td></tr><tr><td>`listItem`</td><td>Individual item representing a saved card in the list.</td></tr><tr><td>`listSelectionRadio`</td><td>The radio button for selecting a saved card from the list.</td></tr><tr><td>`cardHolderName`</td><td>The name of the cardholder displayed on the card.</td></tr><tr><td>`cardNumber`</td><td>The number of the saved card.</td></tr><tr><td>`cardExpiry`</td><td>The expiry date of the saved card.</td></tr><tr><td>`cvvInput`</td><td>The text input field for entering the card's CVV code.</td></tr><tr><td>`payButton`</td><td>The button labeled "Pay Now" to submit the payment.</td></tr><tr><td>`editIconWrapper`</td><td>The container for the edit icon.</td></tr><tr><td>`editIcon`</td><td>The icon used for editing the card details.</td></tr><tr><td>`deleteIconWrapper`</td><td>The container for the delete icon.</td></tr><tr><td>`deleteIcon`</td><td>The icon used for deleting a saved card.</td></tr></tbody></table>

## Add New Card Page

Use the following properties to configure styles and labels, and also events for the add new card 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>`mandatoryFieldsCaption`</td><td>`string`</td><td>The label displayed at the top of the form, indicating mandatory fields.</td><td>`* Marks Fields are mandatory`</td></tr><tr><td>`cardInformationHeaderLabel`</td><td>`string`</td><td>The label for the "Card Information" section of the form.</td><td>`Card 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 date input 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>`billingInformationHeaderLabel`</td><td>`string`</td><td>The label for the "Billing Information" section of the form.</td><td>`Billing Information`</td></tr><tr><td>`country`</td><td>`string`</td><td>The label for the country selection input field.</td><td>`Country`</td></tr><tr><td>`state`</td><td>`string`</td><td>The label for the state selection input field.</td><td>`State`</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>`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 button.</td><td>`Update`</td></tr><tr><td>`payButton`</td><td>`string`</td><td>The label for the pay button.</td><td>`Pay`</td></tr><tr><td>`validationMessages`</td><td>`object`</td><td>Allows you to override the default validation error messages, with a structure discussed in section 4(b).</td><td>N/A</td></tr></tbody></table>

### Styles

<table><tbody><tr><th><strong>Prop Name</strong></th><th><strong>Description</strong></th></tr><tr><td>`mandatoryFieldsCaption`</td><td>The label at the top of the form indicating mandatory fields.</td></tr><tr><td>`sectionHeader`</td><td>The header label for form sections like "Card Information" and "Billing Information".</td></tr><tr><td>`label`</td><td>The labels for form inputs or dropdowns (e.g., Card Holder Name, CVV, etc.).</td></tr><tr><td>`input`</td><td>Text input fields in the form (e.g., Card Holder Name, CVV, etc.).</td></tr><tr><td>`dropdown`</td><td>Dropdown fields in the form (e.g., Country, Card expiry dropdown, etc.).</td></tr><tr><td>`validationMessages`</td><td>The text for validation error messages displayed during form submission.</td></tr><tr><td>`payButton`</td><td>The label for the "Pay Now" button.</td></tr><tr><td>`updateButton`</td><td>The label for the "Update" button.</td></tr></tbody></table>

### Events

The add new card page allows you to add a callback event on completion to return the new added credit card information to you.

<table><tbody><tr><th><strong>Available Callback Events</strong></th><th><strong>Description</strong></th></tr><tr><td>`onComplete`</td><td>Triggered when the process is complete, returning updated credit card information.</td></tr></tbody></table>

## 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.authorizePaymentConfig =  {
    authToken: 'byuY5QTlEM0UtM0QzQi00RjdELTlGREUtNDE2OUYxQUJFREQ1OjFiM2I1NzhiLWMwYTctNGI5OC1hNjEyLWU4YTA4ZWJjZTY0Ng==',
    customerReference: "123545745454",
    merchantId: "ACVX458KJGJLAS7878DSADS",
    amount: 40,
    merchantOrderId: "ISH-999",
    currencyCode: "USD",

    //Root or Main Page Styles and Labels
    labels : {
      widgetHeaderTitle: 'Manage Payment Method',
      paymentMethodOptions: ['Pay with saved card', 'Pay with new card']
    },
    styles: {
      widgetContainer: {
        style: {
          "background-color": "#f9f9f9",
          "padding": "20px"
        },
        cssClass: "widget-container-class"
      },
      widgetHeaderTitle: {
        cssClass: "header-title-class",
        style: {
          "font-size": "150%",
          "font-style": "italic",
          color: "teal",
        },
      },
      tabsContainer: {
        style: {
          "border-bottom": "1px solid #ccc"
        },
        cssClass: "tabs-container-class"
      },
      tabItem: {
        style: {
          "padding": "10px",
          "cursor": "pointer"
        },
        cssClass: "tab-item-class"
      }
    },

    // Existing Payment Methods Page Config
    existingPaymentMethodsPage: {
      labels: {
        loadingText: 'Loading...',
        cardExpiry: 'Valid Thru',
        cvvInputPlaceHolder: 'CVV',
        payButton: 'Pay Now',
        editIconTitle: 'Edit',
        deleteIconTitle: 'Delete'
      },
      styles: {
        listContainer: {
          style: {
            "margin-top": "20px"
          },
          cssClass: "list-container-class"
        },
        listItem: {
          style: {
            "padding": "15px",
            "border-bottom": "1px solid #ddd"
          },
          cssClass: "list-item-class"
        },
        cvvInput: {
          style: {
            "width": "100px"
          },
          cssClass: "cvv-input-class"
        },
        payButton: {
          style: {
            "background-color": "#28a745",
            "color": "#fff",
            "border": "none",
            "padding": "10px 20px",
            "cursor": "pointer",
            "border-radius": "4px"
          },
          cssClass: "pay-button-class"
        }
      }
    },

    //Add New Card Page Config
    addNewCardPage: {
      uiConfig: {
        showCardImage: false,
        showBillingInfo: true
      },
      labels: {
        cardInformationHeaderLabel: 'Card Information',
        billingInformationHeaderLabel: 'Billing Information',
        cardHolderName: 'Card Holder Name',
        cardNumber: 'Card Number',
        cardExpiration: 'Card Expiration',
        cvv: 'CVV',
        country: 'Country',
        state: 'State',
        address1: 'Address 1',
        address2: 'Address 2',
        city: 'City',
        zipCode: 'Zip Code',
        updateButton: 'Update',
        payButton: 'Pay Now'
      },
      styles: {
        input: {
          style: {
            'border': "2px dashed cyan",
            'padding': "10px",
            'border-radius': "4px"
          },
          cssClass: "input-class"
        },
        sectionHeader: {
          cssClass: "section-header-class",
          style: {
            color: 'purple',
            'font-weight': 'bold'
          }
        },
        validationFailedMessage: {
          style: {
            'color': 'red',
            'font-size': '14px'
          },
          cssClass: "validation-message-class"
        }
      },
      validationMessages: {
        cardHolderName: "Card Holder Name is required",
        cardNumber: "Invalid Card Number",
        cardExpiration: "Card Expiration Date is required",
        cvv: "CVV is required",
        country: "Country is required",
        address1: "Address 1 is required",
        city: "City is required",
        zipCode: "Invalid Zip Code"
      },
      events: {
        onComplete: function(cardDetails) {
          console.log("Card details submitted: ", cardDetails);
        }
      }
    }
  }
  ```
</Accordion>