diff --git a/assets/shop/checkout_complete_entrypoint.js b/assets/shop/checkout_complete_entrypoint.js index 3426a66c..eb4e31b3 100644 --- a/assets/shop/checkout_complete_entrypoint.js +++ b/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', () => { diff --git a/assets/shop/js/blik_code.js b/assets/shop/js/blik_code.js new file mode 100644 index 00000000..dc05f500 --- /dev/null +++ b/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(); + } + }); +}); diff --git a/assets/shop/order_show_entrypoint.js b/assets/shop/order_show_entrypoint.js index edf46f62..fe0daf0a 100644 --- a/assets/shop/order_show_entrypoint.js +++ b/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', () => { diff --git a/templates/shop/payment/_blik.html.twig b/templates/shop/payment/_blik.html.twig index 03cdcc43..3ac480fe 100644 --- a/templates/shop/payment/_blik.html.twig +++ b/templates/shop/payment/_blik.html.twig @@ -2,7 +2,7 @@
- {{ form_row(form.tpay.blik_token) }} + {{ form_row(form.tpay.blik_token, { 'attr': { 'data-blik-code-input': '' } }) }} {% include '@CommerceWeaversSyliusTpayPlugin/shop/partial/_policies.html.twig' %}