Take Payments

Online Payment Options

Learn about the website payment processing options in the Square developer platform.

Overview Permalink Get a link to this section

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.

For online payment pricing, see Pricing for handling online and in app-payments

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

Using the Square 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.

  2. 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:

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

      • Taking application fees for multi-party transactions. You can create an application that integrates with Square for processing payments. Square sellers can sign up to use the application for a fee. When they do, you collect a fee from each payment that Square processes through the application. For more information about using the Payments API to take application fees, see Take Payments and Collect Fees.

    • Ability to save a card on file. Using the payment token you receive from the 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 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 check out, send a checkout request to Square from your server. In the request, include order information and other optional data that you can 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 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

If you need more assistance, contact Developer Support or ask for help in the Developer Forums.