Card Payments

The Square card element makes it easy to accept payments and collect card data on your site. With minimal lines of code you can generate a secure card form that once submitted, generates a one-time-use token that can be used to create a Payment with the CreatePayment API.

Usage

index.html
HTML

<!-- Provide a target element for the Card form -->

<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>

Payments

Returned by Square.payments(appId, locationId).

Use this object to instantiate Payment methods. Learn more on the Payments page.

Methods

JS
JavaScript

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

Card

The credit or debit card payment method

An object that has the methods to create and set up a single card payment. Created by payments.card().

Methods

JS
JavaScript

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

const card = await payments.card();

await card.attach('#card');

const form = document.querySelector('#card-payment');

form.addEventListener('submit', async (event) => {

   event.preventDefault();

   const result = await card.tokenize(); // the card nonce

});