Customizing the Web SDK User Interface (UI)

The following customization options are applied through client-side JavaScript and are not directly part of the Web SDK JavaScript library. For merchant developers, this means applying these changes to the SDK UI on your website.

customStyle Object

The customStyle object contains nested objects for different HTML elements, each with specific style properties. Below are the details of each customizable element and their respective properties:

Structure and Elements

The customStyle object contains nested objects for different HTML elements, each with specific style properties. Below are the details of each customizable element and their respective properties:

• Input Element
  • color: Text color (e.g., "green").
  • fontSize: Font size (e.g., "12px").
  • borderRadius: Corner radius (e.g., "0px").
  • borderColor: Border color (e.g., "red").
  • backgroundColor: Background color (e.g., "pink").
  • height: Element height (e.g., "70px").
  • padding: Inner spacing (e.g., "5px").
  • pseudoStyles: Styles for pseudo-classes like hover.
    • hover:
      • color: Text color on hover (e.g., "red").
      • backgroundColor: Background color on hover (e.g., "lightgray").
• Select Element
  • color: Text color (e.g., "green").
  • fontSize: Font size (e.g., "12px").
  • borderRadius: Corner radius (e.g., "0px").
  • borderColor: Border color (e.g., "red").
  • backgroundColor: Background color (e.g., "pink").
  • height: Element height (e.g., "70px").
  • padding: Inner spacing (e.g., "5px").
• Label Element
  • color: Text color (e.g., "purple").
  • fontSize: Font size (e.g., "12px").
  • marginTop: Top margin (e.g., "0px").
  • marginBottom: Bottom margin (e.g., "0px").
• TabSlider Element
  • height: Element height (e.g., "60px").
  • backgroundColor: Background color (e.g., "cyan").
  • borderColor: Border color (e.g., "red").
  • borderWidth: Border width (e.g., "1px").
  • borderStyle: Border style (e.g., "solid").
  • borderRadius: Corner radius (e.g., "0px").
• SavedCardBox Element
  • borderColor: Border color (e.g., "cyan").
  • borderWidth: Border width (e.g., "1px").
  • borderStyle: Border style (e.g., "solid").
  • borderRadius: Corner radius (e.g., "0px").
  • backgroundColor: Background color (e.g., "yellow").
• Slider Element
  • borderColor: Border color (e.g., "cyan").
  • borderWidth: Border width (e.g., "1px").
  • borderStyle: Border style (e.g., "solid").
  • borderRadius: Corner radius (e.g., "0px").
  • backgroundColor: Background color (e.g., "yellow").
• SavedCardsBox Element
  • minWidth: Minimum width (e.g., "300px").
  • width: Width (e.g., "420px").
  • marginTop: Top margin (e.g., "160px").
• NewCardBox Element
  • minWidth: Minimum width (e.g., "300px").
  • width: Width (e.g., "420px").
  • marginTop: Top margin (e.g., "160px").

Example

const customStyle = {
    input: {
        color: "green",
        fontSize: "12px",
        borderRadius: "0px",
        borderColor: "red",
        backgroundColor: "pink",
        height: "70px",
        padding: "5px",
        pseudoStyles: {
            hover: {
                color: "red",
                backgroundColor: "lightgray"
            }
        },
    },
    select: {
        color: "green",
        fontSize: "12px",
        borderRadius: "0px",
        borderColor: "red",
        backgroundColor: "pink",
        height: "70px",
        padding: "5px",
    },
    label: {
        color: "purple",
        fontSize: "12px",
        marginTop: "0px",
        marginBottom: "0px",
    },
    tabSlider: {
        height: "60px",
        backgroundColor: "cyan",
        borderColor: "red",
        borderWidth: "1px",
        borderStyle: "solid",
        borderRadius: "0px",
    },
    savedCardBox: {
        borderColor: "cyan",
        borderWidth: "1px",
        borderStyle: "solid",
        borderRadius: "0px",
        backgroundColor: "yellow",
    },
    slider: {
        borderColor: "cyan",
        borderWidth: "1px",
        borderStyle: "solid",
        borderRadius: "0px",
        backgroundColor: "yellow",
    },
    savedCardsBox: {
        minWidth: "300px",
        width: "420px",
        marginTop: "160px",
    },
    newCardBox: {
        minWidth: "300px",
        width: "420px",
        marginTop: "160px",
    },
};