Solved Can not paste credit card number in {Woolworths} shop

Steffie

Oh dear. I'm describing this bug here, but am aware that probably no Dev nor Soprano is going to be able to investigate it, unless you feel like either relocating to Australia, or creating your own account & making an order that will not get delivered to you.

Though i have been doing my groceries shopping with Woolies for many years, I have not needed to use this particular site for several months with Vivaldi-Snapshot, because each of my recent shops occurred when i was still using Firefox-Nightly as my default. Hence i have no idea which version of Snapshot might have introduced this bug.

Spoiler

None of those red-boxed fields today [3.2.1950.3] would accept text input from the clipboard; neither by mouse nor keyboard. I could type text in manually, but not paste it. For years Snapshots had worked fine here.

Changing the tracker from Block Trackers & Ads to Block Trackers did not help. Increasing the uMatrix filters to more permissiveness did not help.

The website itself certainly was not broken, because once i gave up trying to complete my order via V-SS i successfully did so in Firefox-Nightly [which still had the tighter uMatrix filters].

Given my urgent priority today was to place my order, not troubleshoot Vivaldi, i did not attempt any of the usual diagnostics like disabling all extensions, trying another user-profile, etc. All i can say was:

Vivaldi-Snapshot let me down
Firefox-Nightly saved me.

modedit split from https://forum.vivaldi.net/topic/48150/side-by-side-installation-of-vivaldi-on-macos-vivaldi-browser-snapshot-1950-3/

Steffie

@pafflick Yippity Yay, it works nicely thank you.

As you said, the UI of Custom Style Script is certainly "rough" [that might be too kind], but it sure is functional though. I've now converted my myriad sites' CSS from Stylus into this one, verified they all still now work fine, then attended to the JS code you gave me for Woolies Checkout. The Card# field worked perfectly, but the CVV not, so i borrowed your code & extended it thus:

document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function() {
        document.getElementById('card_number').onpaste = function(e) {
            this.value=e.clipboardData.getData('Text');
        }
    },500);
});

document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function() {
        document.getElementById('cvv_csv').onpaste = function(e) {
            this.value=e.clipboardData.getData('Text');
        }
    },500);
});

Now both fields succeed.

I really appreciate your kindness ... again.

PS:
Unlike Stylus, this one seems not to have a nice easy UI-based Export / Backup option. How do you keep backups of all your settings for this one pls, other than manually copy /home/steffie/.config/vivaldi-snapshot/Default/Local Extension Settings/ecjfaoeopefafjpdgnfcjnhinpbldjij?

Chas4

@steffie: Might be for security or to prevent accidental bad copy and paste

Steffie

@Chas4 said in Side-by-side installation of Vivaldi on macOS – Vivaldi Browser snapshot 1950.3:

Might be for security

@Gwen-Dragon said in Side-by-side installation of Vivaldi on macOS – Vivaldi Browser snapshot 1950.3:

Did pasting creditcard number etc. worked in previous 3.1 Final?

With some brief exceptions, now & then, Vivaldi-Snapshot [not Stable] has been my default browser since early 2015. For longer than that, i have been doing my groceries shopping online with that vendor, ergo, i have been successfully paying for my shopping in V-SS on that page for many years. Yesterday's failure has never occurred for me before. Additionally, as i posted, it logically cannot be a site redesign that blocked the pastes, otherwise Firefox-Nightly would also have failed. It was specifically V-SS that failed yesterday, but i have no idea whether this is a new bug only in 3.2.1950.3, or if it was introduced undetected in some older Snapshot.

Steffie

@Gwen-Dragon said in Side-by-side installation of Vivaldi on macOS – Vivaldi Browser snapshot 1950.3:

could you test with

Sadly no i can't do any testing, at least not for another ~11 weeks when i then will need to do my next bulk groceries shopping. That page in my pic, only becomes available once customers have selected all their goods, & are then doing the Checkout to complete the purchase.

Actually, no, i am a total idiot -- i should have realised this before -- i can create a pretend-basket, then go to the Checkout pretending i am going to purchase, hence that page will be presented to me, then i can do those tests ... i simply then need to cancel the process rather than actually complete the purchase.

Sorry for my silliness in not realising that before. Later i shall do the tests, then update here.

Steffie

@Steffie Well well, i just made a remarkable & unexpected discovery.

None of those fields will accept paste from clipboard also in this:

Vivaldi	3.1.1929.34 (Stable channel) (64-bit)
Revision	a3849a97b5fbcc3f22dc813c14e999c7bf13b4f5
OS	Windows 10 OS Version 1909 (Build 18363.900)

That's a clean Test profile, no extensions, no Tracker/Ad blocking.

I really did not expect this result as for some reason i imagined the bug might have been only for Snapshot on Linux.

Later i shall test Chromium.

Steffie

@Gwen-Dragon Yes, danke, i had not forgotten that. I've just finished testing Chromium, in which i also used Inspect.

tl;dr:
Those fields are also broken even in Chromium 83, & afaik Inspect has not revealed any explanation based on site form design [but remember, i already knew this, coz Firefox-Nightly does work correctly here].

I do not have Chromium Beta, so i only tested my std distro release version. Now my testing seems to indicate:

This is not a Vivaldi bug, but is a Chromium bug.
The bug already existed in 83 [maybe even earlier, but i cannot test that].

Details:

Chromium	83.0.4103.106 (Official Build) Arch Linux (64-bit)
Revision	ce7134bb3d95141cd18f1e65772a4247f282d950-refs/branch-heads/4103@{#694}
OS	Linux
JavaScript	V8 8.3.110.13

This is the Card# field:

.card_number {
    padding: 15px 15px 15px 60px;
}

This is applicable to all 4 input fields:

.frm-txt {
    background: #FFF;
    border: 1px solid #CCC;
    border-radius: 0;
    box-sizing: border-box;
    color: #3E3E3E;
    display: block;
    font-size: 13px;
    padding: 10px;
    width: 100%;
    height: 48px;
    -webkit-appearance: none;
}
input[type="tel" i] {
    padding: 1px 2px;
}
input {
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark-color(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    -webkit-appearance: textfield;
    background-color: -internal-light-dark-color(rgb(255, 255, 255), rgb(59, 59, 59));
    -webkit-rtl-ordering: logical;
    cursor: text;
    margin: 0em;
    font: 400 13.3333px Arial;
    padding: 1px 2px;
    border-width: 2px;
    border-style: inset;
    border-color: -internal-light-dark-color(rgb(118, 118, 118), rgb(195, 195, 195));
    border-image: initial;
}

pafflick

Actually, @Chas4 is right, the website prevents pasting the credit card number on purpose, for some reason, the script seems to be failing in Firefox, so - if anything - you should rather report a bug there.

You can paste your credit card number in another field and drag&drop it into the field (it works) or use the Vivaldi "Insert note" feature (which also works), depending on how you feel about either of those workarounds regarding security.

BTW, the site is poorly designed in general (backend-wise), I was able to register using a fake number, even though they do the validation, but apparently it's on the client-side only, meaning I was able to bypass it easily, by deleting a few lines of code.

PS. The code you've pasted is just visuals, it's not relevant to the issue.

pafflick

If you use an extension for custom CSS/JS, you may use this snippet:

document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function() {
        document.getElementById('card_number').onpaste = function(e) {
            this.value=e.clipboardData.getData('Text');
        }
    },500);
});

It needs to run on this domain: https://iframe.payments.woolworths.com.au/

Steffie

@pafflick said in Can not paste credit card number in shop:

the website prevents pasting the credit card number on purpose

Well if that is true then they have made a design change there sometime over the past few months [which of course is entirely feasible], given per my older posts it used to work fine for me with V-SS for years.

@pafflick said in Can not paste credit card number in shop:

The code you've pasted is just visuals, it's not relevant to the issue

I simply did as i was asked. I am ever so obedient <<flutter>>.

@pafflick said in Can not paste credit card number in shop:

extension for custom CSS/JS

Stylus ... ever since you so kindly helped me with styling pages seemingly all those years ago now, teehee. Ta muchly for that snippet, i shall give it a try.

I shan't be able to try it on the website til tomorrow, but just now before going to bed i created the Stylus entry for it. It seems quite unhappy...

pafflick

@Gwen-Dragon That's correct, I forgot to mention that. It might be due to the fact that I use Custom Style Script which is for both CSS & JS, though still, it's my bad for not clarifying what type of code I provided there.

pafflick

@Gwen-Dragon Yeah, I've been using it for quite a while. Its interface is pretty rough, though I hope it uses lees resources thanks to that roughness. I wish that the day will come when we'll have the built-in feature to add custom scripts & styles in Vivaldi, just like in the old Opera.

Steffie

@pafflick Yippity Yay, it works nicely thank you.

As you said, the UI of Custom Style Script is certainly "rough" [that might be too kind], but it sure is functional though. I've now converted my myriad sites' CSS from Stylus into this one, verified they all still now work fine, then attended to the JS code you gave me for Woolies Checkout. The Card# field worked perfectly, but the CVV not, so i borrowed your code & extended it thus:

document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function() {
        document.getElementById('card_number').onpaste = function(e) {
            this.value=e.clipboardData.getData('Text');
        }
    },500);
});

document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function() {
        document.getElementById('cvv_csv').onpaste = function(e) {
            this.value=e.clipboardData.getData('Text');
        }
    },500);
});

Now both fields succeed.

I really appreciate your kindness ... again.

PS:
Unlike Stylus, this one seems not to have a nice easy UI-based Export / Backup option. How do you keep backups of all your settings for this one pls, other than manually copy /home/steffie/.config/vivaldi-snapshot/Default/Local Extension Settings/ecjfaoeopefafjpdgnfcjnhinpbldjij?

pafflick

@Steffie said in Can not paste credit card number in {Woolworths} shop:

The Card# field worked perfectly, but the CVV not, so i borrowed your code & extended it thus:

I overlooked this and frankly, I didn't bother myself with that field because it's just 3 digits (and I memorized my card's CVV for example ). But since you find it more convenient to paste that code instead of typing it, you can use this code:

document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function() {
        function pasteInput(e) {
            this.value=e.clipboardData.getData('Text');
        }
        document.getElementById('card_number').addEventListener('paste', pasteInput);
        document.getElementById('cvv_csv').addEventListener('paste', pasteInput);
    }, 500);
});

What you did, is you duplicated the whole code which means repeating some actions that need to run just once, and even though it might work, I think it's better to simplify it.

@Steffie said in Can not paste credit card number in {Woolworths} shop:

Unlike Stylus, this one seems not to have a nice easy UI-based Export / Backup option. How do you keep backups of all your settings for this one pls, other than manually copy /home/steffie/.config/vivaldi-snapshot/Default/Local Extension Settings/ecjfaoeopefafjpdgnfcjnhinpbldjij?

I have *.css and *.js files saved on my OneDrive so that I can sync my custom scripts and styles between multiple devices. But that includes only the larger ones (those, which took me hours to write and test). So it's like 7 of them on my OneDrive of the total 30 that I have saved in the extension...

But I guess backing up the whole extension's data should be sufficient enough.

Steffie

@pafflick said in Can not paste credit card number in {Woolworths} shop:

you duplicated the whole code which means repeating some actions that need to run just once

Yep, guilty. I wondered if i could efficiently combine some of the code, but it was late & i am still largely clueless, so i didn't.

@pafflick said in Can not paste credit card number in {Woolworths} shop:

it's just 3 digits

Well, four, for Amex, which is approximately 3.1415926 digits beyond my Coefficient of Laziness.

@pafflick said in Can not paste credit card number in {Woolworths} shop:

you can use this code

Done. Ta muchly bigly.

josephj11

While there appear to be a bunch of technical solutions to this issue, there is another way to address a lot of websites that do similar things.

When you find an offending field, you already have the data you want to enter in your clipboard, so all you have to do is type the contents of the clipboard. If you use Linux, AutoKey https://github.com/autokey/autokey allows you to write a two line script that will do that for you and you can assign a hotkey to run it. Since it looks like you typed it, most websites won't know you didn't and will just work.

AutoKey can do a lot more than just this - automating many functions on your desktop, but little things like this can make a big difference.

If you use Windows, AutoHotKey will do this for you. On Mac, there's Maestro and Automator.