Toevoegen van QR-code betaalmogelijkheid met een formulier in WordPress website. Met uw logo en E-mail notificatie.
In WordPress website te gebruiken voor het ontvangen van betalingen, donaties via de website. Ook mobiel te gebruiken om direct af te rekenen met klanten. Ook is eenvoudig een QR-code te maken om toe te voegen in facturen.
Getest met de bank app van diverse Nederlandse en Duitse banken.
De plug-in is gemaakt in het Engels. De beschikbare (Google) vertaling in Nederlands, Duits, Frans of Spaans wordt getoond op basis van de in WordPress gekozen taal. Gewoon omdat het kan.
De plug-in is voor € 30,00 (BTW vrijgesteld) verkrijgbaar via de webwinkel.
Aanleiding/overwegingen
Voor iemand met een particuliere betaalrekening is het lastig betalingen te ontvangen via website (al of niet met webwinkel).
Met een zakelijke rekeningen is het mogelijk iDeal betalingen te ontvangen via een zogenaamde ‘payment service provider’, maar daarvoor worden abonnementskosten of een bedrag per transactie gerekend.
Het is mogelijk een betaalverzoek te genereren en dan de link op de website plaatsen. Het vervelende is dat deze een beperkte levensduur heeft. De link moet daarom telkens worden ververst. Ook is het voor website bezoeker niet mogelijk een opmerking aan de betaling toe te voegen.
De European Payments Council Quick Response Code richtlijnen bepalen de inhoud van de QR-code die gebruikt kan worden om een SEPA credit transfer (SCT) te verrichten. Zie EPC.
Een EPC-QR-Code is dus een gestandaardiseerde code, die alle benodigde gegevens voor een overmaking bevat.
Makkelijk om te scannen. U hoeft geen naam en rekeningnummer meer in te vullen. Ideaal om op de website te scannen voor een online betaling, te printen zodat anderen het kunnen scannen, of om op te nemen in een factuur.
Ik kwam op de gedachte zelf de QR-code zelf op de website te genereren en heb een plug-in gemaakt voor mijn Woocommerce webwinkel (https://peppink.nl/index.php/winkel/).
Daarnaast heb ik een variant gemaakt met een formulier, zoals hier op de website in gebruik (https://ict.peppink.nl/betaalformulier/) en hieronder beschreven.
Bedrag en Opmerking/reden van betaling, zouden dan wel via een formulier ingevuld moeten kunnen worden. Of gekozen uit een zelf op te geven selectie lijst.
Het betreft een rechtstreekse overmaking en u ontvangt de betaling zonder aan derden kosten af te dragen.
Het is ook mogelijk met een particuliere betaalrekening.
Beide plug-ins kunnen ook gezamenlijk worden geïnstalleerd.
Veiligheid
Het is veilig omdat de QR-code geen link bevat die naar een andere website leidt en daardoor op één of andere wijze misbruikt zou kunnen worden.
De gegevens zijn bovendien in de eigen bank app te controleren alvorens de betaling daadwerkelijk te doen.
De QR-code wordt binnen de website bewaard met een naam die door anderen niet te raden is. De unieke naam van het png plaatje wordt gemaakt op grond van een aantal gegevens, die gecodeerd worden met MD5.
Bij verzending per mail, wordt de bestandsnaam bovendien nog gewijzigd (ingekort) tot “QR-betaalcode-1a2b3c4d5e.png”, waarbij “1a2b3c4d5e” – als voorbeeld – slechts de laatste 10 karakters van de hash bevatten. Het lijkt me niet dat daarmee de originele link naar het bestand door anderen is te achterhalen, laat staan te genereren of daar anderszins kwaad mee te kunnen.
En dan nog…. met de QR-code is het slechts mogelijk het ingevulde bedrag naar uw bankrekening over te maken.
De invoer in het betaalformulier wordt gecontroleerd om misbruik (richting de website of database) af te vangen.
Bij de het resultaat formulier wordt tenslotte nog gecontroleerd of de QR-code wel is gegenereerd op basis van het betaalformulier en anders wordt deze weerhouden.
De notificatie mail naar website eigenaar geeft ook de ‘user agent’ en het IP adres van de bezoeker mee. Eventuele pogingen tot misbruik komen zo snel aan het licht.
Na in te stellen tijd wordt de gemaakte QR-code achter de schermen van de website verwijderd.
Opzet
Plug-in met een instellingen pagina in vier secties:
Instellingen voor bankgegevens Met SEPA informatie en bank gegevens (BIC, Naam, IBAN). Ook is het niveau van foutcorrectie instelbaar.
Instellingen voor Logo-informatie Een logo (jpg of png plaatje) kan aan de QR-code worden toegevoegd, waarbij percentage van de grootte en mate van transparantie instelbaar zijn.
Instellingen voor formulierinformatie Met vrije configuratie van de gegevens die in twee tekst velden bij de QR-code op het scherm zullen verschijnen en optie om bankoverschrijving informatie al of niet te tonen.
4 x HTML kleurenkiezer voor achtergrond~ en tekst kleuren in het formulier.
Instellingeen voor meldingen Optioneel per E-mail verzenden van een bevestiging met bijsluiten van de gegenereerde QR-code.
Invul formulier:
Toont de bankinformatie (uit instellingen) voor evt. handmatige overmaking (tevens controle op juistheid).
Geeft de invul velden voor bedrag, reden van overmaking en optioneel E-mail adres voor notificatie.
Toont eventueel redenen voor betaling in keuzelijst. (als argumenten op te geven met de aanroep van de te gebruiken shortcode).
Resultaat formulier:
Toont in tabel de gegenereerde QR-code
Uiterlijk, kleur, lettergrootte etc. zijn afhankelijk van het eigen WordPress thema en deels aan te passen met meegeleverde CSS.
Verzend (optioneel) de QR-code als bijlage in E-mail.
Beperkingen:
Wordt nog niet door alle banken ondersteund. o.a. nog niet door de app van de RABO bank. Ook bij ABN-AMRO schijnt dit nog niet ingevoerd te zijn.
De bank app kan alleen de QR-code inlezen die op een ander apparaat (PC, Notebook, Tablet, Smartphone of print) zichtbaar is.
Hoofdletters, kleine letters en cijfers kunnen worden gebruikt. Bijzondere karakters worden door SEPA maar heel beperkt ondersteund. ()+,-.:? Ook blijkt niet elke Bank app in staat om deze te verwerken. Zo wordt geen van deze tekens door de KNAB bank app gelezen. Dat ligt niet aan de code.
Er kan 1 bankrekening als doel worden ingevuld.
Tekst van formulieren en E-mail is grotendeels in de code van de plug-in opgenomen.
Ik documenteer al mijn scripts met steenkolen Engels.
Bij update worden wijzigingen (ook in CSS bestanden) overschreven. Stel die dus eerst veilig.
Voorbereiding
Erkenningen De plug-in is ontwikkeld op basis van:
Ik ga uit van WordPress versie 5.8.2 of hoger. Met lagere versies werkt het vermoedelijk, maar heb ik niet getest.
Tenminste PHP 5 met GD2 extensie voor JPEG en PNG support is vereist., maar ik ga uit van PHP versie 7.4 met GD.
Check of de WordPress mail functionaliteit werkt.
Uitvoering
Geleverde ZIP bestand bevat al wat nodig is. Bekijk het PEP-frmqr-readme.txt bestand (in Engels) voor een overzicht en uitleg van:
Requirements
Installation and Activation
Configuration
Quick start your payment form
Unininstall
Version change history
Eenvoudige installatie wordt hieronder met illustraties beschreven.
Voorzorg. Maak tevoren altijd een back-up van database en bestanden.
Eerst maar het resultaat
Het betaalformulier (gegenereerd zonder shortcode argumenten) Bedrag en reden van betaling (beide verplichte velden) worden ingevuld.
Het betaalformulier met keuzelijst Vooraf vastgestelde redenen van betaling kunnen via ook de shortcode worden opgegeven en verschijnen dan als keuzelijst. Er kunnen desgewenst voor verschillende doelen ook meerdere betaalpagina’s worden gemaakt. Elk met andere keuzelijstjes.
Het vervolg scherm toont de QR-code. Na bevestiging met de knop “Toon QR-code”, wordt onderstaande resultaat op dezelfde pagina getoond. In de tabel boven en onder de QR-code worden de gegevens vanuit de instellingen geplaatst. Naast de QR-code de ingevoerde gegevens en de bankgegevens vanuit de instellingen ter controle.
De pagina die het mogelijk maakt Om het formulier te tonen moet een pagina worden aangemaakt. Daarin komt de shortcode 'createqrcodeform', waarmee de plug-in wordt aangeroepen.of Met opgave van keuze opties gescheiden door puntkomma. In dat geval verschijnen de gegeven opties in de keuzelijst. De gekozen optie komt als opmerking bij de betaling in de QR-code.
Installatie / Update
Installatie van de WordPress Plug-In Kies ‘Nieuwe plugin’
Kies ‘Plugin uploaden’
Selecteer via ‘Bestand kiezen’ het aangeleverde ZIP bestand
Kies na installatie voltooid is ‘Plugin activeren’
Update Indien sprake is van een nieuwe versie, dan kan deze op dezelfde wijze over de bestaande (actieve) versie worden geplaatst. De ingevulde database instellingen blijven behouden, maar eventueel gemaakte aanpassingen in CSS of PHP bestanden worden overschreven. Maak voor de zekerheid altijd tevoren een back-up van database en (plug-in)bestanden. NB. Er wordt op dit moment nog niet automatisch op de beschikbaarheid van updates gecontroleerd.
Plug-in directory na installatie van de bestanden Installatie pakt de bestanden uit in Plug-in directory.
In WordPress bij Plug-ins zichtbaar na activatie
Instellingen
Instellingen voor bankgegevens Instellingen kunnen worden aangepast onder WordPress menu Instellingen PEP QR form. Vul eenmalig BIC code, Naam en IBAN van de eigen rekening in. Ook is in dit gedeelte de kwaliteit van de foutcorrectie aan te passen. QR-code met lager correctie niveau, laat zich beter verkleinen. QR-codes hebben het vermogen om bruikbaar te zijn, ook al is een gedeelte onleesbaar geworden. Er zijn als het ware back-up gegevens aan de code toegevoegd. Hiertoe zijn 4 foutcorrectieniveau ’s instelbaar. Standaard staat deze op M(edium). Hoe meer informatie toegevoegd wordt, hoe meer rijen en kolommen zichtbaar worden. Een hoger foutcorrectieniveau zal deze dichtheid verder vergroten. Hoe lager het foutcorrectieniveau, hoe minder deze dichtheid is, wat de minimale afdrukgrootte verbetert. Iets om mee te spelen en uit te proberen. Zie onder aan deze pagina voorbeelden met de verschillende niveaus.
Instellingen voor Logo-informatie Aan de QR-code kan een logo worden toegevoegd. Geef de bestandsnaam van het plaatje op en plaats het bestand in de aangegeven map. Rekening houdend met de foutcode correctie kan een percentage worden gekozen waarmee het logo de QR-code maximaal mag overlappen. Minimaal 1 om deling door nul te voorkomen. Maximaal 30 (gelijk aan het percentage schade herstel mogelijkheid van het hoogste foutcorrectie niveau H). Standaard staat dit op 7 (gelijk aan percentage schade herstel van het laagste foutcorrectie niveau). Als het logo oppervlak groter is, dan wordt het verkleind tot het ingestelde percentage. NB. Het wordt niet vergroot! Het logo wordt niet geplaatst indien: – PHP GD extensie niet beschikbaar is; – het bestand niet wordt gevonden; – als het mime type van het bestand geen image/png of image/jpeg is. Tenslotte kan op met een percentage ingesteld worden in welke mate het logo dekkend wordt weergegeven. Minimaal 0 is volledig transparant. Maximaal 100 is volledig dekkend.
Instellingen voor formulierinformatie 4 x HTML kleurenkiezer voor het instellen van de achtergrondkleur, kleur van koptekst, kleur van lettertype voor de gewone tekst en waarschuwingskleur. De tekst die hier als html ingevuld wordt, verschijnt in de tabel boven en onder de QR-code. Tekst kan hier desgewenst worden aangepast. NB. Voor mijn eigen website heb ik hieraan toegevoegd dat de QR-code na 60 minuten automatisch van de website wordt verwijderd. De plug-in voorziet hierin door een instelbaar tijd interval waarna het gemaakte QR-code plaatje wordt verwijderd. Dit interval staat bij installatie standaard op het minimum van 0, waarbij het plaatje niet wordt verwijderd. Het maximum is instelbaar op 525600 minuten (= 1 jaar). Je moet toch ergens een grens trekken.
Instellingen voor meldingen Selecteer hier naar wens of u zelf een notificatie wilt ontvangen wanneer een QR-code is gegenereerd en of u wilt dat de bezoeker de QR-code ook per E-mail kan ontvangen.
Notificatie E-mail Hier een voorbeeld van het verzonden bericht met daarbij nogmaals de ingevulde gegevens ter controle.
En met het QR-code plaatje als bijlage. Scan het maar met uw bank app en zie dat het werkt.
Tips
Controleer af en toe de directory images wp_cron zorgt ervoor dat gemaakte QR-code plaatjes na ingestelde tijd verwijderd worden. NB. Het ingestelde event wordt, nadat deze tijd is verstreken, getriggerd door een activiteit op uw website en dan uitgevoerd.
Gebruik voor eigen facturen Vul de gegevens in voor een te ontvangen betaling en genereer de QR-code. Ontvang de QR-code per E-mail en plak het plaatje in de te verzenden factuur.
Meertalig formulier De plug-in is vertaald is op grond van de taalinstelling van WordPress naast het Nederlands en Nederlands formeel, beschikbaar in het Engels, Duits, Frans of Spaans.
In het Duits:
In het Frans:
In het Spaans:
Meertalige instellingen Ook de instellingen van de plug-in zijn vertaald en wordt op grond van de taalinstelling van WordPress vertoond worden in Nederlands, Engels, Duits, Frans of Spaans.
Toevoegen Logo De plug-in biedt de mogelijkheid om een logo toe te voegen in jpg of png formaat. Deze wordt in het midden geplaatst. Uiteraard moet het logo kleiner zijn dan de grootte van de QR-code. Het door mij gebruikte plaatje is 150 x 35 = 5250 pixels in contrasterende kleur met witte rand van 1 pixel dikte. De grootte van de gegenereerde QR-code blijkt afhankelijk van de hoeveelheid ingevoerde tekst. met het voorbeeld hieronder met Level M is het 244 x 244 = 59536 pixels. Het logo beslaat dan 5250 x 100 / 59536 = 8,82% van de code. Beslaat de grootte van het logo meer dan het ingestelde percentage (nu 7%), dan wordt deze verkleind. Hoe dit werkt is een kwestie van experimenteren met de grootte van het logo, het gebruikte foutcorrectieniveau, de grootte van de gewenste weergave, de ingevoerde hoeveelheid tekst en van de kwaliteit van de gebruikte scanner.
Het foutcorrectieniveau kan in de plug-in worden ingesteld Hieronder voorbeelden met deze verschillende niveau’s. “Beschadigd” door het geplaatste logo (100×25 pixels). Voor SEPA met de maximaal aantal van 140 karakters gevuld. Met Level L (tot 7% schade) 228×228 pixels.
Met Level M (tot 15% schade) 244×244 pixels.
Met Level Q (tot 25% schade) 292×292 pixels.
Met Level H (tot 30% schade) 324×324 pixels.
Ik adviseer en gebruik zelf Level M.
Test codes met QR-code scanner Gebruik een QR-code scanner om de plaatjes hierboven te testen. Inhoud voorbeeld Level L moet de volgende inhoud hebben:
Instellingen 
Geweldig.
Nu nog de Rabo zover krijgen dat ze SEPA gaan ondersteunen in hun app…