> For the complete documentation index, see [llms.txt](https://docs.digitalriver.com/digital-river-api/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/invoice-component.md).

# Invoice component

The invoice component collects information needed to comply with Taiwan's e-invoicing requirements. For background on these requirements, refer to [e-Invoicing](/digital-river-api/using-our-services/e-invoicing.md).

<div align="left"><figure><img src="/files/w3SKGVBBnBNMvykkE1qv" alt="" width="563"><figcaption></figcaption></figure></div>

To use the component, you'll need to [create it](#creating-the-invoice-component), [mount it](#mounting-the-invoice-component), and [submit its data](#submitting-the-invoice-component).

In the `data` returned by [`onChange`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/configuring-components.md#onchange), you can use [`showInvoiceAttribute`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/configuring-components.md#showinvoiceattribute) to determine whether this component must be displayed.

## Creating the invoice component

To create an instance of the invoice component, pass `'invoiceattribute'` to [`createComponent()`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components.md#createcomponent-componenttype).

```javascript
let invoiceComponent;
...
invoiceComponent = components.createComponent('invoiceattribute');
```

## Mounting the invoice component

To attach the invoice component to your DOM, pass the `id` of its container to [`mount()`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components.md#mount-elementid).

```javascript
<div id="invoice-container" style="display: block"></div>
...
invoiceComponent.mount('invoice-container');
```

## Submitting the invoice component

The invoice component exposes `done()`, which submits the customer's input and returns a boolean. It requires that you use the [`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) operator and, therefore, must be called inside an [async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function).

```javascript
const invoiceComponentStatus = await invoiceComponent.done();
```

If `done()` returns `true`, this indicates that customers entered a properly formatted carrier value, and your code can advance them to the next stage of the checkout.

A `false` value indicates that customers either didn't provide a value or it's incorrectly formatted, and you shouldn't allow the checkout to advance. In this case, the component prompts customers to try again and offers them formatting assistance.

<div align="left"><figure><img src="/files/AEZDZEmfG60B4OuOuaq7" alt="" width="563"><figcaption></figcaption></figure></div>