Create a Verification Token for saving Card using from 'react-square-web-payments-sdk';

Questions
1

Hello, I am using the from ‘react-square-web-payments-sdk’; and I am able to send payments using the payment token to the backend.

I need to save the card and I am getting errors that the verificationtoken generated in the Ui is invalid.
Keep in mind that there are two types of tokens. One is the sourceId which works but the verificationToken from the PaymentsForm is Faailing …

<PaymentForm
applicationId=“sandbox-sq0idb-xCO5_oNpYbesBmYfR0RxBg”
cardTokenizeResponseReceived={(token, verifiedBuyer) => {
const result = { ‘token’: token, ‘verifiedBuyer’: verifiedBuyer };
//console.log(result);
onConfirm(result);
}}

  const {cardResult} = cardsApi.createCard({
    idempotencyKey: uuidv4(),
    sourceId: sourceId, 
    verificationToken: verificationToken,
    "card": {
      "billingAddress": {
        "addressLine1": "123 Main Street",
        "addressLine2": "Apartment 1",
        "postalCode": "10003",
        "country": "US"
      },
      "cardholderName": "John Doe",
      "customerId":customerId,
      "referenceId": "user-id-1"
    }
  })
2

Are you reusing the verification_token that was used for the payment? If so that would cause the error since the verification_token is a one time use token. Also when you generated the verification_token was the intent set to STORE? :slightly_smiling_face:

3

Please use at the react sdk implementation below. The cardTokenizeReponseReceived comes back with a sourceId and a verifiedBuyer object. The verifiedBuyer object has a token property and that is what i am sending to the backend as a verificationToken …

<PaymentForm
  applicationId="sandbox-sq0idb-xCO5_oNpYbesBmYfR0RxBg"
  cardTokenizeResponseReceived={(token, verifiedBuyer) => {
    const result = { 'sourceId': token, 'verifiedToken': verifiedBuyer.tokn };
    //console.log(result);
    onConfirm(result);
  }}

/>

4

The intent was set to charge

5

Hi there, I switched the intent to STORE and now I get either INVALID SOURCE ID or I’INVALID_CARD_DATA’, …

if I call paymentsApi.createPayment, I get an invalid source id and that call doesn’t return a payment result.

If I just call the createCard without calling createPayment, I get an invalid card … .

Can you please help …

6

Both the source_id and the verification_token are a one time use tokens. You’ll need to either do one of the following:

  • Create the payment with the generated source_id and verification_token with the intent set to CHARGE. Once the payment is complete you can call verifyBuyer again with the intent set to STORE with the returned payment_id. Then call CreateCard with the payment_id and verification_token.

  • Call CreateCard with the generated source_id and verification_token that’s intent is STORE. Then call verifyBuyer again with the card_id and the intent set to CHARGE. Once you have the new verification_token you’ll call CreatePayment with the card_id and verification_token to charge the customer.

As for the INVALID_CARD_DATA what value are you using? Is this production or sandbox. :slightly_smiling_face:

1 Like
7

Thank you for your reply and help. I am using sandbox because it’s still being tested out. Is there a way for me to get more support than this?

I am using the react-sdk : (‘react-square-web-payments-sdk’). How do I call verifyBuyer two times? In the SDK, you don’t manually call verifyBuyer unlike the other web SDKS.

Do you see or agree with me on that? How does one initiate verifyBuyer manually?

8

Hi there, here is the doc. link for react-sdk … there is no option for calling verifyBuyer manually not to talk about calling it twice: Props | react-square-web-payments-sdk

9

Okay, with sandbox you’ll need to use the sandbox test values for processing cards.

As for calling verifyBuyer the second time you’ll need to reach out to the developers of the React Web Payments SDK. But your customer will need to go through the verification process the second time. :slightly_smiling_face: