Take Payments

Online Payment Options

The following sections provide an overview of website payment processing options in the Square developer platform.

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, digital wallet payment cards, or bank transfers.

  • 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 should only be used when integrating Square-provided web payments JavaScript library into your website does not work for you.

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

Using the Square-provided Web Payments SDK 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. Using the Web Payments SDK, develop a payment form in your web page. The SDK provides payment methods that render payment methods.

After a buyer provides payment information, the SDK generates a secure single-use payment token.
  1. Charge the payment token. Use the Payments API to take the payment. In the request, specify the token as the payment source. This approach provides greater flexibility:

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

    • Flexibility in processing orders and payments. After taking payment information, use the Payments API to charge a payment source. The Payments API offer additional flexibility, such as:

      • Flexible payment source options. You can charge a payment token generated on a web client by the Web Payments SDK, a card on file, or a Gift Card on file.

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

      • Taking 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 payment token you receive from Web Payments SDK, save a card on file and then charge the card on file for future purchases. For an example of a Web Payments SDK integration, see Take a Card Payment with Web Payments SDK.

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 on your website. When the buyer is ready to checkout, send a checkout request to Square from your server. In the request, include order information and other optional data that you can pre-populate on the checkout page.

After receiving the request, Square pre-builds the checkout page and returns a link to that page to your server. 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 does not have the flexibility of the Web Payments SDK. For example, you cannot customize the UI (fonts, colors, and Square branding cannot be changed) and you must follow a strict pattern: a buyer places an order and the Checkout API redirect the buyer to a Checkout API page so the buyer can review their order and pay for it.

Next steps Permalink Get a link to this section