I’m working on a store website and I am trying to implement the square web payment SDK inside my payment page.
I tried to follow this guide but it seems that the card component is not showing.
This what I get actually:
I literally copy pasted the code from the guide and I don’t have any errors on the console so I have no idea why the component won’t display
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:
Web Payments SDK Requirements
Take Payments Online
Get Started
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.
Hey @EliottPal!
If you copied the code straight from the SDK reference, you’ll still need to replace the API credentials with ones from your own Square account.
For a more robust walkthrough of setting up Web Payments SDK, you can check out our Web Payments SDK Quickstart.
Yes that’s what I did but the card component (with the text fields) won’t show anyway. That’s what I don’t understand.
I’ll try following the quickstart guide maybe there’s something I missed.
Gotcha. Let us know if there’s anything about the quickstart we can help clarify!
Thanks for providing detailed answer.
I was finally able to make it work.
The issue is that by default, Angular does not let you add <script> tags into html, you will have to put your code into a ngAfterViewInit or ngOnInit instead.
In addition to that, you need to wait for the card to be initialized before calling
if (!window.window.Square) {
throw new Error("Square.js failed to load properly");
}
This can be done with a simple promise or timeout.
Now I can finally have the card component rendered:
Glad to hear you figured it out and thank you for sharing your solution with the community. 
