Charge and Store a Card on File with SCA

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

Learn how to add code to your application to charge and store a card on file with Strong Customer Authentication (SCA).

Overview

The key benefit of using the CHARGE_AND_STORE intent is to both charge and store a card on file in a single request call, which triggers SCA buyer authentication if needed. You can use the CHARGE_AND_STORE intent if the buyer wants to store the card on file when the seller charges the card for the payment.

With Web Payments SDK integration, your application can charge and 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 Payments API request call to process a payment.
3. Creating a card on file and storing it with a new customer profile and a card object. When you call CreateCard, the source_id is the payment_id from the Payment API payment response object.
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 Payments API request call to process a payment.
4. Creating a card on file and storing it with a new customer profile and a card object. When you call CreateCard, the source_id is the payment_id from the Payment API payment response object.

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 charge and 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 CHARGE_AND_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.

In your application, modify the token and payment objects prior to calling Card.tokenize() and CreatePayment, respectively.
Along with the Card payment method object, the tokenize() method passes the following additional properties:
- billingContact - The buyer's contact information for billing.
- intent - The transactional intent of the payment.
- sellerKeyedIn - Whether the seller keyed in payment details.
- customerInitiated - Whether the customer initiated the payment.
- total - The total amount of the card payment.
Important
Provide as much buyer information as possible for billingContact so that you get more accurate decline rate performance from 3DS authentication.
The Payment object passes the token object that contains the aforementioned values.
```
 const token = await tokenize(
   card,
   billingContact,
   intent: CHARGE_AND_STORE
 );

 const payment = createPayment(token);
```

Declare a ccof object to call CreateCard, which takes the payment_id from the Payment object as the parameter.

 const token = await tokenize(
   card,
   billingContact,
   intent: CHARGE_AND_STORE
 );

 const payment = createPayment(token);

 const ccof = createCard(payment_id);

Link to section

Docs

Charge and Store a Card on File with SCA

On this page

Overview

Important

Card-on-file payment flows

Set up the new payment flow

Important

See also

On this page