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 cards, credit cards, 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 two-step process:

  1. Generate a single-use, secure token (nonce). Using the SqPaymentForm library, you develop a payment form in your web page. The library provides configuration fields that can render the card input fields (such as the 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 nonce. You use the Payments API to take the payment. In the request, you specify the nonce as the payment source.

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 and colors, add custom branding to the payment fields, and integrate 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 cards, gift cards, 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), a card on file, or a gift card on file.

    • Use the 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.

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

  • Ability to save a card on file. Using the nonce you receive from 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 prebuilt UI solution for verifying purchase details and taking payments. When you build a solution using the Checkout API, a buyer places an order on 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.

After receiving the request, Square prebuilds the checkout page and returns a link to that page to your server. This prebuilt 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, colors, and Square branding cannot be changed), and you follow a strict pattern: a 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.