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

Code playground

index.html

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

});