Design your custom payment form with SqPaymentForm
Heads up, we’ve moved! If you’d like to continue keeping up with the latest technical content from Square please visit us at our new home https://developer.squareup.com/blog
Do you currently use the
SqPaymentForm, but you want it to look sleek and professional? Now is your chance to figure out how to make it look like anything you want! Let’s get started.
An aside: I assume that you have at least looked over the
SqPaymentForm Overview page on Square’s doc site: https://docs.connect.squareup.com/payments/sqpaymentform/sqpaymentform-overview. If not, please do so now, because this article will refer to items from the doc site.
Each individual input field in the
SqPaymentForm will be an iFrame that is embedded from Square. This is done to protect sensitive credit card information from malicious actors, and ensures that you don’t have to worry about PCI compliance, because Square handles it all for you.
To customize the
SqPaymentForm, we need to think about the areas inside the individual iFrames and also outside the iFrames, as these are handled separately.
The exterior focuses on the actual text input fields (such as border, margins, and element width), while the interior focuses on the inner-text (such as font size, font color, placeholder, and background color). Here’s a quick visual aid to showcase what I mean:
Let’s see how we can edit the exterior designs first.
Exterior designs are defined in your own CSS file(in our Setup Guide, we suggest a file named
sqpaymentform.css). When creating the
SqPaymentForm you will need to specify the
inputClass, which is the name of the class given to the text input fields that are used in the form. This could literally be named anything. You just need to make sure it matches in the
sqpaymentform.css file. For example:
We’re going to add the following styles:
- Blue borders & slightly curved around the inputs
- Box-shadow due to curved borders (instead of outline)
- Increasing size and weight of the labels ( Note:
.labelis the class name I gave to the text labels for each
input(ie “Card Number:”)
- Background color and font color of the button
- Different colored borders for focus and error validation
After adding these changes, we end up with the following:
One thing to point out that can be seen above is the use of
sq-input--focus (this should match whatever your
inputClass is set to. Ex:
your-cool-input-class-name--focus). These can be used to change the appearance of your input boxes when you select them, or when there’s been some validation error returned by the
SqPaymentForm. They’re great, and you should use them!
Over in the
sqpaymentform.js file we need to make sure to reference it, which is easy enough; just use the same name for the
inputClass as mentioned earlier:
Let’s jump to interior designs. The
SqPaymentForm only supports certain properties for the interior, and must be supplied via the
inputStyles array in your
sqpaymentform.js file. For the full list of properties, take a look a look at this page: https://docs.connect.squareup.com/payments/sqpaymentform/sqpaymentform-overview#inputstyle-objects
Now, say we want to make the fields have the following styles:
- 18px text
- Dark-grey text
- 15px padding
- Light-grey placeholder text.
It’s fairly straight forward to accomplish this. After adding the changes, we end up with this:
If we combined both the interior and exterior designs that we’ve quickly gone through, we’ll get something that looks like this:
That wraps it up! With this knowledge you should be able to build your very own
SqPaymentForm to your liking.