> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-in-group-react-v6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Receipt

> Receipt — CometChat documentation.

The CometChatReceipt component renders the receipts such as sending, sent, delivered, read and error state indicator of a message.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/aivwqvtoO_fTqj20/images/f82a1b5b-a1w8ok8jbsn50ui54tdfv1qqk5yregcweimaoo5kdk2eymhorifbpx6ksagig4g7-c4c6ce1ea172a4f9d33782a390b4aeee.png?fit=max&auto=format&n=aivwqvtoO_fTqj20&q=85&s=480e1a9ec800713cbdc2a38907b4b8b6" width="509" height="472" data-path="images/f82a1b5b-a1w8ok8jbsn50ui54tdfv1qqk5yregcweimaoo5kdk2eymhorifbpx6ksagig4g7-c4c6ce1ea172a4f9d33782a390b4aeee.png" />
</Frame>

## How to integrate CometChatReceipt ?

Since `CometChatReceipt` is a custom view, it can be added directly in the layout file or you can use it in Java. `CometChatReceipt` includes various attributes and methods to customize its UI.

#### Usage in XML

<Tabs>
  <Tab title="XML">
    ```xml theme={null}
    <com.cometchat.chatuikit.shared.views.CometChatReceipt.CometChatReceipt
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/receipt"
            />
    ```
  </Tab>
</Tabs>

## XML Attributes

To style or customize the `CometChatMessageReceipt`, you can use the available parameters or methods.

| Attributes               | Description                                                                                                  |
| ------------------------ | ------------------------------------------------------------------------------------------------------------ |
| app:messageProgressIcon  | It is use to pass user defined image in to the MessageReceipt, to change the icon While sending the message. |
| app:messageSentIcon      | It is use to pass user defined image in to the MessageReceipt, to change the icon When Message is sent.      |
| app:messageDeliveredIcon | It is use to pass user defined image in to the MessageReceipt, to change the icon When Message is delivered. |
| app:messageReadIcon      | It is use to pass user defined image in to the MessageReceipt, to change the icon When Message is read.      |
| app:messageErrorIcon     | It is use to pass user defined image in to the MessageReceipt, to change the icon While error occurs.        |

<Tabs>
  <Tab title="XML">
    ```xml theme={null}
    <com.cometchatworkspace.components.shared.secondaryComponents.CometChatMessageReceipt
                    android:id="@+id/receipt"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:messageProgressIcon="@drawable/ic_message_progress"
                    app:messageSentIcon="@drawable/ic_message_sent"
                    app:messageDeliveredIcon="@drawable/ic_message_delivered"
                    app:messageReadIcon="@drawable/ic_message_read"
                    app:messageErrorIcon="@drawable/ic_message_error"        
                      />
    ```
  </Tab>
</Tabs>

## Methods

| Methods              | Type     | Description                                                                                                  |
| -------------------- | -------- | ------------------------------------------------------------------------------------------------------------ |
| **setReceipt**       | Receipt  | This method is used to set receipt                                                                           |
| **setWaitIcon**      | Drawable | It is use to pass user defined image in to the MessageReceipt, to change the icon While sending the message. |
| **setSentIcon**      | Drawable | It is use to pass user defined image in to the MessageReceipt, to change the icon When Message is sent.      |
| **setDeliveredIcon** | Drawable | It is use to pass user defined image in to the MessageReceipt, to change the icon When Message is delivered. |
| **setReadIcon**      | Drawable | It is use to pass user defined image in to the MessageReceipt, to change the icon When Message is read.      |
| **setErrorIcon**     | Drawable | It is use to pass user defined image in to the MessageReceipt, to change the icon While error occurs.        |

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    CometChatReceipt receipt = findViewById(R.id.receipt);
    //syntax for setReceipt(Receipt)
    receipt.setReceipt(Receipt.SENT);
    //syntax for setDeliveredIcon
    receipt.setDeliveredIcon(getResources().getDrawable(R.drawable.ic_message_delivered));
    //syntax for setReadIcon  
    receipt.setReadIcon(getResources().getDrawable(R.drawable.ic_message_read));
    //syntax for setSentIcon  
    receipt.setSentIcon(getResources().getDrawable(R.drawable.ic_message_sent));
    //syntax for setWaitIcon  
    receipt.setWaitIcon(getResources().getDrawable(R.drawable.cc_progress_drawable));
    //syntax for setErrorIcon  
    receipt.setErrorIcon(getResources().getDrawable(R.drawable.cc_error));
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val receipt = findViewById<CometChatReceipt>(R.id.receipt)

    				//syntax for setReceipt(Receipt)
            receipt.setReceipt(Receipt.SENT)

    				//syntax for setDeliveredIcon
            receipt.deliveredIcon = resources.getDrawable(R.drawable.ic_message_delivered)

    				//syntax for setReadIcon  
            receipt.readIcon = resources.getDrawable(R.drawable.ic_message_read)

    				//syntax for setSentIcon  
            receipt.sentIcon = resources.getDrawable(R.drawable.ic_message_sent)

    				//syntax for setWaitIcon  
            receipt.waitIcon = resources.getDrawable(R.drawable.cc_progress_drawable)
     
    				//syntax for setErrorIcon  
            receipt.errorIcon = resources.getDrawable(R.drawable.cc_error)
    ```
  </Tab>
</Tabs>