Hi:
I running 2 websites that have many customers in common.
I have set up websiteONE to create customers and cards using the card SDK
I am now setting up websiteTWO to present the websiteONE customer/card page in an iframe – this way hoping to keep customers seeing the websiteTWO url.
I have setup CORS so the websites can communicate – cookies and messaages passing transparently between them.
Just started testing the websiteTWO iframing by entering card info. The card isn’t being saved by the customer/cardpage
I’m seeing these messages in my browser console
POST https://pci-connect.squareup.com/v2/card-nonce?=1743116171370.0974&version=1.70.0 400 (Bad Request)
I can guess what’s happening, but can you please elucidate, and suggest options (other than maintaining 2 basically identical pages on 2 different servers?)
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:
Additional Documentation
Cards API
Cards API
Build a Payment Integration and Take Payments Online
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 error message you’re seeing typically indicates that the request made to the Square server was not formed correctly. The issue might be related to the way the iframe is set up.
Square’s Web Payments SDK, which is used to generate card nonces, is designed to run directly on the page where the card information is entered. It’s not designed to be used within an iframe due to potential security risks and complications with PCI compliance.
Instead of using an iframe, you could consider implementing a shared login system or a single sign-on (SSO) solution. This way, customers could log in once and have their credentials and card information available across both websites.
Another option could be to use the Customers API to save card details on file after they’ve been entered on one site, and then use the Cards API to retrieve these details on the other site. This would require the customer’s explicit permission to save their card details.
Remember, any solution should ensure that card data is handled securely and in compliance with PCI standards.
This answer was reviewed by @Bryan-Square.
The SDK technical documentation is pretty meager. For developers, that info would be a Fun Fact to Know and Tell.
Thanks for the info. Now I’ll go back to Square One.