update pgp key, add EPC QR code

index.html

@@ -13,6 +13,7 @@
 		<link rel="stylesheet" href="stijl/standaard.css" />
 		<link rel="shortcut icon" href="/favicoon.png" />
 		<script src="programmaatjes/veelvul.urlsearchparams.js"></script>
+		<script src="programmaatjes/qrious-4.0.2.min.js"></script>
 		<script src="programmaatjes/openpgp.js"></script>
 		<script src="programmaatjes/ondertekening.js"></script>
 	</head>
@@ -75,6 +76,15 @@
 						toch?</p>
 					</li>
 					<li>
+						<h3>QR-code voor SEPA-overschrijving</h3>
+						<img id="qr-sepa" class="betaal-qr" width="200" height="200" />
+						<p>
+							Lees de QR-code hiernaast met je banktoepassing. Werkt zeker met ING en Bunq, werkt mogelijk niet met andere banktoepassingen.
+						</p>
+						<p>
+						Hiermee maak je <span class="veld" data-veld="valuta-symbool"></span><span class="veld" data-veld="bedrag"></span> naar het IBAN <span class="veld" data-veld="iban"></span> t.a.v. <span class="veld" data-veld="aan"></span> met de omschrijving <span class="veld" data-veld="betreft"></span>.</p>
+					</li>
+					<li style="clear: both;">
 						<h3>Overmaken</h3>
 						<p>Je maakt het bedrag over naar mijn bankrekening,
 						met het IBAN <a id="betaallink-iban"><span id="betaal-iban" data-veld="iban"></span></a> en met als omschrijving <span class="veld" data-veld="betreft"></span>.
@@ -181,7 +191,8 @@
 					<p>Wij maken gebruik van:</p>
 					<ul>
 						<li><a href="https://openpgpjs.org">openpgpjs</a>
-							onder de <a href="https://github.com/openpgpjs/openpgpjs/blob/master/LICENSE">LGPLv3.0</a></li>
+							onder de <a href="https://github.com/openpgpjs/openpgpjs/blob/master/LICENSE">LGPLv3.0-licentie</a></li>
+						<li><a href="https://github.com/neocotic/qrious">QRious</a> onder de <a href="https://github.com/neocotic/qrious/blob/master/LICENSE.md">MIT-licentie</a></li>
 					</ul>
 				</details>
 			</section>

programmaatjes/ondertekening.js

@@ -1,34 +1,24 @@
 console.info("ondertekening.js geladen");
-let publiekeSleutel = "-----BEGIN PGP PUBLIC KEY BLOCK-----\n" +
+const publiekeSleutel = `-----BEGIN PGP PUBLIC KEY BLOCK-----
-"\n" +
+
-"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
+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
-"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
+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
-"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
+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
-"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
+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
-"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
+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
-"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
+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
-"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
+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
-"E30FAl3FuR0CGwMFCQPDShMFCwkIBwIGFQoJCAsCBBYCAwECHgECF4AACgkQ2y0M\n" +
+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
-"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
+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
-"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
+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
-"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
+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
-"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
+yF//d4JWgUmo8kFE8eRekxYVWEV3Y6pouDgEZFK5rRIKKwYBBAGXVQEFAQEHQMje
-"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
+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
-"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
+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
-"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
+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
-"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\n" +
+hs9ssb71ob7pPbLispAYsn8O
-"U4huA1NNKTJXdz3kiHRyNIZYVFMDaWiX+btRFr3Vcplo9Gyn+uklzArZZjrdIzwv\n" +
+=SCX7
-"xBIRDu+cy8uvREy1KRx+AFWUAidKUldrUZ2kMpaOWG663/4Byvv7HcOTKhdiqVLU\n" +
+-----END PGP PUBLIC KEY BLOCK-----`
-"N9gkeZnr+JQGwme5/+2aZJVuYgjIf89lsYF2y+C4ByNhkaaYkilv7RGhBw+srAdj\n" +
-"WDHWvwARAQABiQE8BBgBCAAmFiEE9y0e0M5kgwkiGmLb2y0MgIMOE30FAl3FuR0C\n" +
-"GwwFCQPDShMACgkQ2y0MgIMOE32+dAf/doJBIiNn1WqS7jUmek4Yz71AzzsLVo+z\n" +
-"5/Q4hDoSaQAXxYZcNt2SUqtmwdZ4vctEWp5xXn9g5ysd82LIT2QR8PRCWdWbiK9Z\n" +
-"kGYDjabMsOt/+aACfvxbqrL48oXMdTgAET2t6LSKJHoyNlXPvgwtHxKk5O4tANJR\n" +
-"8DmL1H1UlI9mSuipHYPPRTMxMdknnVaiKwVIXdkTm514XxLWLJB3Hkjrb2AHhwxb\n" +
-"Lih5kdsxL/DoZ1Ss73SZWVATbpUAtkXbOAcePjGdpUS91krHGFacYSH4plnHGhcT\n" +
-"2HfZWiN/fi2hfE9gXhRGYXiS8pRd0eMemt+gUIUkAyRy33BHvzkW2Q==\n" +
-"	=hGsM\n" +
-"-----END PGP PUBLIC KEY BLOCK-----";
 
 let TEKST_FOUT_ENGELS = 0;
 let TEKST_FOUT_MISSENDE_PARAMETERS = 1;
@@ -174,6 +164,28 @@ document.addEventListener("DOMContentLoaded", function() {
 				+ betaalLinkParameters.toString();
 
 			document.getElementById("betaal-info").style.display = "block";	
+
+			let qrValue = `BCD
+002
+1
+SCT
+
+${aan}
+${iban}
+${valuta}${bedrag.replace(",", ".")}
+
+
+${betreft}
+via betalen.chris.netsoj.nl
+`;
+
+			// https://www.europeanpaymentscouncil.eu/sites/default/files/KB/files/EPC069-12%20v2.1%20Quick%20Response%20Code%20-%20Guidelines%20to%20Enable%20the%20Data%20Capture%20for%20the%20Initiation%20of%20a%20SCT.pdf
+			let qr = new QRious({
+				element: document.getElementById('qr-sepa'),
+				level: "M",
+				size: 200,
+				value: qrValue
+			});
 		});
 
 		

stijl/standaard.css

@@ -103,3 +103,21 @@ summary {
 	font-weight: bold;
 	padding: 0.25em;
 }
+
+.betaal-qr {
+	float: left;
+	padding-top: 0;
+	padding-left: 0;
+	padding-right: 0.5em;
+	padding-bottom: 0.5em;
+	max-width: 100%;
+	aspect-ratio: 1 / 1;
+}
+
+@media (max-width: 500px) {
+	.betaal-qr {
+		float: none;
+		display: block;
+		margin: 0 auto;
+	}
+}