zgo/src/app/invoice/invoice.component.html

<div class="invoiceHeader">
		<img class="logo" src="/assets/logo-new-white.png" height="40px" />
		{{name}}
</div>
<div class="invoiceDetail"
	 *ngIf="!error" 
	 id="invoice">
	<div class="invoiceHdrTxt1">Invoice</div>
	<div class="invoiceHdrTxt2">Order ID: {{orderId}}</div>
	<div class="invoiceHdrTxt3">Date:{{order.timestamp | date}}
	</div>
		<div style="height: 10px;"></div>
		<div class="zecData">Zcash Price: {{order.price | number: '1.02' | currency: order.currency.toUpperCase()}}</div>
		<div style="height: 2px;"></div>
		<div class="zecData">Total: <img class="total" src="/assets/zec_rv.png" height="18px" />{{order.totalZec | number: '1.08'}}
		</div>
	<div>
		<div style="height: 10px;"></div>
		<table style="width: 100%;" 
		       cellspacing="0">
		    <tr class="invoice-title">
				<th width="55%"
					class="detailTitle1">
					Item
				</th>
				<th width="15%"
					class="detailTitle1">
					Qty.
				</th>
				<th width="30%"
					class="detailTitle2">
					Price ({{order.currency.toUpperCase()}}) 
				</th>
			</tr>
			<tr class="invoice-detail" 
			    *ngFor="let item of order.lines">
				<td width="55%" 
				    align="left">
				  {{item.name}}
				</td>
				<td width="15%"
				    align="center">
				  {{item.qty}}
				</td>
				<td width="30%" 
				    align="right">
				   {{( item.qty * item.cost ) | number : '1.02' | currency: order.currency.toUpperCase()}} 
				</td>
			</tr>
		    <tr class="invoice-title">
				<th width="55%"
				    class="detailLineRight">
					Invoice Total:
				</th>
				<th width="15%"
				    class="detailLineLeft">

				</th>
				<th width="30%"
				    class="detailLineRight">
				   {{ order.total | number : '1.02' | currency: order.currency.toUpperCase()}} 
				</th>
		    </tr>
		</table>
		<div style="height: 15px;"></div>
		<table>
			<tr>
				<td width="75%"
				    style="font-size: 20px;
						   font-weight: 700;
						   font-style: italic;
						   text-align: center;">		
					<p *ngIf="order.paid">
						<fa-icon [icon]="faCheck" 
						         color="primary"></fa-icon>&nbsp;Payment confirmed</p>
					<p *ngIf="!order.paid">
						<fa-icon [style]="getIconStyle(order)"
								 [icon]="faHourglass"></fa-icon>&nbsp;Payment pending!!</p>
				</td>
				<td width="25%">		
					<div style="text-align: right;" 
						 id="payment-qr" 
						 *ngIf="!order.paid"></div>
				</td>
			</tr>
		</table>	

	</div>
</div>

<div align="center" *ngIf="error">
	<div style="height: 10px;"></div>
	<div style="font-family: Spartan !important;
				font-size: 20px;
				padding: 4px;
	            height: 24px;">
		Incorrect Invoice ID.
	</div>	
	<div style="font-family: Spartan !important;
				font-size: 16px;
				padding: 4px;">
		No information available.
	</div>
	<div style="height: 10px;"></div>
	<mat-card-actions>
		<div align="center">
		<button mat-raised-button [routerLink]="['/']" color="primary">OK</button>
		</div>
	</mat-card-actions>
</div>