Square Payment Form

What It Does

Square Payment Form provides a secure, PCI-compliant, customizable payment experience for accepting debit, credit, or digital wallet payment cards as the first part of a web payment solution.

Mobile Web
Client Side
Diagram sqpaymentform labeled@2x

Square Payment Form is a client-side, Javascript library (SqPaymentForm) that renders the card inputs and digital wallet buttons that make up the payment form and returns a secure payment token. Use the secure payment token (nonce) with a server component built on the Connect v2 Transaction API to charge payment sources and provide a complete web payment solution.

Square Payment Form components

To take payments online, websites collect payment information through the client browser then use a server component to create a charge against the payment card.

Developers can define the layout of form components and customize the HTML and CSS classes responsible for rendering Square Payment Form components so the payment form fits seamlessly with existing site branding. The 2 customizable component groups are:

  • Card information input fields
  • Digital wallet buttons

Learn more about the Requirements and limitations of the SqPaymentForm library to see if a payment form integration is the right fit for your eCommerce solution.

Customize available payment types

The payment form can be configured to accept only payment cards, only digital wallet payments, or payment cards and digital wallet payments.

Diagram sqpaymentform basic
Payment form with no digital wallet

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

Customize payment form styles

The SqPaymentForm library replaces application placeholder tags with payment form fields where those tags appear in a page.

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

See the Payment Form setup guide for more information, including HTML, Javascript, and CSS templates.

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