Store a Card on File

Applies to: Web Payments SDK | Cards API | Customers API

Learn how to store a card on file with the Web Payments SDK.

Link to section

Overview

With Web Payments SDK integration, your application can store a card on file in the following two payment flows for a card on file:

  • (Beta) A new default payment flow that involves:
    1. Generating a payment token. During payment tokenization, Square checks the tokenize request to determine whether buyer verification is needed based on the buyer's information.
    2. Including the payment token in a Cards API call to store a card on file with CreateCard.
  • The existing payment flow that involves:
    1. Generating a payment token.
    2. Generating a verification token after verifying the buyer.
    3. Including both the payment token and verification token in a Cards API call to store a card on file with CreateCard.

Important

The new payment flow will replace the existing Web Payments SDK card payment acceptance implementation and become the new default card payment flow when Square releases it for General Availability.

When Square releases the new payment flow for General Availability, Square will deprecate the Payments.verifyBuyer() method that performs buyer verification and generates a verification token. Square will provide a migration guide so that you can update your application to take card payments with the new payment flow.

Square recommends updating your application to use the new default payment flow with the Web Payments SDK. However, during Beta, Square will continue to support both payment flows.

Link to section

Card-on-file payment flows

Choose one of the following card-on-file payment flows to set up your application to store a card on file with Web Payments SDK integration.

Link to section

Set up the new payment flow

Before updating your application with the STORE intent, make sure to update your application to support the new payment flow by following the instructions in Take a Card Payment with the Web Payments SDK.

  1. In your application, replace the createPayment method with a new method called storeCard, pass the token and customerId objects as arguments, and add the following values from the code example:

  2. Modify the tokenize method with the following updates to verificationDetails. Make sure to set intent to STORE. The customerInitiated: true and sellerKeyedIn: false properties are not required.

  3. Replace the handlePaymentMethodSubmission method with a new method called handleStoreCardSubmission, pass the event, card and customerId arguments to the method, and modify the following try statement declaration from the code example:

  4. In the cardButton.addEventListener event listener, declare a new customerId object and call the handleStoreCardSubmission method as indicated in the following code example:

    const cardButton = document.getElementById('card-button'); cardButton.addEventListener('click', async function (event) { const textInput = document.getElementById('customer-input'); if (!textInput.reportValidity()) { return; } const customerId = textInput.value; handleStoreCardSubmission(event, card, customerId); });