CSS issue with etn.vendor-widget-0.1.0


In the .js container.style.width is set to “180px” but this doesn’t seem to display right:
(Tested in Safari 11.1.2 and Firefox 62.0 on OS X)

although a css class is specified container.classList.add("etn-payment"); in .js, correcting the width (203px + seems to work) via CSS requires “forcing” the issue:
.etn-payment { width: 203px !important; }

Anyone else having this issue / does 180px width work an other setups/browsers?
Could/should the CSS styling be left out of the .js and provided as a separate css file?


thanks for that - we’ve got our UI / UX guys looking at in the morning UK time (15 hours from now I’m afraid!).

Much appreciate you taking the time to point that out.



I encountered the same thing when I implemented the widget in a bootstrap “powered” website (just giving a feedback in case it could help hehe), coming from this :

to :


I didn’t try, but it looks like box-sizing property problem.

CSS box-sizing Property


Got the same issue when running the widget in a Wordpress website.

When the widget is run on its own as a single item on a web page, all looks fine.


No trouble at all! : )
Have had another look and actually the culprit seems to be the box-sizing of the <img> element:


Thanks for all your feedback.

There was indeed a conflict with bootstrap involving the QR image width & box-sizing. This has been patched in a fork at https://github.com/etn-egg/vendor-payment-widget.

Please can you confirm this fixes the issue before a pull request is created to merge this into the main release?




Worked for me! This is as displayed in Wordpress with the updated JS library:



Yep, looks all good here!


Fixed the issue here too ! Thanks @Egg :smiley:


Thanks for the feedback and for initially reporting this @Peter_DIR.

A pull request has been created with this and other updates. It will be merged on Monday pending feedback/comments.



Thanks again for your feedback. The pull request has been merged into master and is now available.

This is a minor update primarily fixing QR image rendering issues with Bootstrap. Please update your projects with the last release.

Further language support should be released in the next few days.