Square Payment Form
Square's payment form provides a secure, PCI-compliant, customized payment experience for accepting debit, credit, or digital wallet payment cards as the first part of a web payment solution.
Payment form components
To take a payment on the web, you need to collect payment card information in a client browser and then use a backend component to create a charge against the payment card. These Square platform components provide a complete web payment solution:
- Client side - SqPaymentForm library: Capture a buyer's payment card as a secure token.
- Server side - Transaction API: Use the secure token in the Transaction API charge request to create a charge.
The SqPaymentForm library renders the secure inputs that make up the payment form. See Payment Form: How it works to learn about the library.
Learn about the Requirements and limitations of the
SqPaymentForm library to see if a payment form integration is the right fit for your eCommerce solution.
Integrate the payment form
Payment form integration requires a few simple steps. If you want to add a digital wallet, follow the steps in the Digital Wallets setup guide.
Square's Payment processing example: PHP sample shows how to generate a nonce with payment form and then use the nonce in an online payment with Transactions API.
Customize the payment form
- Card information input fields
- Digital wallet buttons
Using just HTML and CSS classes, create a payment form UI that fits seamlessly into your web app. For example, this
payment form use the
SqPaymentForm library and a few small CSS and HTML customizations to create unique
This customization needed only a few changes to .CSS style values such as:
- font-family and font-weight
- background color
- border-radius and outline
- padding and margins
The customized payment form was layed out in host HTML by adding placeholder
<div> tags in the body of the page as
fields in a field-set.
SqPaymentForm library replaces application placeholder tags with payment form fields whereever those tags appear
in a page. This means that an application can define the layout of form components in addition to their styles.