---
page_source: https://docs.juspay.io/clicktopay/docs/how-to-integrate/customise-uiux
page_title: Customise UI/UX
---


# **Render Functions in ClickToPayWidget** 



The **ClickToPayWidget**  includes various render functions that allow you to customize specific components of the payment interface. Each function is dedicated to rendering a particular UI element, enabling flexible and user-centric design adjustments.


## 1.**renderExpandableSection** 



Creates accordion-style expandable sections that contain payment options.


#### javascript Code Snippet:

```javascript
renderExpandableSection: (props, elem) => {
    // Clean up any previously mounted component
    cleanupComponent(elem);

    // Create and mount expandable section component with props
    const component = createComponent(YourExpandableSection, {
        title: props.title, // Section title (e.g., "Saved Cards", "Add New Card")
        count: props.count, // Number of items in section
        isExpanded: props.isExpanded, // Controls section's expanded/collapsed state
        onToggle: props.onToggle // Handler for expand/collapse actions
    });

    // Mount component and store reference
    mountComponent(elem, component);

    // Find and return the content container
    const contentDiv = findContentContainer(elem);
    return contentDiv; // Returns container where children will be mounted
};
```



## **2. renderExpandableSectionDivider** 



Creates visual separation between expandable sections.


#### javascript Code Snippet:

```javascript
renderExpandableSectionDivider: (elem: HTMLElement) => {
    // Clean up any previously mounted component
    cleanupComponent(elem);

    // Create and mount the divider component
    const component = createComponent(YourDividerComponent);
    mountComponent(elem, component);
};

```



## **3. renderPaymentOption** 



Wraps saved cards with radio button selection functionality


#### javascript Code Snippet:

```javascript
renderPaymentOption: (props, elem) => {
    // Clean up any previously mounted component
    cleanupComponent(elem);

    // Create and mount the payment option component
    const component = createComponent(YourPaymentOption, {
        value: props.value, // Payment option identifier
        selectedPayment: props.selectedPayment, // Currently selected payment
        onPaymentChange: props.onPaymentChange // Selection change handler
    });

    // Mount the component onto the DOM element
    mountComponent(elem, component);

    // Locate and return the content container
    const contentDiv = findContentContainer(elem);
    return contentDiv; // Returns container for the saved card widget
};
```



## **4. renderSavedCardWidget** 



Creates visual separation between saved card widgets.


#### javascript Code Snippet:

```javascript
renderSavedCardWidget: (props, elem) => {
    // Clean up any previously mounted component
    cleanupComponent(elem);

    // Create and mount the saved card widget component
    const component = createComponent(YourSavedCardWidget, {
        card: props.card // Card details (e.g., brand, last 4 digits, etc.)
    });

    // Mount the component onto the DOM element
    mountComponent(elem, component);
};

```