Add Strong Customer Authentication

Applies to: Web Payments SDK | Payments API

Learn how to add Strong Customer Authentication to the application in the Web Payments SDK quickstart project.

Link to section


To add security to the payment method, add the Strong Customer Authentication (SCA) security protocol layer to the application and verify the identity of the payment card holder by using the verifyBuyer function.


Your application should always attempt to create a payment with a verification token when a token is returned. It should also be prepared to respond to a payment failure in a small number of cases where a payment is rejected despite receiving a buyer verification token.

  1. Update the storeCard function to take the verificationToken parameter.

  2. Define the verifyBuyer function with billing contact details after the displayResults function.

    Your production application should collect the billing address of the buyer. Although providing an empty billingContact is acceptable, by providing as much billing contact information as possible, you increase the chances of a successful authentication. This example uses an object that is declared with a hard-coded billing address. Your application might collect a billing address at payment time or, if the buyer is a customer on the seller Square account, from the buyer's customer record.


    The Web Payments SDK produces a payment token that can be used to make a payment with the presented card or to store the card on file. These operations are represented by two intents: CHARGE to make a payment and STORE to store the card.

    The code in the following steps adds the billing contact values needed by SCA (with the payments.verifyBuyer function) to verify the authenticity of the card holder.

    The verifyBuyer function creates a StoreVerifyBuyerDetails object that verifies a card to be stored on file and provides the buyer and purchase details needed by 3DS.

  3. Add the verifyBuyer function to the handleStoreCardMethodSubmission function and update the storeCard method call to include verificationToken.

  4. Test the application.

    1. Navigate to http://localhost:3000/ in your browser.

    2. Use one of the test cards in the following table with a challenge type of “Modal with Verification Code":

      BrandNumberCVVChallenge typeVerification code
      Visa4800 0000 0000 0004111No ChallengeN/A
      Mastercard5222 2200 0000 0005111No ChallengeN/A
      Discover EU6011 0000 0020 1016111No Challenge123456
      Visa EU4310 0000 0020 1019111Modal with
      Verification Code
      Mastercard5248 4800 0021 0026111Modal with
      Verification Code
      Mastercard EU5500 0000 0020 1016111Modal with
      Verification Code
      American Express EU3700 000002 010141111Modal with
      Verification Code
      Visa4811 1100 0000 0008111No Challenge with
      Failed Verification

    After you submit, you see the following window where you enter the verification code:

    A graphic showing the SCA cardholder authentication window that appears when the verifyBuyer function is called.

  5. Verify that the application passed in the verification token with a successful response. Check the application's API log again in your developer account.


You can see a complete code example using the Web Payments Quickstart on GitHub.

Link to section

Next step

On this page