PEP-wooqr QR-code plug-in voor Woocommerce betalingen

Doel

Toevoegen van betaalmogelijkheid aan website met PEP-wooqr QR-code plug-in. In WordPress website met Woocommerce webwinkel te gebruiken voor het ontvangen van betalingen. Optioneel met uw logo in de QR-code.

  • 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

  • Zie ook PEP-frmqr QR-code plug-in voor betalingen voor de plug-in met invul formulier, die zonder Woocommerce 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 of in toegezonden E-mailbevestiging te scannen voor een online betaling.
  • Ik kwam op de gedachte zelf de QR-code zelf op de website te genereren en heb deze 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).
  • Bedrag en Opmerking/reden van betaling worden uit de Woocommerce bestelling overgenomen.
  • 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.
  • En dan nog…. met de QR-code is het slechts mogelijk het ingevulde bedrag naar uw bankrekening over te maken.

Opzet

  • Plug-in met een instellingen pagina in twee secties:
    • Instellingen voor bankgegevens
      Met SEPA informatie en bank gegevens (BIC, Naam, IBAN) en de optie om uw logo toe te voegen.
    • Instellingen voor formulierinformatie
      Met vrije configuratie van de gegevens die in twee tekst velden bij de QR-code op het scherm zullen verschijnen.
  • Resultaat in tabel op bestelbevestiging en in E-mail:
    • Toont in tabel onder de bestelinformatie de gegenereerde QR-code
    • Uiterlijk, kleur, lettergrootte etc. zijn afhankelijk van het eigen WordPress thema en deels aan te passen met meegeleverde CSS.
  • 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.
    • Er kan 1 bankrekening als doel worden ingevuld.
    • Tekst van formulieren en E-mail is grotendeels in de code van de plug-in opgenomen.
    • De plug-in is niet met andere thema’s getest.
    • 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 of hoger. Met lagere versies werkt het vermoedelijk, maar heb ik niet getest.
  • Ik ga uit van Woocommerce versie 5.9.0 of hoger. Met lagere versies werkt het vermoedelijk, maar heb ik niet getest.
  • De plug-in is getest met verschillende WordPress Standaard thema’s en met standaard Woocommerce. Werking met thema’s die ingrijpen op Woocommerce kan ik niet garanderen! Maakt gebruik van de volgende hooks: ‘woocommerce_order_details_after_order_table’ en ‘woocommerce_email_after_order_table’.
  • 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 WordPress mail functionaliteit werkt.

Uitvoering

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

  • De bestelbevestiging toont de QR-code
    Onder de bestelgegevens is een tweede tabel toegevoegd met de betaal informatie. In de tabel boven en onder de QR-code worden de gegevens vanuit de instellingen geplaatst.
    Naast de QR-code ter controle de bedrag en opmerking, alsmede de bankgegevens vanuit de instellingen.
  • Scan het maar met uw bank app en zie dat het werkt.

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-wooqr
  7. In WordPress bij Plug-ins zichtbaar na activatie

Instellingen

  1. Instellingen voor bankgegevens
    Instellingen kunnen worden aangepast onder WordPress menu Instellingen PEP QR Woo.
    Vul eenmalig BIC code, Naam en IBAN van de eigen rekening in.
    Tekst die u invult bij ‘Opmerking voor betaling’, wordt vanuit de plug-in aangevuld met bestelnummer en domeinnaam.
  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 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 op 0.
    NB. de QR-code in bevestigingsmail bevat een link naar dit bestand.

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 dit tijd is verstreken, getriggerd door activiteit op uw website.
  • 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. Uiteraard moet het logo kleiner zijn dan de grootte van de QR code. Het door mij gebruikte plaatje is 83x 20 = 1660 pixels in contrasterende kleur met witte rand van 1 pixel dikte. De gegenereerde QR-code met Level M is 196 x 196 = 38416 pixels.
    Het logo beslaat dan 1660 x 100 / 38416 = 4,32% van de code.
    In de code: $logo_percentage = ( $logo_size * 100 / $qr_size );.
    Om aan de veilige kant te blijven heb ik de maximale grootte in de code begrensd op 7%. Hoe dit werkt is een kwestie van experimenteren met de grootte van het logo, het gebruikte foutcorrectieniveau, de grootte van weergave van het resultaat en kwaliteit van de gebruikte scanner.
  • Het foutcorrectieniveau kan in de plug-in worden ingesteld
    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. 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.
    Hieronder voorbeelden met deze verschillende niveau’s.
    “Beschadigd” door het geplaatste logo.
    Voor SEPA met de maximaal aantal van 140 karakters gevuld.
    LEVEL LLevel L tot 7% schade

    LEVEL M Level M tot 15% schade

    LEVEL Q Level Q tot 25% schade

    LEVEL H Level H tot 30% schade

    Ik adviseer en gebruik zelf Level M.

Geef een reactie

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

Deze site gebruikt Akismet om spam te verminderen. Meer informatie over hoe uw reactiegegevens worden verwerkt.