Take Online Payments with Square APIs and SDKs

Use Square payment APIs with custom solutions to accept payments online in the United States, Canada, Australia, the United Kingdom, and Japan. Connect, Square’s API suite, and the SqPaymentForm javascript library provide secure payment solutions for online.

Build a custom payment experience

Square payment form + Transactions API: Add our PCI-compliant payment form to your own checkout page and customize the layout and appearance of the form by using stylesheet classes and HTML. You can add a digital wallet that includes Apple Pay, Masterpass, and Google Pay buttons.

The payment form encodes the buyer's payment card information in a secure token that you send to your own server-side resource for payment processing. The payment is processed by the Transaction API charge endpoint. The secure token from the payment form is added to the charge request so that the Square payments processing server charges the correct payment card.

Diagram sqpaymentform basic
The Square payment form

To start taking payments, get a Square access token and then add a few blocks of code to your checkout page and a backend module that makes a call on the Square Transaction API.

See the Payment Form Setup Guide to learn about building a custom online payment solution.

Web client code

The 5 blocks include JavaScript, CSS, and HTML logic:

  1. Link to the SqPaymentForm library
<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>
  1. Set a basic input style
.sq-input {
    border: 1px solid .black;
    display: inline-block;
}
  1. Add this HTML form to your page
    <form id="nonce-form" novalidate action="PATH/TO/PAYMENT/PROCESSING/PAGE" method="post">
      <fieldset>
        <span class="label">Card Number</span>
        <div id="sq-card-number"></div>

        <div class="third">
          <span class="label">Expiration</span>
          <div id="sq-expiration-date"></div>
        </div>

        <div class="third">
          <span class="label">CVV</span>
          <div id="sq-cvv"></div>
        </div>

        <div class="third">
          <span class="label">Postal</span>
          <div id="sq-postal-code"></div>
        </div>
      </fieldset>

      <button id="sq-creditcard" class="button-credit-card" onclick="requestCardNonce(event)">Pay $6.00</button>

      <div id="error"></div>

      <!--
        After a nonce is generated it will be assigned to this hidden input field.
      -->
      <input type="hidden" id="card-nonce" name="nonce">
    </form>
  1. Add this JavaScript to your web page
var paymentForm = new SqPaymentForm({
 applicationId: applicationId,
 inputClass: 'sq-input',
 cardNumber: {
   elementId: 'sq-card-number',
   placeholder: '•••• •••• •••• ••••'
 },
 cvv: {
   elementId: 'sq-cvv',
   placeholder: 'CVV'
 },
 expirationDate: {
   elementId: 'sq-expiration-date',
   placeholder: 'MM/YY'
 },
 postalCode: {
   elementId: 'sq-postal-code'
 },
 callbacks: {
   cardNonceResponseReceived: function (errors, nonce, cardData) {
     $('card-nonce').value = nonce;
     $('nonce-form').submit();
   }
  }
});
function requestCardNonce(event) {
 event.preventDefault();
 paymentForm.requestCardNonce();
}

  1. Render the payment form
paymentForm.build()

Payment form code templates

Our Payment form setup guide gives you code templates that start you off with a production quality payment form, which means you don't need to design it from scratch.

Transactions API code

Write a few lines of code in your backend payment processing page to make Square PHP Connect v2 SDK calls and process the payment.

  1. Get the Transaction API client with your access token.
PHP
\SquareConnect\Configuration::getDefaultConfiguration()->setAccessToken($access_token);
$transactions_api = new \SquareConnect\Api\TransactionsApi();
  1. Create a payment request with details of the order and the payment nonce.
PHP
$request_body = array (
  "card_nonce" => $nonce,
  "amount_money" => array (
    "amount" => 600,
    "currency" => "USD"
  ),
  "idempotency_key" => uniqid()
);
  1. Get paid
PHP
$result = $transactions_api->charge($location_id, $request_body);

Use a Square pre-built solution

Take payments with the Checkout API: We host the pre-built payment flow in our servers securely and handle any required certificates. We provide the checkout and payment confirmation pages but you have the option to create your own payment confirmation page in place of ours.

Just create an order item with our Checkout API , and post it to our servers in a Checkout API request that returns a unique checkout URL.

Use the checkout URL to navigate to the checkout page. We present the buyer with our checkout flow pre-populated with your order details and then handle the payment for you.

Checkout screen 01

After the buyer clicks the Place Order button, Square directs them to an order confirmation page.

Checkout screen 02

See the Checkout API Setup guide to learn about integrating with a pre-build payment solution.

Get Checkout API client

Use an access token from your Square application dashboard to get the Checkout API client.

PHP
//Get API client
$ApiConfig = new \SquareConnect\Configuration();
$ApiConfig->setAccessToken(MY_ACCESS_TOKEN);
$ApiClient = new \SquareConnect\ApiClient($ApiConfig);
$checkoutAPI = new SquareConnect\Api\CheckoutApi($ApiClient);

Create an order

PHP
//Set the item price
$price = new \SquareConnect\Model\Money;
$price->setAmount(600);
$price->setCurrency('USD');

//Create an item
$book = new \SquareConnect\Model\CreateOrderRequestLineItem();
$book->setName('The Shining');
$book->setQuantity('2');
$book->setBasePriceMoney($price);

//Add the item to the order
$lineItems = array();
array_push($lineItems, $book);

//Create the order
$order = new \SquareConnect\Model\CreateOrderRequest();
$order->setIdempotencyKey(uniqid());
$order->setLineItems($lineItems);

Create a checkout request

PHP
$checkout = new \SquareConnect\Model\CreateCheckoutRequest();
$checkout->setIdempotencyKey(uniqid());
$checkout->setOrder($order);

Check out

PHP
$result = $checkoutClient->createCheckout($locationId,$checkout);
$checkoutId = $result->getCheckout()->getId();

Start the checkout flow and get paid

PHP
window.location.href  = $result->getCheckout()->getCheckoutPageUrl();

Get started building a payment solution

Build a custom online payment solution

Take payments securely on your website with full control of the checkout process using the Transactions API and Square payment form.

Integrate with a pre-built payment solution

Take payments securely on your website with Square's prebuilt eCommerce solution using the Checkout API.

Add a payments plug-in

Choose an online payments plug-in from the Square App Marketplace: If you do not want to write a lot of code, take payments with a plug-in solution built for the eCommerce application you use.

Go to the Square App Marketplace to find our list of partners and leverage proven online payments plug-in solutions from partners like WooCommerce, Wix, BigCommerce, and many others.

Contact Developer Support, join our Slack channel, or ask for help on Stack Overflow