Charge and Store a Card on File

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

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

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.

You can add code to the application you created (with a card payment) from the quickstart project sample, as documented in Web Payments SDK Quickstart. If you haven't created an application using the quickstart, you need to do so before completing the following steps.

In the payment form, call the card.tokenize() method to generate the payment token.

const form = document.querySelector('#card-payment');
   form.addEventListener('submit', async (event) => {
   event.preventDefault();
   const result = await card.tokenize(); // the card nonce
   if (result.status == "OK") {
     alert(`Card: ${result.details.card.brand} -
       ${result.details.card.type} ${result.details.card.last4} charged successfully.`);
   }
   if (result.status == "INVALID") {
     result.errors.forEach(error => {
       console.log(`ValidationError: ${result.errors[0].field}: ${result.errors[0].message}`);
     })
   }
});

Include the CHARGE_AND_STORE intent in the verifyBuyer() call. You can reuse the generated verification token for charging and storing the card, which you'll complete in the following steps.

const verificationDetails = {
    amount: '10',
    currencyCode: 'GBP',
    intent: 'CHARGE_AND_STORE', //this is the charge and store intent
    billingContact: {
      addressLines: ['123 Main Street', 'Apartment 1'],
      familyName: 'Doe',
      givenName: 'John',
      email: '[email protected]',
      country: 'GB',
      phone: '3214563987',
      region: 'LND',
      city: 'London',
    },
  };

  const verificationResults = await payments.verifyBuyer(
    token,
    verificationDetails
  );

This payment request charges a card with the payment token and verification token.

Use the CreateCustomer endpoint of the Customers API to create a new customer profile.

This request generates a customer_id in the response, which you need to charge and store a buyer's card on file with a single SCA buyer authentication.

The following is the response object body:

{
  "customer": {
    "id": "{CUSTOMER_ID}",
    "created_at": "2024-07-17T18:27:07.803Z",
    "updated_at": "2024-07-17T18:27:07Z",
    "given_name": "John",
    "family_name": "Doe",
    "email_address": "[email protected]"
  }
}

This request creates a new card on file to be stored, which passes the same verification token that you generated in step 2 and prevents the buyer from being challenged twice in the authentication flow.

Using the CHARGE_AND_STORE intent from step 2 allows you to reuse the verification token to store a card for this step, after charging the card.

• Strong Customer Authentication