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 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 and digital wallet buttons 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.
Customizable payment types
The payment form can be configured to accept only payment cards, only digital wallet payments, or payment cards and digital wallet payments.
Payment cards accepted
The following payment form is configured to show only the payment card text entry fields and a button to request a nonce.
Digital wallet accepted
This payment form shows only two digital wallet buttons. A nonce is requested when a user clicks one of the buttons and completes a payment authorization.
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.