Additional data
Organization
Additional data of the organization.
The <Id> tag is a random generated guid or id.
<Data> is your organizations Base64 encoded image.
Example of Additional Info
<?xml version="1.0" encoding="utf-8"?>
<Organization>
<Image>
<Id>Unique_guid_Id</Id>
<Data>Base64_encoded_image</Data>
</Image>
</Organization>ReceiptTemplate
Use HTML and CSS to style receipts in Net iD Portal.
Example of receipt XML configuration
<ReceiptTemplate>
<html>
<head>
<title>{{Headline}}</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<style type="text/css">
body {
font-family: Arial;
margin-top: 0px;
}
h1 {
font-size: 1.6em;
}
h2 {
font-size: 1.2em;
}
h3 {
font-size: 0.936em;
}
h4 {
font-size: 0.896em;
margin: 7px;
}
h5 {
font-size: .664em;
}
h6 {
font-size: .6em;
}
div.maincontainer {
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
div.header {
display: flex;
justify-content: center;
align-items: center;
}
div.header h1 {
text-align: center;
}
div.logo {
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
div.logo img {
width: 256px;
height: 64px;
}
div.date {
display: flex;
justify-content: flex-start;
align-items: center;
}
div.flexcontainer {
display: flex;
-webkit--ms-flex-direction: row;
-ms-flex-direction:row;
flex-direction: row;
}
div.subheader {
width: 30%;
}
div.signatureheader {
width: 30%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
-webkit-flex-direction: column;
-ms-flex-direction:column;
flex-direction: column;
}
div.contentcontainer {
width: 70%;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction:column;
flex-direction: column;
}
div.content {
width: 100%;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction:row;
flex-direction: row;
}
div.contentheader {
width: 40%;
}
div.subsignatureheader {
width: 26%;
}
div.contentdata {
width: 60%;
}
div.line {
height: 80%;
width: 60%;
border-bottom: 1px solid black;
}
div.subline {
width: 60%;
height: 70%;
border-bottom: 1px solid black;
}
h3, h4, h6 {
font-weight: 400;
}
h4.data {
font-weight: bold;
}
</style>
</head>
<body>
<div class="maincontainer">
<div class="logo">
<img src="data:image/png;base64, {{OrganisationLogo}}" alt="logo" />
</div>
<div class="header">
<h1>{{Headline}}</h1>
</div>
<div class="date">
<h6>{{DateTime}}</h6>
</div>
<div class="flexcontainer">
<div class="subheader">
<h3>{{Token}}</h3>
</div>
<div class="contentcontainer">
<div class="content">
<div class="contentheader">
<h4>{{TokenType}}</h4>
</div>
<div class="contentdata">
<h4 class="data">{{TokenTypeValue}}</h4>
</div>
</div>
<div class="content">
<div class="contentheader">
<h4>{{TokenTemplate}}</h4>
</div>
<div class="contentdata">
<h4 class="data">{{TokenTemplateValue}}</h4>
</div>
</div>
<div class="content">
<div class="contentheader">
<h4>{{TokenSerialNumber}}</h4>
</div>
<div class="contentdata">
<h4 class="data">{{TokenSerialNumberValue}}</h4>
</div>
</div>
<div class="content">
<div class="contentheader">
<h4>{{TokenValidity}}</h4>
</div>
<div class="contentdata">
<h4 class="data">{{TokenValidityValue}}</h4>
</div>
</div>
</div>
</div>
<br />
<br />
<div class="flexcontainer">
<div class="subheader">
<h3>{{Officer}}</h3>
</div>
<div class="contentcontainer">
<div class="content">
<div class="contentheader">
<h4>{{OfficerName}}</h4>
</div>
<div class="contentdata">
<h4 class="data">{{OfficerNameValue}}</h4>
</div>
</div>
</div>
</div>
<br />
<br />
<div class="flexcontainer">
<div class="subheader">
<h3>{{User}}</h3>
</div>
<div class="contentcontainer">
<div class="content">
<div class="contentheader">
<h4>{{UserName}}</h4>
</div>
<div class="contentdata">
<h4 class="data">{{UserNameValue}}</h4>
</div>
</div>
<div class="content">
<div class="contentheader">
<h4>{{UserSerialNumber}}</h4>
</div>
<div class="contentdata">
<h4>{{UserSerialNumberValue}}</h4>
</div>
</div>
</div>
</div>
<br />
<br />
<div class="flexcontainer">
<div class="signatureheader">
<h3>{{ReceiptUser}}</h3>
</div>
<div class="line"></div>
</div>
<br />
<br />
<br />
<br />
<div class="flexcontainer">
<div class="subheader">
<h3>{{Returned}}</h3>
</div>
<div class="contentcontainer">
<div class="content">
<div class="subsignatureheader">
<h4>{{Date}}</h4>
</div>
<div class="subline"></div>
</div>
<div class="content">
<div class="subsignatureheader">
<h4>{{Time}}</h4>
</div>
<div class="subline"></div>
</div>
</div>
</div>
<br />
<div class="flexcontainer">
<div class="signatureheader">
<h3>{{UserSignature}}</h3>
</div>
<div class="line"></div>
</div>
<br />
<div class="flexcontainer">
<div class="signatureheader">
<h3>{{OfficerSignature}}</h3>
</div>
<div class="line"></div>
</div>
</div>
</body>
</html>
</ReceiptTemplate>