How do I get the new SCA payment flow to work?

Questions
1

Hello there!

I’m currently trying out the new SCA payment flow, which is described. The documentation (Take a Card Payment) says I need to pass the new parameters to the “tokenize()” method. But there is no global “tokenize” method. I think this code snippet refers to GitHub - square/web-payments-quickstart: Quickstart for using Square's Web Payments SDK. Specifically to /public/examples/card-payment.html. Can you please help me understand how exactly I should pass the new parameters to “Card.tokenize()”?

I created a fork of this repository and tried to implement the new SCA payment flow but it doesn’t work.

I tried the following code:

const tokenResult = await paymentMethod.tokenize(
  {
    billingContact: billingContact, 
    intent: 'CHARGE', 
    sellerKeyedIn: 'FALSE', 
    customerInitiated: 'TRUE', 
    total: total
  }
);

I also tried this:

const tokenResult = await paymentMethod.tokenize(
  billingContact, 
  'CHARGE', 
  'FALSE', 
  'TRUE', 
  total
);

What mistake have I made?

Here’s the error I’m getting:

{
  code: 'CARD_DECLINED_VERIFICATION_REQUIRED',
  detail: "Authorization error: 'CARD_DECLINED_VERIFICATION_REQUIRED'",
  category: 'PAYMENT_METHOD_ERROR'
}

It looks like an error if “verifyBuyer” hasn’t been invoked. But in the (beta) new payment flow this method is deprecated.

Without changes (when the code calls “verifyBuyer”) everything works fine with test cards with a challenge type “Modal with verification code”.

Any help is appreciated.

Best regards,
Max Eliseev

2

:wave: I’m Square Dev AI, here to help answer your question!
Based on the information you’ve provided, the following documentation will help answer your question:

https://developer.squareup.com/docs/sca-overview-web

Additional Documentation

Strong Customer Authentication
Strong Customer Authentication
Square Developer Documentation

If this documentation helped you find a solution, please check the box indicating that this reply solves the problem.
Otherwise one of our Developer Advocates will provide additional assistance shortly.

3

Our new payment flow allows you to charge and store a card on file using the CHARGE_AND_STORE intent. This flow handles buyer verification automatically during tokenization, so you don’t need to call verifyBuyer separately.

  1. Tokenization: You need to create a payment token with the required parameters.
  2. Payment Processing: Use this token in a Payments API call.
  3. Storing Card on File: After a successful payment, create a card on file using the payment ID.

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. :slightly_smiling_face:

4

Thank you for your message, Bryan.

I don’t need store a card after charging. I’m trying to figure out how I should change the code, because the code snippets on Take a Card Payment don’t help with that.

Could you please describe exactly how I should modify the “Card.tokenize()” call?

For example, my current code looks like this:

const payments = window.Square.payments(appId, locationId);
const card = await payments.card();

// attaching card and doing other necessary actions

const tokenizationResult = card.tokenize();
const paymentToken = tokenizationResult.token;

const verificationDetails = {
  amount: '1.00',
  billingContact: {
    givenName: 'Bob',
    familyName: 'Billy',
    email: '[email protected]',
    phone: '123456789',
    addressLines: ['20 W 84th St'],
    city: 'New York',
    countryCode: 'US',
  },
  currencyCode: 'USD',
  intent: 'CHARGE',
};

const verificationResult = payments.verifyBuyer(paymentToken, verificationDetails);
const verificationToken = verificationResult.token;

// sending a payment request using paymentToken and verificationToken

How should I modify it?

5

While the intent is called CHARGE_AND_STORE you don’t need to store the card after it’s charged. You can just charge the card and this will eliminate you calling verifyBuyer which will be deprecated in and retired in the future. It will also eliminate the need for you to refactor the code in the future when we do deprecate it. :slightly_smiling_face:

6

Why do I need to store the card? Our current integration with Square doesn’t do that, and it works fine.

7

You don’t need to store the card. It’s just a word in the new intent. Also this is going to replace verifyBuyer in the very near future. :slightly_smiling_face:

8

I gave up when const verificationResults = await payments.verifyBuyer I get a message saying verifybuyer does not exist!
So I am trying the new(beta) method for SCA and I find the it fails JSLInt and my js with the error Uncaught SyntaxError: missing ) after argument list (at sq-card-pay.js:23:4). I just copied the code on this link Take a Card Payment

9

Its here

image
image319×108 2.79 KB

10

Bryan, how is this going to replace “verifyBuyer”? Could you please provide more information? Take a Card Payment doesn’t say it. Or does it say it? Where can I find this information? Could you provide links to the documentation?

11

Take a look at this example - web-payments-quickstart/public/examples/card-payment.html at main · square/web-payments-quickstart · GitHub

12

Fixed the JSlint failure by moving all data to a const which then is sent to card.tokenize.
Now the fail is in process-payment. The first call to
$create_payment_request = new CreatePaymentRequest($token, $idempotency_key)
fails as the token is no longer a simple string. I assume that the Beta version must accept the complex token so another day lost. Payments are failing and I need to get the SCA working. I am using square-php-sdk 21 Nov 2024 version.

13

Its gone! The documentation on the BETA SCA code has disappeared. The new update for SDKs a few days ago has it DEPRECIATED. Did I miss something? Bryan says " Also this is going to replace verifyBuyer in the very near future. :slightly_smiling_face:"

14

Sorry yes, it was removed due to an issue. It’s being fixed and will be back up soon. We’re very sorry for this inconvenience. :slightly_smiling_face:

1 Like