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

<mat-toolbar color="primary">
	<span align="center">
		<img class="logo" src="/assets/logo-new-white.png" height="40px" />
	</span>
	<span class="spacer"></span>
	<span align="center">
		<p class="text">{{name}}</p>
	</span>
</mat-toolbar>
<div align="center" *ngIf="!error" id="invoice">
<mat-card>
	<mat-card-title>
		Total: <img class="total" src="/assets/zec_rv.png" height="18px" />{{order.totalZec | number: '1.08'}}
	</mat-card-title>
	<mat-card-subtitle>
		{{order.timestamp | date}}
	</mat-card-subtitle>
	<mat-card-content>
		<p class="small">Order ID: {{orderId}}</p>
		<p class="small">Zcash Price: {{order.price | number: '1.02' | currency: order.currency.toUpperCase()}}</p>
		<div class="invoice" align="center">
			<table style="width: 100%;" 
			       cellspacing="0">
			    <tr class="invoice-title">
					<th width="55%"
						style="text-align: center;">
						Item
					</th>
					<th width="15%"
						style="text-align: center;">
						Qty.
					</th>
					<th width="30%"
						style="text-align: center;">
						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>
			</table>
			<div class="qrcode" id="payment-qr" *ngIf="!order.paid"></div>
			<span *ngIf="order.paid"><fa-icon [icon]="faCheck" color="primary"></fa-icon>Payment confirmed</span>
			<span *ngIf="!order.paid"><fa-icon [icon]="faHourglass" color="primary"></fa-icon>Payment pending</span>
		</div>
	</mat-card-content>
</mat-card>
</div>
<div align="center" *ngIf="error">
	<mat-card>
	<mat-card-title>
		Incorrect Invoice ID.
	</mat-card-title>
	<mat-card-content>
		No information available.
	</mat-card-content>
	<mat-card-actions>
		<div align="center">
		<button mat-raised-button [routerLink]="['/']" color="primary">OK</button>
		</div>
	</mat-card-actions>
	</mat-card>
</div>