SCA flow not being bypassed with any test card

Questions
, ,
1

Hi there, I hope you’re well

I’ve followed this guide to enable SCA cards https://developer.squareup.com/docs/payment-form/cookbook/verify-buyer-on-card-charge . This works, and if I use a SCA test nonce, it triggers the SCA popup and the verification token & nonce from the JS code is POSTed to my server. Happy days!

Except for cards that don’t require SCA, the paymentForm.verifyBuyer(...) callback is never run, so I never get a POST to the server - it either works with SCA cards only, or only works for non-SCA cards - is there an introspection method, i.e. paymentForm.buyerNeedsVerifcation() for instance. I get a card nonce & card data for these test cards, but that verifyBuyer callback is never made on your side.

So…

  • Can I trigger different behaviour based on the payment flow requirements? All of my server callback & events occur inside verifyBuyer at the moment, as I must support SCA for all cards in the UK.
  • Will this code ‘just work’ in production? As in, for a card from the USA that doesn’t need SCA, will the verifyBuyer callback happen with a happy verification token like it does when it passes verification?

I’m worried as I can’t test either of these scenarios in sandbox

Many thanks in advance
Andy.

2

Hi @andyc welcome to the forums!

I’m currently unable to replicate this. If I input “4310 0000 0020 1019” (the EU test card), I get the buyer verification popup, all good. If I input “4111 1111 1111 1111”, I do not see the popup, but I get a valid verification token in the callback that I can use. So it sounds like something is going wrong with your implementation that is not working correctly…are you seeing any errors in the browser console? What exactly happens…it just waits for callback forever?

Feel free to supply your application id as well, and I can test locally on mine with your sandbox to ensure it’s not application-specific.

3

Hey Stephen - thanks for getting back to me

So I tried both of those card numbers, and neither work with my implementation -

My application ID is sandbox-sq0idb-xGakbt6FvRg3FRRDTDH-2Q.

My rough implementation is this:

const verificationDetails = {
  intent: 'CHARGE',
  amount: self.priceWithoutSymbol,
  currencyCode: self.currencyCode,
  billingContact: {
    givenName: self.name
  }
};

paymentForm = new SqPaymentForm({
  applicationId: info.square_application_id,
  locationId: info.square_location_id,
  inputClass: "sq-input",
  autoBuild: false,
  inputStyles: [ ... ],
  cardNumber: { ... },
  cvv: { ... },
  expirationDate: { ... },
  postalCode: { ... },

  callbacks: {
    cardNonceResponseReceived: function (errors, nonce, cardData) {
      console.log('nonce', nonce)

      paymentForm.verifyBuyer(
        nonce,
        verificationDetails,
        function(err, verificationResult) {
          console.log('err', err)
          console.log('verificationResult', verificationResult)
          if (err == null) {
            if (errors) {
              const error = errors[0]
              self.$emit('got-payment-error', error.message)
            }

            let params = {}
            params['square_payment_nonce'] = nonce
            params['square_verification_token'] = verificationResult.token
            params['card_data'] = cardData

            self.$emit('got-payment-params', params)
          } else {
            self.$emit('got-payment-error', err.message)
          }
        }
      )
      self.$store.commit('setLoading', false)
    },
  },
})

paymentForm.build();

The call to paymentForm.requestCardNonce() is happening in an method for purchase.

The console logs for nonce is being reached & outputted, but I never see the console log for verificationResult - so for the EU card or the non-EU card, neither is causing the callback from paymentForm.verifyBuyer to be run?

Many thanks
Andy.

4

Thanks for that information. I was able to test with your application id, as well as your code within the cardNonceResponseReceived callback, and the above card (4111…) worked successfully (I received a verification token). Do you happen to have a public page where I could see this live? If not, would you be willing to privately share your project so I can test it locally (feel free to message it to me directly)?

5

Hi there Stephen

I’ve managed to figure it out now - this was only happening locally, but when I staged it it works fine. Both EU & non-EU cards proceed fine as I thought should be happening

Thank you for your help

Andy

1 Like
6

Hi there,

I am having a similar issue where paymentForm.verifyBuyer stalls locally but works fine in Dev and Production on my cloud server. I am using the C# sdk and this used to work locally (.Net Env). Was something new introduced or any idea why the paymentForm.verifyBuyer would have an issue locally?

Rick

7

Hi Rick,

Yeah I didn’t find a solution to this- I’m still seeing paymentForm.verifyBuyer not working locally as well - staging & production work fine, it’s very frustrating to have to always test the Square checkout code in staging each time!

Andy.

8

Hi Andy,

Yeah - this is going to become a big problem. You need to be able to step through your backend code for testing purposes. Are you using c# .net as your backend server code?

Seems like this is not code-related and an issue like cashing or a trusted cert…

Rick

9

Hi Andy,

I did get the paymentForm.verifyBuyer to work through IE locally. I was using Chrome before through my dev environment. Maybe some setting in Chrome from a localhost standpoint…

Rick

10

Hey Rick

No I’m using Ruby for mine , but this is happening within the JS payment form for me

11

Hi Andy,

Not sure if you got things resolved, but I found that I had the DuckDuckGo extension in Chrome running locally that was affecting the paymentForm.verifyBuyer call. Once I disabled DuckDuckGo the call worked without an issue.

Rick

12

Hey Rick,

Yes I think I have the same extension on Firefox, but not on other browsers which makes sense -

Thanks for replying,

Andy