Page MenuHomePhabricator

Adyen iframe config error messages inside card fields
Closed, ResolvedPublicBUG REPORT

Description

Amber spotted ZD #1000719 who got these iframe error messages in the form:

ZD1000719.png (566×569 px, 35 KB)

when trying to donate via:

https://payments.wikimedia.org/index.php?title=Special:AdyenCheckoutGateway&appeal=JimmyQuote&ffname=adyen-fr&recurring=false&payment_method=cc&gateway=adyen&country=FR&uselang=en&amount=20&opt_in=0&utm_medium=spontaneous&utm_campaign=spontaneous&utm_source=fr-redir.default%7Edefault%7Edefault%7Edefault%7Econtrol.cc&utm_key=vw_1920%7Evh_953%7EotherAmt_0%7Etime_15&currency=EUR

I am unable to replicate this, but it's odd-enough looking that I thought worth Phabifying. There is nothing recent at the Adyen console for this donor, who is in Civi from past contrib at cid=6887882.

Fr-Tech, please let me know if there's anything we can ask affected donors beyond the usual browser / OS / add-ons details.

Event Timeline

The donor also had visibility into these messages:

"desc": "There is an error message in the SecuredField. The SecuredField cannot be typed into even if the error message is removed (display: 'none')",
"reason": "There is something wrong with the clientKey.",
"reasonFull": "Check that it is created against the right endpoint (\"test\" | \"live\") and that the \"List of allowed origins\" contains the domain of your website."

"desc": "There is a warning that sits below the SecuredField - and the SecuredField can be typed into",
"reason": "The Component has been rendered multiple times into the same HTML container",
"reasonFull": "The Component has been rendered in a loop; or, React has made multiple render passes; or, the Component initialisation code has been accidentally duplicated"

"desc": "You are seeing this warning but the SecuredField is working as expected. (Perhaps the SecuredField briefly showed an error message?)",
"reason": "The SecuredField took longer than expected to configure",
"reasonFull": "Please ignore this warning. Sorry for the inconvenience!"

"like a weird timeout kind of condition on Adyen's end." thank you @XenoRyet, we will keep an eye out for any more of these, or if anyone can replicate we will update this Task. Hopefully it is a one-off.

@dkozlowski. Please let me know if this should be raised to Adyen or if on our side. Thanks

This comment was removed by MBeat33.
This comment was removed by MBeat33.
This comment was removed by MBeat33.

Here are the consolidated examples so far, with added feedback from donors.

ticketdatetech specsextra comments re add-ons + URL used
118824210/10/2022uses Privacy Badger, which reported that checkoutshopper-live.adyen.com was prevented from setting cookies, being listed as a "potential tracker"
118216210/03/2022not yetnot yet
11799199/27/2022Windows 10, OS build 19044.2006, Microsoft Edge Version 105.0.1343.53fundraising email1, Extensions = LastPass, IBM Security Rapport
11794109/25/2022Recent PC Debian GNU/Linux 11 (Bullseye) & Firefox 105.0.1“I run a personal web server with pages that hold all my bookmarks. For privacy reasons I spoof the referrer header. This referrer spoofing was breaking your donation mechanism. Please consider a donation mechanism that does not depend on the referrer header. It's relatively trivial but one small additional barrier to donating.” >>donor was successful after this >> extra details from donor: add-on 'HTTPS everywhere' installed, no other plugins/addons, Apache HTTP2 web server (2.4.54) listening on localhost:8888 http://localhost:8888 serving plain html (my bookmarks), network.http.referer.spoofSource=true
11789519/24/2022Windows 10 propayments.wiki via Adyen
11789119/24/2022n/an/a
11767089/22/2022Chrome + Windows 10payments.wiki via Adyen
11747159/20/2022DELL Inspiron 3793 laptop Firefox v.104.0.2 + Google Chrome v.105.0.5195.127“I do use several extensions including "uBlock Origin" and "uMatrix" but both were configured to permit the wikimedia.org domain. I tried both a link from an email as well as a link from a "Donate" button on the Wikimedia home page”
11743219/20/2022desktop computer, Edge browser“I have an ad blocker that came with my antivirus program, and the web address/url came from a link in the email you sent me”
11718829/15/2022Chrome. Acer Desktop Computer, Windows 11No browser add-ons. It was a Link in the email you sent me.
11704319/14/2022iOS 15.6.1 Safari“I get “Safari protected you from . . . . .” messages”
11643469/1/2022n/an/a
11502318/11/2022Browser: Firefox LinuxMint“...with some extensions to preserve privacy, but disabled”
100071910/05/2021Firefox 78.13.0esr (64-bit)“...with some slightly conservative settings such as not allowing third-party cookies…and some extensions such as Pricacy Badger, from the EFF, or uBlock Origin. Using the same version of Firefox, but with an "out-of-the-box" profile, without the slightest customization, I was able to make a donation”

Fr-Tech: Would asking those donors who use add-ons to make an exception for *.adyenpayments.com be worthwhile in these cases (assuming it's maybe not intermittent timeouts at Adyen)? It does seem like this is becoming more common, so we'd love to figure out how to enable these donors.

Some feedback from Adyen help desk:
Hi,

Thank you for reaching out to Adyen! Typically when you are receiving the The iframe has not configured error, it is related to an incorrect key for your client-side authentication. Depending on your integration, this can either be the client key or the origin key. You can generate these keys in the Customer Area by navigating to Developers > API Credentials, where you can select the web service user for which you want to generate the key.

For example, if you are authenticating using a client key, please check the following:

Are you using the correct client key in your integration?
Are all the domains on which the card input fields are loaded added to the “Allowed Origins” field, as explained in our documentation? (this is the most common issue)
Are you using the client key in the correct environment (test/live)?

If you are still experiencing issues once you have looked over these points and have inspected your implementation, it may be helpful to provide a video or screenshot of the Drop-in being rendered with the console window window open to allow us a more holistic view of the behavior.

Looking forward to your response.
Best,
Matthew Helmstetter
Technical Support Engineer

New response from adyen when we confirmed that our key is legit and this situation is not happen to 99% or users included us:

Matthew Helmstetter (Adyen)
Oct 6, 2022, 20:08 GMT+2

If you are unable to recreate it then it is extremely difficult to figure out what is going on because we would need to see the console error to be able to pinpoint where the error is coming from. I would recommend that if this ever happens then try and capture the console log and from there we should be able to assist in resolving the issue.

I am able to reproduce this error with the uMatrix extension,

Screen Shot 2022-10-10 at 11.51.08 PM.png (632×1 px, 123 KB)
, and find that if client can enable both adyen.com and checkoutshopper-live.adyen.com, then input field will be valid to enter card info with no error.

Change 840577 had a related patch set uploaded (by Wfan; author: Wfan):

[mediawiki/extensions/DonationInterface@master] Add try catch for adyen to catch if any adyen connection been blocked

https://gerrit.wikimedia.org/r/840577

todo: ask donor relation to do some generic trouble shooting test

Change 840577 merged by jenkins-bot:

[mediawiki/extensions/DonationInterface@master] Add try catch for adyen to catch if any adyen connection been blocked

https://gerrit.wikimedia.org/r/840577

Change 842557 had a related patch set uploaded (by Ejegg; author: Ejegg):

[mediawiki/extensions/DonationInterface@master] Don't show general error on incomplete fields

https://gerrit.wikimedia.org/r/842557

Moved this back to backlog because it seems another patch is needed. From an e-mail by @Ejegg on 2022-10-13:

[the patch] actually shows the general error message above the form for some trivial validation issues that should just get an error message below the relevant field (e.g. leave card fields blank and press donate). [...] there are other scenarios it's still showing the error for (enter an expiration date that's too old and press donate).

Change 842557 merged by jenkins-bot:

[mediawiki/extensions/DonationInterface@master] Adyen: Don't show general error on validation fail

https://gerrit.wikimedia.org/r/842557

XenoRyet set Final Story Points to 4.