Does anyone have a clue? Please help
Hi @phet-maly,
That’s a great question. Square does require the postcode field to process payments in Canada, the US, and the UK. Removing the field would prevent customers from being able to process payments.
https://developer.squareup.com/docs/payment-form/cookbook/sqpaymentform-customization#remove-the-postal-code-requirement
You’ll want to leave the postcode even if it’s not a need for the specific business in order to process the payments.
Let me know if you have any questions.
So, I imagine it’s a CSS issue…?
Hi @phet-maly.
2) Do I just need to adjust the CSS to show the field properly?
It’s a bit unclear to me what the issue is with the field. Perhaps it’s hidden under the selection. Can you clarify please?
Hi,
If you look at my screenshot closely, we can see that the asterisk * (that marks a required field) is visible, but it’s overlapping the text:
https://www.awesomescreenshot.com/image/6102116?key=caea948169132d6574ebb6b884bb64bb
After inspecting the code, we can see that the <label> and <iframe> is generated in the code. But we can not visually see the postal code field in the layout design:
https://www.awesomescreenshot.com/image/6102142?key=db5ef917df975641f41bf0e0caa9b685
Thus, my question #2.
Thanks,
Phet
Hi @phet-maly. None of the images that you shared load for me. Each link gives a 404 error. Please try again to demonstrate the issue if it persists. It would be helpful to see the issue on your site as well so please share the link.
Sorry about that! I’ve done some “spring cleaning” and deleted those screeshot…
Here is a video capture of what I’m refering to: https://www.awesomescreenshot.com/video/2760484?key=45da91efb8191218d80201ba350f96e3
Hope this better explain what I’m trying to say…
Thanks for your time!
Phet
Ah I see. It looks like you’ve hidden the field but not the required indicator. You can use CSS to hide it or modify your existing customization.
As my colleague previously advised, you may have issues processing payments without the postal code, so you’ll want to monitor for any issues.
The problem seems to come from the theme (Enfold).
The postal code <div> has the class named “hidden” and the theme has css attached to this class.
I’ve added this to the my custom CSS to override it.
.form-row.form-row-wide.wc-square-credit-card-card-postal-code-parent.hidden,
.form-row.form-row-wide.wc-square-credit-card-card-postal-code-parent.wc-square-credit-card-hosted-field-parent.hidden {
position: initial;
visibility: initial;
}
That solved my problem.
Thanks,
Phet
