CODEWITHSUNDEEP
javascriptreactjsadyen
Facyo Kouch
Facyo Kouch

Reputation: 787

How to render the payment fields of Adyen in React?

I'm trying to use Adyen payment service with my (create) React application but not able to generate the input fields because it can't find the rootNode.

What I have tried:
From Adyen I have to load their checkout script inside my project. So I have created a <script> tag dynamical (document.createElement('script')) and in the body below loaded (document.body.appendChild(script)). This works.

Next I have to call a method from Adyen which takes an object as an argument that will eventually populate a div.

Problem:
This <div className="cards-div"> I've added into my React component but I get this error:
index.js:1446 ERROR: SecuredFields cannot find a valid rootNode element

It can't seem to see the created div. Does anybody know how I can populate these (credit card) fields or know what the best way of working with React and Adyen is?

Update:

Solution: I found a solution which worked for me, hopefully works also for you. Before I was calling the Adyen service on initial render of the component. Because it takes a bit, I've created a separated function which needs to be called whichs triggers the service

Upvotes: 1

Views: 2156

Answers (1)

luke_b
luke_b

Reputation: 697

That usually happens because the adyen js is running before the dom element has been created. Make sure to call .csf() after the #cards-div element is in the dom?

Upvotes: 1

Related Questions