Prevent providing BLIK code longer than 6 characters and with non-digits

assets/shop/checkout_complete_entrypoint.js

@@ -3,6 +3,7 @@ import './scss/style.scss';
 import './js/_pay_by_link';
 import './js/_visa_mobile';
 import './js/apple_pay';
+import './js/blik_code';
 import {CardForm} from "./js/card_form";
 
 document.addEventListener('DOMContentLoaded', () => {

assets/shop/js/blik_code.js

@@ -0,0 +1,19 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const BLIK_CODE_LENGTH = 6;
+
+  let blikCode = document.querySelector('[data-blik-code-input]');
+
+  if (null === blikCode) {
+    return;
+  }
+
+  blikCode.addEventListener('keypress', function(e) {
+    if (!/[0-9]/.test(e.key)) {
+      e.preventDefault();
+    }
+
+    if (blikCode.value.length + 1 > BLIK_CODE_LENGTH) {
+      e.preventDefault();
+    }
+  });
+});

assets/shop/order_show_entrypoint.js

@@ -1,6 +1,7 @@
 import './js/retry_payment';
 import './scss/style.scss';
 import './js/_pay_by_link';
+import './js/blik_code';
 import {CardForm} from "./js/card_form";
 
 document.addEventListener('DOMContentLoaded', () => {

templates/shop/payment/_blik.html.twig

@@ -2,7 +2,7 @@
     <div class="ui small icon message">
         <i class="payment icon"></i>
         <div class="content">
-            {{ form_row(form.tpay.blik_token) }}
+            {{ form_row(form.tpay.blik_token, { 'attr': { 'data-blik-code-input': '' } }) }}
             {% include '@CommerceWeaversSyliusTpayPlugin/shop/partial/_policies.html.twig' %}
         </div>
     </div>