Take Payments

Online Payment Options

There are two ways you can integrate Square into your website for processing payments:

  • Use Square payments in your own website. This is the recommended solution. When integrating payments into your own website, this option offers flexibility in designing a payment UI, processing orders, and completing payments. This option provides a secure, PCI-compliant, customizable payment experience for accepting debit, credit, Square gift cards, or digital wallet payment cards.

  • Redirect a buyer to a Square-hosted checkout page. If you do not want to build a checkout page, you can have Square handle the checkout. This approach offers less flexibility and we suggest you use this only when integrating Square-provided web payments Javascript library into your website will not work for you.

The following sections provide an overview of these website payment processing options. We also provide example walkthroughs for you to try. For pricing information, see Payments Pricing with Square APIs and SDKs.

Square payments in your own website
Permalink Get a link to this section

Using the Square-provided client-side Javascript library (SqPaymentForm)and the server-side Payments API, you can take payments with Square on your website. This is a 2-step process:

  1. Generate a single use, secure token (nonce). Using the SqPaymentForm library, you develop a payment form in your webpage. The library renders the card input fields (such as card number, expiry date, and cvv values) and digital wallet buttons (Apple Pay, Google Pay, and MasterPass).

    integrate-paymentform-10

After your buyer provides payment information, the library generates a secure, single-use token called a "nonce".

  1. Charge the payment source. You use the Payments API to charge the nonce.

This approach provides greater flexibility.

  • Ability to customize payment form UI. The library allows you to control the look and feel of the payment form. For example, you can customize fonts, colors, add custom branding to the payment fields, integrating it cleanly into the rest of your checkout page.

  • Flexibility in processing orders and payments. After taking payment information, you use the Payments API to charge a payment source (credit card, gift card, and digital wallets). The Payments API offer additional flexibility, such as:

    • Flexible payment source options. You can charge a nonce (that SqPaymentForm generates using buyer provided card information), card on file, or a gift card on file.

    • Use delayed payment option, also known as "delayed capture". Using the Payments API, you have the option to only obtain payment authorization and complete the payment later. Also referred to as "delayed capture".

    • Take partial payments with gift cards. If buyer provides a gift card as payment source and the gift card does not have sufficient funds, you have an option to take partial amount and ask buyer for more payment options.

  • Ability to save a card on file. Using the nonce you receive from the SqPaymentForm, you can save a card on file. You can then charge the card on file for future purchases. For an example walkthrough, see Walkthrough: Integrate Square Payments In a Website.

Square-hosted checkout page
Permalink Get a link to this section

The Square Checkout API provides a pre-built UI solution for verifying purchase details and taking payments. When you build a solution using the Checkout API, a buyer places an order in your website. When the buyer is ready to checkout, you send a checkout request to Square from your server. In the request, you include order information and other optional data that you might choose to prepopulate on the checkout page.

Upon receiving the request, Square prebuilds the checkout page, and returns to your server a link to that page. This pre-built checkout page is hosted on Square servers. After the buyer provides valid payment information on the checkout page, Square processes the payment.

The Checkout API payment processing solution works but is not flexible. For example, you still need a server, you cannot customize the UI (fonts, color and Square branding cannot be changed), and you also follow a strict pattern: buyer places an order and the Checkout API allows the buyer to pay for it.

Next steps

Start building a custom online payment solution with Square.