Customize Payment Form Appearance
Deprecated
This component is deprecated. See below for guidance about what to use instead.
Note
The Square payment form is deprecated and replaced by the Web Payments SDK.
You should use the Web Payments SDK to take payments on a web client. The Web Payments SDK uses modern web styling as shown in the following image:
The SqPaymentForm
library offers two ways to configure a payment form in your website:
Multi-element payment form. You build the payment form with multiple DOM elements and map each element to a
SqPaymentForm
configuration field (cardNumber
,cvv
,expirationDate
, andpostalCode
).Single-element payment form. You build the payment form with one DOM element and map it to the
card
configuration field provided by theSqPaymentForm
library.
Overview
The following example shows the two ways you can configure a payment form:
For an example, see Walkthrough: Integrate Square Payments in a Website. The topics explain what the library does for the look and feel of the payment form and how you might customize it to conform to your page styles.
Customize the appearance of the multi-element payment form
The SqPaymentForm
library renders HTML input elements inside iframes. When you want to customize the appearance of these inputs, note the following caveat:
An iframe is an element in your HTML page and therefore you can customize the iframe styles (for example, customize the height of the iframe and the border drawn around the iframe).
However, the area where buyers enter information (such as a card number or expiration date) is Square's HTML within the iframe that your CSS cannot customize. Instead, you direct the
SqPaymentForm
library to customize this portion.
For example, if you inspect any of the payment form elements in your browser, you see the HTML page containing <iframe> elements in the <body>. Each <iframe> element has an <html> child (Square's HTML) that contains the <input> element. The following is an example HTML fragment:
Therefore, to customize the appearance of the multi-element payment form, the SqPaymentForm
library provides the following two configuration fields:
inputClass
. Identifies the CSS class name. You declare the class somewhere in your project and reference the containing .css file in the HTML head section. The library uses the specified CSS class to customize styles of the iframe element.inputStyles
. An array of InputStyle objects that provide styles that the library uses to customize the<input>
rendered inside the iframe. The library supports a set of styles to choose for this customization.
You specify these configuration fields when you initialize the SqPaymentForm
object.
Multi-element payment form example
To explore customization of the multi-element payment form appearance, do the following:
Complete the
SqPaymentForm
walkthrough to create a multi-element payment form. For more information, see Walkthrough: Integrate Square Payments in a Website. Do not follow the additional steps provided at the end of the walkthrough to build a single-element payment.Review the following code components:
Layout of the iframe elements. You see the following layout of the
SqPaymentForm
iframe elements:This layout is defined by the following <div> block in index.html. Three of the iframe elements (
sq-expiration-date
,CVV
, andsq-postal-code
) specify a class (third
). The styles defined in the class cause the elements to appear on the same line.If you inspect these payment form elements in your browser, you see the corresponding iframe elements with the
class
attribute showing thethird
class.Customize iframe styles. In index.html, the
SqPaymentForm
initialization specifies theinputClass
configuration field that sets the CSS class to use for the iframe styles.The
sq-input
class is defined in the mysqpaymentform.css file as follows:You can explore customization by changing these CSS styles and review the resulting payment form.
Customize the input styles within the iframe. The
SqPaymentForm
initialization specifies theinputStyles
configuration field to define custom styles for the <input> element in the iframe.The style applies to all four
SqPaymentForm
input fields in the iframes. TheinputStyles
defines the internal styles applied to the rendered iframes. For a list of input style properties thatSqPaymentForm
supports, see InputStyle.
Customize the appearance of the single-element payment form
To build the single-element payment form, you use the card
configuration field of SqPaymentForm
. The look and feel you get is defined by the default CSS configuration the library provides with the card
element. You can optionally customize the appearance using card.inputStyle
(of the InputStyle type) as described in this section.
The following example shows a single-element payment form with custom styles and highlights the components you can customize:
As the example shows, you can customize:
The payment form background color, shape, and other attributes.
The font and color of the placeholder text.
The font and color of text as users enter information.
The font and color of user data input errors for the following:
Incorrect user data text
Helper text message
Single-element payment form example
If you want to test the custom styling of the single-element payment form using the card.inputStyle
, do the following:
Complete the
SqPaymentForm
example walkthrough. For more information, see Walkthrough: Integrate Square Payments in a Website. The resulting payment form you see uses the default CSS styling that thecard
configuration element provides. You can now apply custom styles.Set the background color of the page.
Open mysqpaymentform.css.
Set the background color of the page.
Add custom styles so the payment form appears as shown in the preceding example. Open index.html and add the
card.inputStyle
configuration field as shown:
Test the application and you see the payment form with the custom styles you specified.
If you need more assistance, contact Developer Support or ask for help in the Developer Forums.