Store a Card on File

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:

   async function storeCard(token, customerId) {
     const body = JSON.stringify({
       locationId,
       sourceId: token,
       customerId,
       idempotencyKey: window.crypto.randomUUID(),
     });
   
     const paymentResponse = await fetch('/card', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
       body,
     });
   
     if (paymentResponse.ok) {
       return paymentResponse.json();
     }
   
     const errorBody = await paymentResponse.text();
     throw new Error(errorBody);
   }

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.

   async function tokenize(paymentMethod) {
     const verificationDetails = {
       billingContact: {
         givenName: 'John',
         familyName: 'Doe',
         email: '[email protected]',
         phone: '3214563987',
         addressLines: ['123 Main Street', 'Apartment 1'],
         city: 'London',
         state: 'LND',
         countryCode: 'GB',
       },
       intent: 'STORE',
       customerInitiated: true,
       sellerKeyedIn: false,
        };
   
     const tokenResult = await paymentMethod.tokenize(verificationDetails);
   
     if (tokenResult.status === 'OK') {
       return tokenResult.token;
     } else {
       throw new Error(
         `Tokenization errors: ${JSON.stringify(tokenResult.errors)}`,
       );
     }
   }

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:

   async function handleStoreCardSubmission(event, card, customerId) {
     event.preventDefault();
   
     try {
       // disable the submit button as we await tokenization and make a payment request.
       cardButton.disabled = true;
       const token = await tokenize(card);
       const storeCardResults = await storeCard(
         token,
         customerId,
       );
   
       displayResults('SUCCESS');
       console.debug('Store Card Success', storeCardResults);
     } catch (e) {
       cardButton.disabled = false;
       displayResults('FAILURE');
       console.error('Store Card Failure', e);
     }
   }

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);
   });