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

Initialize the Square payments object

Initialize the Square Payments object with your application ID and the ID of the seller location where the payment is taken.
```
  const payments = Square.payments(APPLICATION_ID, LOCATION_ID);
```
Get a new Card object
```
  const card = await payments.card();
```
This creates a new Card instance with all of the behaviors and properties needed to take a card payment.
Attach the Card instance to a DOM element

Attach the Card instance to an empty DOM element on your page. The payment card form renders into the empty element, turning it into a secure payment card form.
```
  await card.attach('#card');
```
Get the payment token

Get the payment form token from the Card instance when the buyer completes the form by calling the tokenize method.
```
  const tokenResult = await card.tokenize();
if (tokenResult.status === 'OK') {
  const token = tokenResult.token;
} else {
  console.error(tokenResult.errors);
}
```
If the payment card information is valid, it returns a one-time-use token which you can use to create a Payment using the Payments API CreatePayment endpoint to charge a customer. Otherwise, it will return an error that you can present to the customer.

Code playground

#
Payments

Returned by Square.payments(appId, locationId).

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

Methods


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


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

});

Card Payments

Usage

Initialize the Square payments object

Get a new Card object

Attach the Card instance to a DOM element

Get the payment token

Code playground

# Payments

Methods

# Card

Methods

#
Payments

#
Card