Skip to main content

​
Overview

While the 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. Below is an example embedding of the Customer-Facing Invoice:
InvoicePaymentScreen.tsx
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

​
invoiceId
string
The ID of the invoice to display to the customer.
​
invoiceKey
string
The secret key of the invoice so that only authorized customers may access the payment page.
​
onPayment
function
A function that is called when the user submits a payment. This is useful for triggering real-time notifications or logging.