Square Payment Form

What It Does

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

Mobile Web
Web
Payment Form

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 Payments API to charge payment sources and provide a complete web payment solution.

Requirements and limitations
Permalink Get a link to this section

  • Nonces created with digital wallets cannot be used to store a customer card on file.

  • Shipping address validation is only available for digital wallets that support address selection in their UI (e.g., Apple Pay on the Web).

  • Apple Pay digital wallet support is only available for US Square accounts

  • Square Payment Form auto-populates fields (except CVV field) if the buyer has enabled autofill in the browser settings and stored credit card details in the browser. Most browsers do not permit auto-population of the CVV field for security reasons.

Product components
Permalink Get a link to this section

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 technical requirements of the SqPaymentForm library to see if a payment form integration is the right fit for your eCommerce solution.

Customize available payment types
Permalink Get a link to this section

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

Note

The payment form cannot accept payment cards and Square gift cards together. To add both payment types to a payment page, 2 instances of SqPaymentForm must be created. Add 1 instance for payment cards and 1 instance for Square gift cards.


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
Permalink Get a link to this section

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 integration guide for more information.

Get started

Use the Walkthrough guide to integrate Square Payments In a Website