Web Payments SDK

The Web Payments SDK lets you easily create PCI-compliant inputs to accept payments online with the Square Payments API. It supports the following payment methods: credit and debit cards, ACH bank transfers, Apple Pay, Google Pay, and Gift Cards.

Quick Setup

index.html
HTML

<head>

  <!-- 1: References the Square payment library to initalize the SDK -->

  <script src="https://sandbox.web.squarecdn.com/v1/square.js"></script>

</head>

<body>

  <form id="payment-form">

    <div id="card-container"></div>

    <button id="card-button" type="button">Pay</button>

  </form>

  <!-- Configure the Web Payments SDK and Card payment method -->

  <script type="text/javascript">

    async function main() {

      const payments = Square.payments(APPLICATION_ID, LOCATION_ID);

      const card = await payments.card();

      await card.attach('#card-container');



      async function eventHandler(event) {

        event.preventDefault();



        try {

          const result = await card.tokenize();

          if (result.status === 'OK') {

            console.log(`Payment token is ${result.token}`);

          }

        } catch (e) {

          console.error(e);

        }

      };



      const cardButton = document.getElementById('card-button');

      cardButton.addEventListener('click', eventHandler);

    }



    main();

  </script>

</body>

Payments

Returned by Square.payments(appId, locationId).

Use this object to instantiate Payment methods.

Methods

JS
JavaScript

const payments = Square.payments(appId, locationId);