> ## 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.

# Embeddable User Interface (Client-facing Invoice)

If you want to get up and running quickly with a proven invoicing, payment (credit card) processing, and reconciliation UX that matches your colors, fonts, and branding, then the Embeddable User Interface is your best bet.

While the [Invoice Dashboard](/v5.0/products/invoicing/embeddable-invoice-dashboard) provides your *users* with what they need to create and manage invoices, the Client-facing Invoice allows your users' *clients* to view and pay their invoices.

## 1. How it works

When your user sends out an invoice, their client will receive an email with a link to view/pay the invoice. When the client presses that link, they will be redirected to a URL of your choosing, with a `clientInvoiceKey` appended. When the client lands on that URL, you can follow the steps below to render the Client-facing Invoice.

## 2. Adding the Client Invoice to your app

Contact us directly at [api@tight.com](mailto:api@tight.com) to let us know your desired URL structure for the Client Invoice. For example, you might use something like:\
Development Environment: `https://dev.myproduct.com/invoices/{clientInvoiceKey}`\
Production Environment: `https://app.myproduct.com/invoices/{clientInvoiceKey}`

When the client lands on `https://app.myproduct.com/invoices/{clientInvoiceKey}`, you should:

a) parse out the `clientInvoiceKey` from the URL\
b) render the Client Invoice, as described below

To render the Client Invoice, you will also need to provide the `elementId` parameter, which is the HTML `id` of the main `<div>` where you would like the Client Invoice to render. Then, you simply need to invoke the following line of javascript:

```javascript theme={null}
Hurdlr.renderClientInvoice(elementId, { 
  clientId: $(client_id),
  environment: "SANDBOX",
  clientInvoiceKey,
  paymentCallbackFunction: myClientInvoiceCallback
});
```

An example of the experience is shown below:

<img src="https://mintcdn.com/tight-7c882d74/Wf-_-tBNZrYWdgZf/v5.0/images/591c98d-clientInvoice.gif?s=982733e8ef8f4626f2799fbb1c07ec1a" alt="Client Invoice Demo" width="1550" height="1000" data-path="v5.0/images/591c98d-clientInvoice.gif" />

## 3. Allowing the user's client to pay an invoice (payment processing)

If you'd like to set up payment processing, take a look at our [Payment Processing documentation](/v5.0/products/invoicing/payment-processing). If you are rolling your own payment processing (I.e. not utilizing our native [Stripe](/v5.0/integrations/payment-processing/stripe/integrating-stripe) or [Moov](/v5.0/integrations/payment-processing/moov) integrations), then there will be a few additional SDK implementation steps to perform, including [adding a callback function to the renderClientInvoice function invocation](/v5.0/products/invoicing/payment-processing#4-processing-a-payment) above.

Don't hesitate to contact us directly at [api@tight.com](mailto:api@tight.com) should you need any help understanding how to add payment processing via the Tight SDK.