STL : Component / drop-in integration - Card Number, Security Code, Expiry date fields are disabled

[spbpraveen]

Component / drop-in integration - Card Number, Security Code, Expiry date fields are disabled

• We are using SDK version v68 and v70 sessions API.
• Adyen version of the JS and CSS is 5.39.0

We are using the version v5.39.0 and SDK version v68 /sessions API to retrieve the session ID and session Data for our merchant reference through simple Java API call (we are not using react ). • We have generated the client-key as per the instructions provided in documentation - https://docs.adyen.com/development-resources/client-side-authentication#get-your-client-key - also the necessary origins are added.

In both, component integration and drop-in integration – we are successfully able to load the UI by passing the session ID, Data and client-key. i.e,

1. in Component – we integrated only card
2. in Drop-in – we have integrated the complete drop-in (where all the payment methods are loaded ).

What we are observing in both is – we are unable to access the Card number fields, CVV field, Expiry fields and it is not enabled. Like, we are unable to enter any number in the fields. Could you please us on this issue ?

To Reproduce Steps to reproduce the behavior:

1. Once the Drop-in or the component is loaded on the page, click on Card Number field, Expiry date field, Security Code field
2. The fields are disabled (where the user is not able to enter any information )
3. We don't see any respective error in the browser console.

Expected behavior User should be able to enter the card number, expiry date, security code in both Drop-in / Component integration.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser [e.g. chrome, Edge, Firefox]

console-browser.webm

[sponglord]

Hi @spbpraveen I wonder, do you experience the same issue if you run your environment at http://?

And, can you try setting forceCompat: true in a paymentMethodsConfiguration object that you place in the object you configure Checkout with. e.g.

await AdyenCheckout({
  amount,
  clientKey,
  ...
  paymentMethodsConfiguration: {
    card: {
      forceCompat: true
    }
  }
});

[spbpraveen]

Hi @sponglord,

Thank you for your reply!

We are on https://localhost which is our local workspace where our application is running, and with our current setup it is not possible to hit the localhost with http://.

We tried setting forceCompat: true in the paymentMethodsConfiguration - even in this scenario, the behavior is same. The card number, expiry date, security code in both component/drop-in integration is still disabled.

Thanks.

[ossiggy]

Hi @spbpraveen, are there any errors in the console that you could include in a screenshot?

[spbpraveen]

Hi @ossiggy We are not seeing any errors in the console. Uploading the video of the same.

Thanks. console-browser.webm

[sponglord]

Hi @spbpraveen - can you see from the Network tab whether the securedFields files are actually getting successfully loaded (including, what the response looks like). And are you using cookieBot, or any kind of cookie consent library? Or any kind of Ad-blocker?

[spbpraveen]

Hi @sponglord , What do you mean by CookieBot or the cookie consent library here ? We don't use any Ad-blockers.

As requested, we will share the Network tab to confirm the secureFields loading and response - as a video.

Thanks.

[sponglord]

@spbpraveen

Cookiebot CMP is a Consent Management Platform that helps businesses make their websites compliant with data privacy regulations

In short, it assesses your website for cookies and whether the user has given consent for them. We have seen cases where CookieBot blocks the iframes if it's set with data-blockingmode="auto" (But even in these cases the iframes show an "Iframe has not configured" message)

However, since you're asking what it is, I guess that means you're not using it! ;-)

[spbpraveen]

Hi @sponglord , We have tried to capture the network tab while loading the web component in our billing page. We find the below URL in network tab having some issue in the response (attached the response in txt format). I believe you are looking for this secureFields resource. PFA screenshot of the browser console as well, because we are seeing some warning related to this URL, and when we try to open the URL in new tab : we see that "The iframe has not configured - see Warning in Console" and console - Check that the clientKey is created against the right endpoint ("test" | "live") and that the list of "Allowed Origins" contains the domain of your website.

It seems like an issue with an endpoint. Could you please advise further on this.

URL:

https://checkoutshopper-test.adyen.com/checkoutshopper/securedfields/test_FAIM6BH3QJBALDEBKWGHQZMBAEDJ5EZH/4.4.1/securedFields.html?type=cardCompat&d=aHR0cHM6Ly9sb2NhbGhvc3QuY2hjYXJvbGluYWhlcnJlcmEuY29t

secureFields-request-response-from-network.txt

[sponglord]

Hi @spbpraveen - following the error you get

Check that the clientKey is created against the right endpoint ("test" | "live") and that the list of "Allowed Origins" contains the domain of your website

Have you done this? Are you sure that you've set https://localhost.chcarolinaherrera.com as one of the Allowed Origins for your ClientKey in your Test CA?

Because it really looks like your clientKey (test_FAIM6BH3QJBA...) and domain (https://localhost.chcarolinaherrera.com) are not associated with one another.

[spbpraveen]

Hi @sponglord,

We have verified the ClientKey in our TEST CA and origins allowed. PFB information.

Client-key: test_FAIM6BH3QJBALDEBKWGHQZMBAEDJ5EZH

PFA for your reference of the configured allowed origins.

Under accounts- Company account and all associated merchant accounts is selected.

Please review and let us know if this configuration is ok, and also let us know what further information is required.

Thanks.

[sponglord]

Hi @spbpraveen - are you sure it's not working now? Or at least something has changed?

Before, when I ran the URL from your previous post: https://checkoutshopper-test.adyen.com/checkoutshopper/securedfields/test_FAIM6BH3QJBALDEBKWGHQZMBAEDJ5EZH/4.4.1/securedFields.html?type=cardCompat&d=aHR0cHM6Ly9sb2NhbGhvc3QuY2hjYXJvbGluYWhlcnJlcmEuY29t I got a page with an "invalid origin" message. Now when I run that same url I can see that it serves the securedField file

[spbpraveen]

Hi @sponglord , The secureField is getting served even before - but the issue is fields are not accessible. When the iframe loads - but the card number, expiry field, and CVC fields are not accessible. Please find the attached screenshots when the ticket was raised.

Thanks.

[sponglord]

Hi @spbpraveen - I'm running your url again: https://checkoutshopper-test.adyen.com/checkoutshopper/securedfields/test_FAIM6BH3QJBALDEBKWGHQZMBAEDJ5EZH/4.4.1/securedFields.html?type=cardCompat&d=aHR0cHM6Ly9sb2NhbGhvc3QuY2hjYXJvbGluYWhlcnJlcmEuY29t

and once again I'm getting an "invalid origin" response:

Can you please paste the above url into Chrome and send me a screenshot of what the "Preview" and "Response" tabs show (from the Developers console).

And then do the same for your test website (for the securedFields.html Preview and Response).

It would also be interesting to see, for the securedFields.html, what the Request Headers look like, particularly for the Referer field:

thanks

[sponglord]

Alternatively, or in addition, can you expose any kind of url that we can test/debug with?

[spbpraveen]

Alternatively, or in addition, can you expose any kind of url that we can test/debug with?

This is not possible for us to expose our localhost URL.

[spbpraveen]

Hi @spbpraveen - I'm running your url again: https://checkoutshopper-test.adyen.com/checkoutshopper/securedfields/test_FAIM6BH3QJBALDEBKWGHQZMBAEDJ5EZH/4.4.1/securedFields.html?type=cardCompat&d=aHR0cHM6Ly9sb2NhbGhvc3QuY2hjYXJvbGluYWhlcnJlcmEuY29t

and once again I'm getting an "invalid origin" response:

Can you please paste the above url into Chrome and send me a screenshot of what the "Preview" and "Response" tabs show (from the Developers console).

We are also getting the same response.

And then do the same for your test website (for the securedFields.html Preview and Response).

It would also be interesting to see, for the securedFields.html, what the Request Headers look like, particularly for the Referer field:

thanks

I believe I have already copied the request and response in a txt file and attached with this ticket. PFA secureFields-request-response-from-network.txt on this thread. On the same message - I have copied the request and response from the network tab. Referrer from the request headers is https://localhost.chcarolinaherrera.com/ If you need more information apart from this - please let us know - I will recreate and attach the screenshots.

Thanks, Bala

[sponglord]

Hi Bala, secureFields-request-response-from-network.txt is just a copy of the content of the securedField.html file.

What I need is a copy of the Request and Response Headers when the securedField.html file is loaded.

Please generate a .har file that will contain this information:

• From the Network tab, right-click on the network request for the securedFields.html file,
  • select, Save all as HAR with Content (Chrome)
  • or, Save All As HAR (Firefox)

thanks

[spbpraveen]

Hi @sponglord I will replicate and share it with you as mentioned above. Thanks.

[ribeiroguilherme]

@spbpraveen any updates on this?

[spbpraveen]

Hi @ribeiroguilherme - we will provide an update by coming Monday EOD with the necessary information.

Thank you!

[rmahoa]

Hi @ribeiroguilherme , This is Raja from STL team I have performed the task asked by u earlier to Bala . Here are the files you have asked for.

Response.txt localhost.chcarolinaherrera.com.zip Request.txt

[huang-p1travel]

We have seen cases where CookieBot blocks the iframes if it's set with data-blockingmode="auto" (But even in these cases the iframes show an "Iframe has not configured" message)

@spbpraveen Sorry to chip in here. We have this exact issue. If user only accepts the required cookies, Adyen iFrames failed to load. I was trying to add Adyen cookie to Necessary cookies categories, but I couldn't find the information about the cookie used for rendering the iframes. Am I on the right direction? Could you share the proper solution for this?

[Holinc19]

Check your CA configuration if you get Invalid origin error Configuring API credential by adding allowed origins，such as http://localhost:3000, https://yourhost.com

Allowed origins are domains from which we expect to get your client-side requests. It is mandatory to add at least one when using a client key.

[sponglord]

@rmahoa - everything in you request/response seems to be ok.

If I run the url: https://checkoutshopper-test.adyen.com/checkoutshopper/securedfields/test_FAIM6BH3QJBALDEBKWGHQZMBAEDJ5EZH/4.4.1/securedFields.html?type=cardCompat&d=aHR0cHM6Ly9sb2NhbGhvc3QuY2hjYXJvbGluYWhlcnJlcmEuY29t in its own window/tab - I no longer get an "invalid origin" message and instead get a "The iframe has not configured - see Warning in Console" - but this is the correct behaviour for a request for the securedFileds.html run outside of the context of the Dropin.

So everything seems to be working correctly from our end.

Without the possibility of exposing a url on which we can directly debug, I think perhaps it is now the time to contact out support team (https://www.adyen.help/hc/en-us/requests/new) and they can run through the entire process with you

[nenadepam]

Hi all, is there any update regarding this one. We had reports of this behavior on our site for some time. Here is is the example video from one customer , hope it helps https://www.youtube.com/watch?v=B70BcackH50 We use "@adyen/adyen-web": "5.53.2" and "@adyen/api-library": "10.1.0",

[sponglord]

@nenadepam - the video you share shows a different issue: the securedFields render but then disappear. This is different to the fields never rendering in the first place - which is what this ticket is about.

Will you please create a new, separate issue - detailing how we can recreate it; and we will look into it. Thanks

[nenadepam]

Hi @sponglord tnx for response, here is the new separate issue https://github.com/Adyen/adyen-web/issues/2529