# 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](https://docs.digitalriver.com/digital-river-api/using-our-services/e-invoicing).
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`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-components#onchange), you can use [`showInvoiceAttribute`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-components#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()`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/..#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()`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/..#mount-elementid).
```javascript
...
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.
