Square Payment Form

What It Does

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.

Mobile Web
Client Side

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.

Diagram sqpaymentform basic
Payment form with no digital wallet

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.

Diagram sqpaymentform digital wallet only
Payment form with no payment card fields

Customize the payment form

The appearance of the payment form is set by the developer who integrates it into a web page. HTML, stylesheet, and JavaScript code describe the layout and style of the form. The Setup Guide provides templates as a starting point for customization. The 2 payment form component groups are:

  • 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 views.

Diagram sqpaymentform custom
Payment card input fields in a custom order summary form

What's needed

This customization needed only a few changes to .CSS style values such as:

  • font-family and font-weight
  • height
  • background color
  • border-radius and outline
  • padding and margins
  • border
  • transition

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.

The 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.

Contact Developer Support, join our Slack channel, or ask for help on Stack Overflow