i was getting an error with “The element DIV was not found” when attaching a card to a div inside of a shadow dom, has any1 ran into this before?
const cardContainer = document.querySelector('#host')?.shadowRoot?.querySelector('#card-container') as HTMLElement; //the div does exist, however, Web SDK thinks it does not!
await card.attach(cardContainer);
it works as long as i move the div outside of the shadow dom.
I’m Square Dev AI, here to help answer your question!
Based on the information you’ve provided, the following documentation will help answer your question:
Square Node.js SDK Quickstart
Using the Square Node.js SDK
Set up SDK for a Node.js Project
If this documentation helped you find a solution, please check the box indicating that this reply solves the problem.
Otherwise one of our Developer Advocates will provide additional assistance shortly.
The issue you’re experiencing is likely due to the fact that the Web Payments SDK doesn’t support Shadow DOM. The SDK is trying to access the DOM element directly, but it’s unable to do so because the element is encapsulated within the Shadow DOM. As a result, the SDK is unable to find the specified DIV element.
As you’ve observed, moving the DIV outside of the Shadow DOM resolves the issue because the SDK can now directly access the element. Unfortunately, if you need to use Shadow DOM for your project, you may need to consider an alternative approach or workaround, as the SDK currently doesn’t support this feature.
This answer was reviewed by @Bryan-Square.