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

payments.js
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().

Note: The Card payment method automatically infers whether to display the postal code field and prompt based on the issuing country of the buyer payment card.

Methods

card.js
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

});