invoice-generator.com
Open in
urlscan Pro
104.237.130.87
Public Scan
Submitted URL: http://hostrade-001-site1.gtempurl.com/default.ASpX
Effective URL: https://invoice-generator.com/
Submission: On October 07 via api from IE — Scanned from DE
Effective URL: https://invoice-generator.com/
Submission: On October 07 via api from IE — Scanned from DE
Form analysis 4 forms found in the DOM
Name: invoiceForm —
<form name="invoiceForm" class="ng-pristine ng-scope ng-invalid ng-invalid-required">
<div class="invoice-holder clearfix">
<div class="mobile-btns">
<div class="inner">
<div class="my-invoices-btn">
<a href="/#/invoices" class="btn btn-link">
My Invoices
<span class="badge ng-binding" ng-show="numInvoices>0">1</span>
</a>
</div>
<div class="right">
<button type="button" class="btn btn-link" ng-disabled="invoiceForm.$invalid" ng-click="downloadPDF()" disabled="disabled">
<svg class="svg-inline--fa fa-arrow-to-bottom fa-w-12" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-to-bottom" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg="">
<path fill="currentColor"
d="M360 480H24c-13.3 0-24-10.7-24-24v-24c0-13.3 10.7-24 24-24h336c13.3 0 24 10.7 24 24v24c0 13.3-10.7 24-24 24zm-66.4-280.5L228 265.1V56c0-13.3-10.7-24-24-24h-24c-13.3 0-24 10.7-24 24v209.1l-65.6-65.6c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L175 385.9c9.4 9.4 24.6 9.4 33.9 0l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.3-9.4-24.5-9.4-33.8 0z">
</path>
</svg><!-- <span class="fas fa-arrow-to-bottom"></span> Font Awesome fontawesome.com --> Download </button>
<button type="button" class="btn btn-primary" ng-disabled="invoiceForm.$invalid" ng-click="sendModal()" disabled="disabled"> Send </button>
</div>
</div>
</div>
<div class="invoice-controls desktop">
<div class="affix-el affix-top" id="invoice-controls-affix">
<div class="btns clearfix">
<div class="btn-holder">
<button type="button" class="btn btn-primary btn-lg btn-block" ng-disabled="invoiceForm.$invalid" ng-click="sendModal()" tabindex="1050" disabled="disabled"> Send Invoice </button>
</div>
<div class="btn-holder">
<button type="button" class="btn btn-default btn-lg btn-block" ng-disabled="invoiceForm.$invalid" ng-click="downloadPDF()" tabindex="1051" disabled="disabled">
<svg class="svg-inline--fa fa-arrow-to-bottom fa-w-12" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-to-bottom" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg="">
<path fill="currentColor"
d="M360 480H24c-13.3 0-24-10.7-24-24v-24c0-13.3 10.7-24 24-24h336c13.3 0 24 10.7 24 24v24c0 13.3-10.7 24-24 24zm-66.4-280.5L228 265.1V56c0-13.3-10.7-24-24-24h-24c-13.3 0-24 10.7-24 24v209.1l-65.6-65.6c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L175 385.9c9.4 9.4 24.6 9.4 33.9 0l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.3-9.4-24.5-9.4-33.8 0z">
</path>
</svg><!-- <span class="fas fa-arrow-to-bottom"></span> Font Awesome fontawesome.com --> Download PDF </button>
</div>
<div class="btn-holder">
<button type="button" class="btn btn-link btn-block" ng-click="downloadUBL()" tabindex="1053" ng-disabled="invoiceForm.$invalid" disabled="disabled">
<svg class="svg-inline--fa fa-arrow-to-bottom fa-w-12" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-to-bottom" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg="">
<path fill="currentColor"
d="M360 480H24c-13.3 0-24-10.7-24-24v-24c0-13.3 10.7-24 24-24h336c13.3 0 24 10.7 24 24v24c0 13.3-10.7 24-24 24zm-66.4-280.5L228 265.1V56c0-13.3-10.7-24-24-24h-24c-13.3 0-24 10.7-24 24v209.1l-65.6-65.6c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L175 385.9c9.4 9.4 24.6 9.4 33.9 0l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.3-9.4-24.5-9.4-33.8 0z">
</path>
</svg><!-- <span class="fas fa-arrow-to-bottom"></span> Font Awesome fontawesome.com --> Download e-Invoice </button>
</div>
</div>
<div class="section selected-currency">
<a href="#" ng-click="selectCurrency();$event.preventDefault()" tabindex="1052">
Currency:
<strong class="ng-binding">USD</strong>
<span class="edit-icon"><svg class="svg-inline--fa fa-pencil fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pencil" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"></path></svg><!-- <span class="fas fa-pencil"></span> Font Awesome fontawesome.com --></span>
</a>
</div>
<div class="section save-template">
<a href="#" ng-click="saveDefaults();$event.preventDefault()" ng-show="!isDefault()" tabindex="1054" class="ng-hide">
Save template
</a>
<div class="using-default" ng-show="isDefault()"> Using Default Template </div>
</div>
<div class="section my-invoices-btn">
<a href="/#/invoices" tabindex="1054">
My Invoices
<span class="badge ng-binding" ng-show="numInvoices>0">1</span>
</a>
</div>
</div>
</div>
<div class="papers">
<div class="invoice">
<div class="two-col clearfix">
<div class="title">
<input class="form-control input-label ng-pristine ng-untouched ng-valid" ng-model="invoice.header" tabindex="10">
<div class="subtitle">
<div class="input-group">
<span class="input-group-addon">#</span>
<input class="form-control ng-pristine ng-untouched ng-valid" tabindex="11" ng-model="invoice.number">
</div>
</div>
</div>
<div class="col contact-info">
<div class="logo noselect">
<div class="placeholder" ng-hide="invoice.logo">
<div class="main"><svg class="svg-inline--fa fa-plus fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
<path fill="currentColor"
d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z">
</path>
</svg><!-- <span class="fas fa-plus"></span> Font Awesome fontawesome.com --> Add Your Logo</div>
<div class="secondary hidden">optional</div>
</div>
<img ng-show="invoice.logo" ng-src="" alt="Invoice Logo" class="ng-hide">
<input type="file" accept="image/*" class="file-1" onchange="angular.element(this).scope().changeLogo(this)" tabindex="12">
<input type="file" accept="image/*" class="file-2" onchange="angular.element(this).scope().changeLogo(this)">
<input type="file" accept="image/*" class="file-3" onchange="angular.element(this).scope().changeLogo(this)">
<input type="file" accept="image/*" class="file-4" onchange="angular.element(this).scope().changeLogo(this)">
<input type="file" accept="image/*" class="file-5" onchange="angular.element(this).scope().changeLogo(this)">
<input type="file" accept="image/*" class="file-6" onchange="angular.element(this).scope().changeLogo(this)">
<input type="file" accept="image/*" class="file-7" onchange="angular.element(this).scope().changeLogo(this)">
<input type="file" accept="image/*" class="file-8" onchange="angular.element(this).scope().changeLogo(this)">
<button class="remove-logo ng-hide" ng-show="invoice.logo" ng-click="removeLogo()" tabindex="13">
<svg class="svg-inline--fa fa-times fa-w-11" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" data-fa-i2svg="">
<path fill="currentColor"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z">
</path>
</svg><!-- <span class="fas fa-times"></span> Font Awesome fontawesome.com -->
</button>
</div>
<div class="logo-not-supported alert alert-warning">
<svg class="svg-inline--fa fa-exclamation-triangle fa-w-18" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
<path fill="currentColor"
d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z">
</path>
</svg><!-- <span class="fas fa-exclamation-triangle"></span> Font Awesome fontawesome.com --> Uploading logos is not supported by your browser. Please consider <a href="https://firefox.com" target="_blank">upgrading</a>.
</div>
<div class="contact from">
<div class="value">
<div class="expandingText" style="position: relative;"><textarea class="form-control ng-pristine ng-untouched expanding-init ng-invalid ng-invalid-required" placeholder="Who is this invoice from? (required)" ng-model="invoice.from"
tabindex="15" required="" expanding-textarea="" style="position: absolute; height: 100%; resize: none;"></textarea>
<pre class="textareaClone"
style="visibility: hidden; border: 1px solid; white-space: pre-wrap; line-height: 20px; text-decoration: none solid rgb(49, 53, 56); font-size: 14px; font-family: NeueHaasUnica, Helvetica, Arial, sans-serif; text-align: start; word-break: normal; padding: 6px 12px; margin-bottom: 0px;"><div> </div></pre>
</div>
</div>
</div>
<div class="row bill-to-details">
<div class="col-sm-6">
<div class="contact to">
<div class="field">
<input class="input-label form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.to_title" tabindex="16">
</div>
<div class="value">
<div class="expandingText" style="position: relative;"><textarea class="form-control ng-pristine ng-untouched expanding-init ng-invalid ng-invalid-required" placeholder="Who is this invoice to? (required)" ng-model="invoice.to"
tabindex="17" required="" expanding-textarea="" style="position: absolute; height: 100%; resize: none;"></textarea>
<pre class="textareaClone"
style="visibility: hidden; border: 1px solid; white-space: pre-wrap; line-height: 20px; text-decoration: none solid rgb(49, 53, 56); font-size: 14px; font-family: NeueHaasUnica, Helvetica, Arial, sans-serif; text-align: start; word-break: normal; padding: 6px 12px; margin-bottom: 0px;"><div> </div></pre>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="contact to">
<div class="field">
<input class="input-label form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.ship_to_title" tabindex="18">
</div>
<div class="value">
<div class="expandingText" style="position: relative;"><textarea class="form-control ng-pristine ng-untouched ng-valid expanding-init" placeholder="(optional)" ng-model="invoice.ship_to" tabindex="19" expanding-textarea=""
style="position: absolute; height: 100%; resize: none;"></textarea>
<pre class="textareaClone"
style="visibility: hidden; border: 1px solid; white-space: pre-wrap; line-height: 20px; text-decoration: none solid rgb(49, 53, 56); font-size: 14px; font-family: NeueHaasUnica, Helvetica, Arial, sans-serif; text-align: start; word-break: normal; padding: 6px 12px; margin-bottom: 0px;"><div> </div></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col invoice-details">
<div class="input-group addon-input">
<input class="input-label form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.date_title" tabindex="20">
<div class="input-group-addon">
<input class="form-control datepicker date ng-pristine ng-untouched ng-valid hasDatepicker" ng-model="invoice.date" tabindex="21" date-picker="" id="dp1633591220000">
</div>
</div>
<div class="input-group addon-input">
<input class="input-label form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.payment_terms_title" tabindex="22">
<div class="input-group-addon">
<input class="form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.payment_terms" tabindex="23">
</div>
</div>
<div class="input-group addon-input">
<input class="input-label form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.due_date_title" tabindex="24">
<div class="input-group-addon">
<input class="form-control datepicker due-date ng-pristine ng-untouched ng-valid hasDatepicker" ng-model="invoice.due_date" tabindex="25" date-picker="" id="dp1633591220001">
</div>
</div>
<div class="input-group addon-input">
<input class="input-label form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.purchase_order_title" tabindex="26">
<div class="input-group-addon">
<input class="form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.purchase_order" tabindex="27">
</div>
</div>
</div>
</div>
<div class="items-holder">
<div class="items-table-header">
<div class="amount">
<div class="field bordered">
<input class="input-label form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.amount_header" tabindex="31">
</div>
</div>
<div class="unit_cost">
<div class="field bordered">
<input class="input-label form-control ng-pristine ng-untouched ng-valid ng-valid-required" required="" ng-model="invoice.unit_cost_header" tabindex="30">
</div>
</div>
<div class="quantity">
<div class="field bordered">
<input class="input-label form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.quantity_header" tabindex="29">
</div>
</div>
<div class="name">
<div class="field bordered">
<input class="input-label form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.item_header" tabindex="28">
</div>
</div>
</div>
<div class="items-table">
<!-- ngRepeat: (k, item) in invoice.items -->
<div class="item-row ng-scope" ng-repeat="(k, item) in invoice.items">
<div class="main-row">
<div class="delete ng-hide" ng-hide="invoice.items.length==1">
<button type="button" class="delete-row" ng-click="deleteLineItem(item)" tabindex="45">
<svg class="svg-inline--fa fa-times fa-w-11" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" data-fa-i2svg="">
<path fill="currentColor"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z">
</path>
</svg><!-- <span class="fas fa-times"></span> Font Awesome fontawesome.com -->
</button>
</div>
<div class="amount value ng-binding" ng-bind-html="item.amount|currencyFormat:invoice.currency">$0.00</div>
<div class="unit_cost">
<div ng-tabindex="40+8*k+3" ng-model="item.unit_cost" currency="invoice.currency" ng-required="true" input-amount="" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-required" required="required">
<div class="input-amount dropdown" ng-class="{'is-percent':!!isRate,'with-selector':hasSelector}">
<div class="addon currency-sign ng-binding">$</div><input class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" type="number" step="any" autocomplete="off" tabindex="43" ng-required="ngRequired"
ng-model="value" ng-change="change()" required="required">
<div class="addon percent">%</div>
<div class="addon selector"><button type="button" class="btn dropdown-toggle" aria-haspopup="true" aria-expanded="false"><svg class="svg-inline--fa fa-chevron-down fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas"
data-icon="chevron-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
<path fill="currentColor"
d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z">
</path>
</svg><!-- <span class="fas fa-chevron-down"></span> Font Awesome fontawesome.com --></button></div>
<ul class="dropdown-menu dropdown-menu-right">
<li ng-class="{active:!isRate}" class="active"><a href="#" ng-click="isRate=false;$event.preventDefault()" class="ng-binding">Flat ($)</a></li>
<li ng-class="{active:isRate}"><a href="#" ng-click="isRate=true;$event.preventDefault()">Percent (%)</a></li>
</ul>
</div>
</div>
</div>
<div class="quantity">
<input type="number" step="any" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" autocomplete="off" ng-model="item.quantity" tabindex="42" placeholder="Quantity" required="">
</div>
<div class="name">
<div class="expandingText" style="position: relative;"><textarea class="form-control ng-pristine ng-untouched ng-valid expanding-init" ng-model="item.name" tabindex="41" placeholder="Description of service or product..."
expanding-textarea="" style="position: absolute; height: 100%; resize: none;"></textarea>
<pre class="textareaClone"
style="visibility: hidden; border: 1px solid; white-space: pre-wrap; line-height: 20px; text-decoration: none solid rgb(49, 53, 56); font-size: 14px; font-family: NeueHaasUnica, Helvetica, Arial, sans-serif; word-break: normal; padding: 6px 12px; margin-bottom: 0px;"><div> </div></pre>
</div>
</div>
</div>
</div><!-- end ngRepeat: (k, item) in invoice.items -->
</div>
<div class="new-line">
<button type="button" class="btn btn-primary" tabindex="1000" ng-click="addLineItem()">
<svg class="svg-inline--fa fa-plus fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
<path fill="currentColor"
d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z">
</path>
</svg><!-- <span class="fas fa-plus"></span> Font Awesome fontawesome.com --> Line Item </button>
</div>
</div>
<div class="two-col clearfix">
<div class="col footer">
<div class="notes-holder">
<div class="field">
<input class="input-label form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.notes_title" tabindex="1014">
</div>
<div class="value">
<div class="expandingText" style="position: relative;"><textarea class="notes form-control ng-pristine ng-untouched ng-valid expanding-init" placeholder="Notes - any relevant information not already covered" ng-model="invoice.notes"
tabindex="1015" expanding-textarea="" style="position: absolute; height: 100%; resize: none;"></textarea>
<pre class="textareaClone"
style="visibility: hidden; border: 1px solid; white-space: pre-wrap; line-height: 20px; text-decoration: none solid rgb(49, 53, 56); font-size: 14px; font-family: NeueHaasUnica, Helvetica, Arial, sans-serif; word-break: normal; padding: 6px 12px; margin-bottom: 0px;"><div> </div></pre>
</div>
</div>
</div>
<div class="terms-holder">
<div class="field">
<input class="input-label form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.terms_title" tabindex="1016">
</div>
<div class="value">
<div class="expandingText" style="position: relative;"><textarea class="terms form-control ng-pristine ng-untouched ng-valid expanding-init" placeholder="Terms and conditions - late fees, payment methods, delivery schedule"
ng-model="invoice.terms" tabindex="1017" expanding-textarea="" style="position: absolute; height: 100%; resize: none;"></textarea>
<pre class="textareaClone"
style="visibility: hidden; border: 1px solid; white-space: pre-wrap; line-height: 20px; text-decoration: none solid rgb(49, 53, 56); font-size: 14px; font-family: NeueHaasUnica, Helvetica, Arial, sans-serif; word-break: normal; padding: 6px 12px; margin-bottom: 0px;"><div> </div></pre>
</div>
</div>
</div>
</div>
<div class="col rates">
<div class="input-group addon-input">
<input class="input-label form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.subtotal_title" tabindex="1001">
<div class="input-group-addon value deleteable ng-binding" ng-bind-html="invoice.subtotal|currencyFormat:invoice.currency">$0.00</div>
</div>
<div class="input-group addon-input ng-hide" ng-show="!!invoice.fields.discounts">
<div class="delete">
<button type="button" class="btn btn-link" ng-click="removeDiscount()">
<svg class="svg-inline--fa fa-times fa-w-11" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" data-fa-i2svg="">
<path fill="currentColor"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z">
</path>
</svg><!-- <span class="fas fa-times"></span> Font Awesome fontawesome.com -->
</button>
</div>
<input class="input-label form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.discounts_title" tabindex="1002">
<div class="input-group-addon input deleteable">
<div input-amount="" is-rate="discountIsRate" currency="invoice.currency" ng-model="invoice.discounts" ng-tabindex="1003" has-selector="true" class="ng-pristine ng-untouched ng-valid ng-isolate-scope">
<div class="input-amount dropdown with-selector" ng-class="{'is-percent':!!isRate,'with-selector':hasSelector}">
<div class="addon currency-sign ng-binding">$</div><input class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" type="number" step="any" autocomplete="off" tabindex="1003" ng-required="ngRequired"
ng-model="value" ng-change="change()">
<div class="addon percent">%</div>
<div class="addon selector"><button type="button" class="btn dropdown-toggle" aria-haspopup="true" aria-expanded="false"><svg class="svg-inline--fa fa-chevron-down fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas"
data-icon="chevron-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
<path fill="currentColor"
d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z">
</path>
</svg><!-- <span class="fas fa-chevron-down"></span> Font Awesome fontawesome.com --></button></div>
<ul class="dropdown-menu dropdown-menu-right">
<li ng-class="{active:!isRate}" class="active"><a href="#" ng-click="isRate=false;$event.preventDefault()" class="ng-binding">Flat ($)</a></li>
<li ng-class="{active:isRate}"><a href="#" ng-click="isRate=true;$event.preventDefault()">Percent (%)</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="input-group addon-input" ng-show="!!invoice.fields.tax">
<div class="delete">
<button type="button" class="btn btn-link" ng-click="removeTax()">
<svg class="svg-inline--fa fa-times fa-w-11" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" data-fa-i2svg="">
<path fill="currentColor"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z">
</path>
</svg><!-- <span class="fas fa-times"></span> Font Awesome fontawesome.com -->
</button>
</div>
<input class="input-label form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.tax_title" tabindex="1004">
<div class="input-group-addon input deleteable">
<div input-amount="" is-rate="taxIsRate" currency="invoice.currency" ng-model="invoice.tax" ng-tabindex="1005" has-selector="true" class="ng-pristine ng-untouched ng-valid ng-isolate-scope">
<div class="input-amount dropdown is-percent with-selector" ng-class="{'is-percent':!!isRate,'with-selector':hasSelector}">
<div class="addon currency-sign ng-binding">$</div><input class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" type="number" step="any" autocomplete="off" tabindex="1005" ng-required="ngRequired"
ng-model="value" ng-change="change()">
<div class="addon percent">%</div>
<div class="addon selector"><button type="button" class="btn dropdown-toggle" aria-haspopup="true" aria-expanded="false"><svg class="svg-inline--fa fa-chevron-down fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas"
data-icon="chevron-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
<path fill="currentColor"
d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z">
</path>
</svg><!-- <span class="fas fa-chevron-down"></span> Font Awesome fontawesome.com --></button></div>
<ul class="dropdown-menu dropdown-menu-right">
<li ng-class="{active:!isRate}"><a href="#" ng-click="isRate=false;$event.preventDefault()" class="ng-binding">Flat ($)</a></li>
<li ng-class="{active:isRate}" class="active"><a href="#" ng-click="isRate=true;$event.preventDefault()">Percent (%)</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="input-group addon-input ng-hide" ng-show="!!invoice.fields.shipping">
<div class="delete">
<button type="button" class="btn btn-link" ng-click="removeShipping()">
<svg class="svg-inline--fa fa-times fa-w-11" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" data-fa-i2svg="">
<path fill="currentColor"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z">
</path>
</svg><!-- <span class="fas fa-times"></span> Font Awesome fontawesome.com -->
</button>
</div>
<input class="input-label form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.shipping_title" tabindex="1006">
<div class="input-group-addon input deleteable">
<div input-amount="" is-rate="false" currency="invoice.currency" ng-model="invoice.shipping" ng-tabindex="1007" class="ng-pristine ng-untouched ng-valid ng-isolate-scope">
<div class="input-amount dropdown" ng-class="{'is-percent':!!isRate,'with-selector':hasSelector}">
<div class="addon currency-sign ng-binding">$</div><input class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" type="number" step="any" autocomplete="off" tabindex="1007" ng-required="ngRequired"
ng-model="value" ng-change="change()">
<div class="addon percent">%</div>
<div class="addon selector"><button type="button" class="btn dropdown-toggle" aria-haspopup="true" aria-expanded="false"><svg class="svg-inline--fa fa-chevron-down fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas"
data-icon="chevron-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
<path fill="currentColor"
d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z">
</path>
</svg><!-- <span class="fas fa-chevron-down"></span> Font Awesome fontawesome.com --></button></div>
<ul class="dropdown-menu dropdown-menu-right">
<li ng-class="{active:!isRate}" class="active"><a href="#" ng-click="isRate=false;$event.preventDefault()" class="ng-binding">Flat ($)</a></li>
<li ng-class="{active:isRate}"><a href="#" ng-click="isRate=true;$event.preventDefault()">Percent (%)</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="add-rates">
<button type="button" class="btn btn-link btn-sm" ng-click="addDiscount()" ng-hide="!!invoice.fields.discounts" tabindex="1008">
<svg class="svg-inline--fa fa-plus fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
<path fill="currentColor"
d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z">
</path>
</svg><!-- <span class="fas fa-plus"></span> Font Awesome fontawesome.com --> Discount </button>
<button type="button" class="btn btn-link btn-sm ng-hide" ng-click="addTax()" ng-hide="!!invoice.fields.tax" tabindex="1009">
<svg class="svg-inline--fa fa-plus fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
<path fill="currentColor"
d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z">
</path>
</svg><!-- <span class="fas fa-plus"></span> Font Awesome fontawesome.com --> Tax </button>
<button type="button" class="btn btn-link btn-sm" ng-click="addShipping()" ng-hide="!!invoice.fields.shipping" tabindex="1010">
<svg class="svg-inline--fa fa-plus fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
<path fill="currentColor"
d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z">
</path>
</svg><!-- <span class="fas fa-plus"></span> Font Awesome fontawesome.com --> Shipping </button>
</div>
<div class="input-group addon-input">
<input class="input-label form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.total_title" tabindex="1011">
<div class="input-group-addon value deleteable ng-binding" ng-bind-html="invoice.total|currencyFormat:invoice.currency">$0.00</div>
</div>
<div class="input-group addon-input">
<input class="input-label form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.amount_paid_title" tabindex="1012">
<div class="input-group-addon input deleteable">
<div input-amount="" currency="invoice.currency" ng-model="invoice.amount_paid" ng-tabindex="1013" class="ng-pristine ng-untouched ng-valid ng-isolate-scope">
<div class="input-amount dropdown" ng-class="{'is-percent':!!isRate,'with-selector':hasSelector}">
<div class="addon currency-sign ng-binding">$</div><input class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" type="number" step="any" autocomplete="off" tabindex="1013" ng-required="ngRequired"
ng-model="value" ng-change="change()">
<div class="addon percent">%</div>
<div class="addon selector"><button type="button" class="btn dropdown-toggle" aria-haspopup="true" aria-expanded="false"><svg class="svg-inline--fa fa-chevron-down fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas"
data-icon="chevron-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
<path fill="currentColor"
d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z">
</path>
</svg><!-- <span class="fas fa-chevron-down"></span> Font Awesome fontawesome.com --></button></div>
<ul class="dropdown-menu dropdown-menu-right">
<li ng-class="{active:!isRate}" class="active"><a href="#" ng-click="isRate=false;$event.preventDefault()" class="ng-binding">Flat ($)</a></li>
<li ng-class="{active:isRate}"><a href="#" ng-click="isRate=true;$event.preventDefault()">Percent (%)</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="input-group addon-input">
<input class="input-label form-control ng-pristine ng-untouched ng-valid" ng-model="invoice.balance_title" tabindex="1014">
<div class="input-group-addon value deleteable ng-binding" ng-bind-html="invoice.balance|currencyFormat:invoice.currency">$0.00</div>
</div>
</div>
</div>
</div>
</div>
<div class="invoice-controls mobile">
<div class="btns clearfix visible-sm">
<div class="btn-holder">
<button class="btn btn-primary btn-lg btn-block" ng-disabled="invoiceForm.$invalid" ng-click="sendModal()" disabled="disabled"> Send Invoice </button>
</div>
<div class="btn-holder">
<button class="btn btn-link btn-lg btn-block" ng-disabled="invoiceForm.$invalid" ng-click="downloadPDF()" disabled="disabled">
<svg class="svg-inline--fa fa-arrow-to-bottom fa-w-12" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-to-bottom" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg="">
<path fill="currentColor"
d="M360 480H24c-13.3 0-24-10.7-24-24v-24c0-13.3 10.7-24 24-24h336c13.3 0 24 10.7 24 24v24c0 13.3-10.7 24-24 24zm-66.4-280.5L228 265.1V56c0-13.3-10.7-24-24-24h-24c-13.3 0-24 10.7-24 24v209.1l-65.6-65.6c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L175 385.9c9.4 9.4 24.6 9.4 33.9 0l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.3-9.4-24.5-9.4-33.8 0z">
</path>
</svg><!-- <span class="fas fa-arrow-to-bottom"></span> Font Awesome fontawesome.com --> Download Invoice </button>
</div>
</div>
<div class="section selected-currency">
<a href="#" ng-click="selectCurrency();$event.preventDefault()">
Currency:
<strong class="ng-binding">USD</strong>
<span class="edit-icon"><svg class="svg-inline--fa fa-pencil fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pencil" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"></path></svg><!-- <span class="fas fa-pencil"></span> Font Awesome fontawesome.com --></span>
</a>
</div>
<div class="section save-template">
<a href="#" ng-click="saveDefaults();$event.preventDefault()" ng-show="!isDefault()" class="ng-hide">
Save template
</a>
<div class="using-default" ng-show="isDefault()"> Using Default Template </div>
</div>
<div class="section my-invoices-btn visible-sm">
<a href="/#/invoices">
My Invoices
<span class="badge ng-binding" ng-show="numInvoices>0">1</span>
</a>
</div>
</div>
</div>
</form>POST /csv?source=lite
<form method="post" action="/csv?source=lite" class="nomargin ng-pristine ng-valid" id="csv_form" target="_self">
<input id="csv_json" type="hidden" name="json">
</form>POST /pdf?source=lite
<form method="post" action="/pdf?source=lite" class="nomargin ng-pristine ng-valid" id="pdf_form" target="_self">
<input id="pdf_json" type="hidden" name="json">
</form>POST /ubl?source=lite
<form method="post" action="/ubl?source=lite" class="nomargin ng-pristine ng-valid" id="ubl_form" target="_self">
<input id="ubl_json" type="hidden" name="json">
</form>Text Content
Invoice Generator * Learn More * Invoicing Guide * Upgrade FREE INVOICE TEMPLATE MAKE BEAUTIFUL INVOICES WITH ONE CLICK! Welcome to the original Invoice Generator, trusted by millions of people. Invoice Generator lets you quickly make invoices with our attractive invoice template straight from your web browser, no sign up necessary. The invoices you make can be sent and paid online or downloaded as a PDF. Did we also mention that Invoice Generator lets you generate an unlimited number of invoices? OK, got it! Read the Docs My Invoices 1 Download Send Send Invoice Download PDF Download e-Invoice Currency: USD Save template Using Default Template My Invoices 1 # Add Your Logo optional Uploading logos is not supported by your browser. Please consider upgrading. $0.00 $ % * Flat ($) * Percent (%) Line Item $0.00 $ % * Flat ($) * Percent (%) $ % * Flat ($) * Percent (%) $ % * Flat ($) * Percent (%) Discount Tax Shipping $0.00 $ % * Flat ($) * Percent (%) $0.00 Send Invoice Download Invoice Currency: USD Save template Using Default Template My Invoices 1 Use Invoice Generator * Invoice Template * How to Use * Upgrade * Release Notes * Developer API Education * Invoicing Guide * Blog * © 2012-2021 Invoiced, Inc. All rights reserved. * Terms of Use * Made by Invoiced