` where you would like the Invoice Dashboard to render. When your user taps on your "Invoices" navigation CTA, you simply need to invoke the following line of javascript: ```javascript theme={null} Hurdlr.renderScreen(elementId, 'invoiceDash'); ``` ## 3. Modifying the Payment Processing Options New invoices created from the Invoice Dashboard have several options for how they can be paid. Users can specify which options their clients use to pay them on the invoice form itself. The client can view and pay the invoice through the [Embeddable User Interface (Client-facing Invoice)](/v5.0/products/invoicing/embeddable-client-facing-invoice). Additionally, by clicking on the "Charge Saved Payment Method" toggle, the user can send an email to prompt the client to save a payment method that will be automatically charged for future invoices. 45de71225bdc58ba35273d1e695b7bae7018f32966cd6e54aaecbd8a8b3638ed-Screenshot_2025-01-23_at_2.46.48_PM.png

45de71225bdc58ba35273d1e695b7bae7018f32966cd6e54aaecbd8a8b3638ed-Screenshot_2025-01-23_at_2.46.48_PM.png

If you'd like to customize which payment options are available to users, you can do so by populating a `paymentOptions` array within the options object as follows: ```javascript theme={null} Hurdlr.renderScreen(elementId, 'invoiceDash', { paymentOptions: [ "acceptACH", "acceptCredit", "acceptCash", "autoCharge", ]}); ``` The `paymentOptions` array can contain the following values: | Value | Payment Option | | :----------- | :-------------------------- | | acceptACH | Bank Account (ACH) | | acceptCredit | Credit Card | | acceptCash | Direct Payment from Client | | autoCharge | Charge Saved Payment Method | ## 4. Customizing the UI to match your branding Tight's API team can quickly customize the UI to match your branding. Please follow the instructions on [Customizing the embedded UI to match your branding](/v5.0/getting-started/quickstart/embedded-ui#1-customizing-the-embedded-ui-to-match-your-branding). Some examples of customized experiences are shown below: Invoice Dashboard Demo of custom styling

Invoice Dashboard Demo of custom styling

Invoice Dashboard Demo of custom styling #2

## 5. Handling payment processing interactions 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](/v5.0/products/invoicing/payment-processing#3-creating-a-merchant-account-for-your-user) to perform. 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. ## 6. Redirecting to your payment processing tutorial The Invoice Dashboard renders a CTA banner prompting the user to connect to your payment processor. If you would like to include your own tutorial for this integration, use the Tight Embedded experience's `registerPaymentProcessorTutorialListener` functionality. This listener will render a "view tutorial" button which will invoke the callback function you provide when pressed by your user.

To register the listener, simply add the following line of JS to be ran once after `Hurdlr.init({...})` ```javascript theme={null} Hurdlr.registerPaymentProcessorTutorialListener(myPaymentProcessingTutorialCallback); ``` Your callback function will be invoked with an object `{ type: Hurdlr.PAYMENT_PROCESSOR_TUTORIAL }`. ## 7. Redirecting to your invoice experience In order to control where your user is routed when they open an invoice, you will want to take advantage of the Tight Embedded experience’s `registerInvoiceFormListener` functionality. This listener will emit an event when a user takes an action to open an invoice form, and disable the default behavior. To register the listener, simply add the following line of JS to be ran once after `Hurdlr.init({...})` ```javascript theme={null} Hurdlr.registerInvoiceFormListener(myInvoiceFormCallback); ``` Your callback function will be invoked with an object `{ type: InvoiceFormEvent, id: string }`. The following are the valid values for the `InvoiceFormEvent`: | Value | Event Type | | :----------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Hurdlr.NEW\_INVOICE\_FORM | The user is creating a new invoice. In the case that they are duplicating an existing invoice, `id` will be replaced with `duplicatedFromId`. | | Hurdlr.OPEN\_INVOICE\_FORM | The user is opening an existing invoice. This is the default listener for opening an invoice. | | Hurdlr.OPEN\_EXTERNAL\_INVOICE | The user is opening an invoice that should not route to the typical invoice UX. This is an escape hatch from the normal invoicing behavior, and will only be triggered when the `invoice.apiName === "PARTNER_IMPLEMENTATION"`. | Additionally, a set of options containing either a `whitelist` or `blacklist` can be provided. You'll receive only events in the `whitelist`, and suppress any event in the `blacklist`. Only one of these options can be provided at a time. For example, if you only wanted to receive the `Hurdlr.NEW_INVOICE_FORM` event, you would invoke the following: ``` Hurdlr.registerInvoiceFormListener(myInvoiceFormCallback, { whitelist: ["Hurdlr.NEW_INVOICE_FORM"] }); ```