Design your custom payment form with SqPaymentForm

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.

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:

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--error and 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:

Now, say we want to make the fields have the following styles:

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.

Related posts:

With FOUR mega fights on the table, UFC Heavyweight Champion Daniel Cormier has a bevy of anxious alternatives. Who will be the chosen one?

The Edhi Foundation is a non-profit social welfare program in Pakistan, established by Abdul Sattar Edhi in 1951. Edhi until his demise on 8 July 2016 was the leader of the Edhi Foundation and his…

I wrote a book. To call it a passion project would be an egregious understatement. It’s unlike anything I’ve ever made, and I’m extremely proud of it. If you follow me on Medium, you’ve probably…