I’m currently integrating Square Payments into a React.js application. I’m using the standard card() or Split Fields elements provided by Square. While the functionality works, I’ve noticed that the UI of the card input fields is limited in customization.
Our design team has created a Figma design for the payment form that we want to implement, with specific layouts, spacing, and styling for card number, expiry, and CVV fields. However, with the current Square UI, it’s not possible to fully match our design.
Could you please advise:
-
Is there a way to fully customize the card input fields to match a Figma design in React?
-
If not, are there best practices or workarounds for achieving a fully custom-styled card form while remaining PCI compliant using Square Payments?
We want to ensure user experience and design consistency while maintaining secure payment processing.
Thank you for your guidance and support!
Best regards,
Arshad Khan
Software Engineer
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
eCommerce API Guide: Build Custom Integrations | Square
Payments Pricing with Square APIs and SDKs
Develop for Japan
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.
Thank you for your response!
Just to clarify, I am integrating Square Payments in a React.js web application. This is not a mobile app integration, we are building for web only.
The issue is regarding customizing the card input fields UI in the web React app to match our Figma design. Could you please advise any web-specific best practices or options for creating a fully custom-styled card form while remaining PCI compliant?
Looking forward to your guidance.
The Square Web Payments SDK provides some level of customization for card input fields, but it does not allow for full customization to match a specific Figma design. The SDK is designed to ensure PCI compliance, which means certain elements and behaviors are controlled to maintain security standards. You can customize aspects like colors and fonts, but the layout and structure are be limited. Also there isn’t currently a way to break out every form field at this time. 
