sepa
Version:
Create SEPA XML for business transactions
111 lines (107 loc) • 4.27 kB
HTML
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/.
- Portions Copyright (C) Philipp Kewisch, 2014-2015 -->
<html>
<head>
<meta charset="utf-8"/>
<style>
body { font-family: sans-serif; }
form div { margin-bottom: 1.5ex; }
input[type='text'] { width: 22em; }
input[type='date'],input[type='number'] { width: 8em; }
input[type='submit'] {
margin-top: 2ex;
margin-left: 10.5em;
width: 20em;
height: 3em;
border-radius: 10px;
border: 1px solid gray;
}
form label, form input { display: inline-block; }
form label { width: 8rem; text-align: right; }
form label:after { content: ":"; }
.panel { float: left; overflow: hidden; margin: 0; }
.onethird { width: 33%; }
.twothird { width: 66%; }
#results { display: none; border: 3px solid black; width: 99%; height: 100%; }
</style>
</head>
<body>
<form onsubmit="process(); return false">
<div class="panel onethird" id="input">
<div id="grpHdr">
<h1>Group Header</h1>
<div>
<label for="grpHdr-id">Message ID</label>
<input type="text" id="grpHdr-id" required maxlength="35">
</div>
<div>
<label for="grpHdr-initiatorName">Initiator</label>
<input type="text" id="grpHdr-initiatorName" required maxlength="70">
</div>
</div>
<div id="paymentInfo">
<h1>Payment Information</h1>
<div>
<label for="info-creditorName">Creditor Name</label>
<input type="text" id="info-creditorName" required maxlength="70">
</div>
<div>
<label for="info-creditorIBAN">Creditor IBAN</label>
<input type="text" id="info-creditorIBAN" required onchange="validateIBAN(event)">
</div>
<div>
<label for="info-creditorBIC">Creditor BIC</label>
<input type="text" id="info-creditorBIC" required pattern="([A-Za-z0-9]{8}|[A-Za-z0-9]{11})">
</div>
<div>
<label for="info-creditorId">Creditor ID</label>
<input type="text" id="info-creditorId" required onchange="validateCID(event)">
</div>
<div>
<label for="info-collectionDate">Collection Date</label>
<input type="date" id="info-collectionDate" maxlength="10">
</div>
</div>
<div id="tx">
<h1>Transaction Information</h1>
<div>
<label for="tx-debitorName">Debitor Name</label>
<input type="text" id="tx-debitorName" required maxlength="70">
</div>
<div>
<label for="tx-debitorIBAN">Debitor IBAN</label>
<input type="text" id="tx-debitorIBAN" required onchange="validateIBAN(event)">
</div>
<div>
<label for="tx-debitorBIC">Debitor BIC</label>
<input type="text" id="tx-debitorBIC" required pattern="([A-Za-z0-9]{8}|[A-Za-z0-9]{11})">
</div>
<div>
<label for="tx-mandateId">Mandate Id</label>
<input type="text" id="tx-mandateId" required maxlength="35" pattern="([A-Za-z0-9]|[\+|\?|/|\-|:|\(|\)|\.|,|']){1,35}">
</div>
<div>
<label for="tx-mandateSignatureDate">Signature Date</label>
<input type="date" id="tx-mandateSignatureDate" maxlength="10">
</div>
<div>
<label for="tx-amount">Amount</label>
<input type="number" id="tx-amount" min="0" step="0.01" required>
</div>
<div>
<label for="tx-remittanceInfo">Remittance Info</label>
<input type="text" id="tx-remittanceInfo" required maxlength="140">
</div>
<input type="submit" value="Create XML">
</div>
</div>
<div class="panel twothird">
<iframe id="results" src="about:blank"></iframe>
</div>
</form>
<script src="../lib/sepa.js"></script>
<script src="web.js"></script>
</body>
</html>