Categorieën
Wordpress-Website

PEP-frmqr QR-code plug-in voor betalingen

Voeg eenvoudig QR-code betaalmogelijkheid toe met een formulier in Wordpress website.

Doel

Toevoegen van betaalmogelijkheid aan website met PEP-frmqr QR-code plug-in. In WordPress website te gebruiken voor het ontvangen van betalingen, donaties. Maar ook toe te voegen in facturen.

  • De plug-in is voor € 30,25 (incl. 21% BTW) verkrijgbaar via de bestelpagina.
  • Getest met de bank app van diverse Nederlandse en Duitse banken.
  • De Plug-in is gemaakt in het Engels. De beschikbare vertaling in Nederlands, Duits, Frans of Spaans wordt getoond op basis van de in WordPress gekozen taal.

Aanleiding/overwegingen

  • Zie ook PEP-wooqr QR-code plug-in voor Woocommerce betalingen voor de plug-in dit met Woocommerce webwinkel gebruikt kan worden.
  • Beide plug-ins kunnen ook gezamenlijk worden geïnstalleerd.
  • 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/betaling/) en hieronder beschreven.
  • Bedrag en Opmerking/reden van betaling, zouden dan wel via een formulier ingevuld moeten kunnen worden.
  • 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.

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 te doen.
  • Ook wordt de QR-code binnen de website bewaard met een naam die door anderen niet te raden is. De 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.
  • Invoer in het formulier wordt gecontroleerd om misbruik (richting de database) af te vangen.
  • Bij de het resultaat formulier wordt tenslotte nog gecontroleerd of de QR-code wel is gegenereerd op basis van het invul formulier.
  • 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.

Opzet

  • Plug-in met een instellingen pagina in drie secties:
    • Instellingen voor bankgegevens
      Met SEPA informatie en bank gegevens (BIC, Naam, IBAN).
    • 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.
    • 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:
    • De bank app kan alleen de QR-code inlezen die op een ander apparaat (PC, Notebook, Tablet, Smartphone of print) zichtbaar is.
    • 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

  • Erkenning
    De plug-in is ontwikkeld op basis van:
  • Ik ga uit van WordPress versie 5.8.2. 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.
  • Check of WordPress mail functionaliteit werkt.

Uitvoering

  • Geleverde ZIP bestand bevat al wat nodig is.
    Bekijk het 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

  1. Het betaalformulier (gegenereerd zonder shortcode argumenten)
    Bedrag en reden van betaling (beide verplichte velden) worden ingevuld.

  2. 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.

  3. 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.

  4. 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

  1. Installatie van de WordPress Plug-In
    Kies ‘Nieuwe plugin’

  2. Kies ‘Plugin uploaden’

  3. Selecteer via ‘Bestand kiezen’ het aangeleverde ZIP bestand
  4. Kies na installatie voltooid is ‘Plugin activeren’
  5. 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 niet automatisch op de beschikbaarheid van updates gecontroleerd.

  6. Plug-in directory na installatie van de bestanden
    Installatie pakt de bestanden uit in Plug-in directory PEP-frmqr
  7. In WordPress bij Plug-ins zichtbaar na activatie

Instellingen

  1. 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.

  2. Instellingen voor formulierinformatie
    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 10 minuten automatisch van de website wordt verwijderd. De plug-in voorziet hier echter niet in.

  3. 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.

  4. Notificatie E-mail
    Hier een voorbeeld van het verzonden bericht met daarbij nogmaals de ingevulde gegevens ter controle.

  5. En met het QR-code plaatje als bijlage.
    Scan het maar met uw bank app en zie dat het werkt.

Tips

  • Leeg met regelmaat de directory images
    Zelf doe ik dat met een script dat elke minuut kijkt of er een bestand staat dat ouder is dan 10 minuten.

  • 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 beschikbaar in Nederlands, Engels, Duits, Frans of 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..


Geef een antwoord

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *