> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tight.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customer-facing Invoice

> The invoice view your customers see when they receive an invoice

## Overview

While the [Invoice Dashboard](/embeddable-ui/react/invoicing/invoice-dashboard) provides your users with what they need to create and manage invoices, the Customer-facing Invoice allows your users' customers to view and pay their invoices.

## Embedding the Customer-Facing Invoice

To initialize the Tight Embedded experience in your React project, follow the instructions on [Embedding Tight's white-labeled UI](/embeddable-ui/react/patterns/embedding).

Below is an example embedding of the Customer-Facing Invoice:

```TSX InvoicePaymentScreen.tsx theme={null}
import { CustomerInvoice, Tight } from "@tight-embedded/react";
import "@tight-embedded/react/index.css";

function InvoicePaymentScreen({ accessToken }) {
    return (
      <Tight environment="SANDBOX" accessToken={accessToken} >
        <CustomerInvoice invoiceId={"inv_12345"} invoiceKey={"1234.abcdef"} />
      </Tight>
    )
}
```

## Props

<ParamField body={"invoiceId"} type={"string"}>
  The ID of the invoice to display to the customer.
</ParamField>

<ParamField body={"invoiceKey"} type={"string"}>
  The secret key of the invoice so that only authorized customers may access the payment page.
</ParamField>

<ParamField body={"onPayment"} type={"function"}>
  A function that is called when the user submits a payment. This is useful for triggering real-time notifications or
  logging.
</ParamField>