2checkout Payment Authorization Failed in React

Question

I have been using 2checkout payment gateway. I am using the script file provided by 2checkout. First I was importing it in my index.html file by using <link></link> and it was giving me an CORBS error. So I downloaded the script and place in local file. Now, it's working as expected. It's providing me with authorization token by 2checkout. Following is my component that I have been using to get token form server.

import React, { useEffect, useState } from 'react';

const Form = (props) => {
  const [ card, setCard ] = useState({
    sellerId: <my-seller-id>,
    publishableKey: <my-publishable-key>,
    ccNo: '',
    expMonth: '',
    expYear: '',
    cvv: ''
  });
  const [ returnToken, setReturnToken ] = useState(null);

  useEffect(() => {
    window.TCO.loadPubKey('sandbox');
  }, []);

  const submitted = (e) => {
    e.preventDefault();
    var payWithCard = (data) => {
      console.log(data.response.token.token);
    };

    var error = (error) => {
      console.log(error);
    };

    try {
      window.TCO.requestToken(payWithCard, error, card);
    } catch (error) {
      setTimeout(() => {
        window.TCO.requestToken(payWithCard, error, card);
      }, 3000);
    }
  };

  const change = (e) => {
    setCard({
      ...card,
      [e.target.name]: e.target.value
    });
  };

  return (
    <form id="tcoCCForm" onSubmit={submitted}>
      <input id="sellerId" type="hidden" value={card.sellerId} />
      <input id="publishableKey" type="hidden" value={card.publishableKey} />
      <div>
        <label>
          <span>Card Number</span>
          <input
            id="ccNo"
            name="ccNo"
            type="text"
            value={card.ccNo}
            autoComplete="off"
            required
            onChange={(e) => change(e)}
          />
        </label>
      </div>
      <div>
        <label>
          <span>Expiration Date (MM/YYYY)</span>
          <input
            type="text"
            size="2"
            id="expMonth"
            name="expMonth"
            value={card.expMonth}
            required
            onChange={(e) => change(e)}
          />
        </label>
        <span> / </span>
        <input
          type="text"
          size="4"
          id="expYear"
          name="expYear"
          value={card.expYear}
          required
          onChange={(e) => change(e)}
        />
      </div>
      <div>
        <label>
          <span>CVC</span>
          <input
            id="cvv"
            name="cvv"
            type="text"
            value={card.cvv}
            autoComplete="off"
            required
            onChange={(e) => change(e)}
          />
        </label>
      </div>
      <input type="submit" />
    </form>
  );
};

export default Form;

so, it's giving me the token to console that I am using in Postman for testing the 2checkout api. https://www.2checkout.com/checkout/api/1/<seller_id>/rs/authService

I have been using following payload to send the POST request to this api.

{
    "sellerId": <seller_id>, 
    "privateKey": <private_key>,    
    "merchantOrderId": "123", 
    "token": "N2Y5MDFmNTItYzcxMS00OGQ5LTk2MmItOGJlMjAzYWQwNDFl", 
    "currency": "USD",
    "demo": true,
    "lineItems": [
        {"name": "Package A", "price": 10, "quantity": 1, "type": "product", "recurrence": "1 Month", "duration": "Forever"}  ],
    "billingAddr": {"name": "Wasi Ullah", "addrLine1": " village Bharaj P/O Lakhanwal", "city": "Gujrat", "state": "Pubjab", "zipCode": "50700", "country": "Pakistan", "email": "chwasiullah@gmail.com", "phoneNumber": "+923006242851"} 
    }

While the response I got everytime is:

{
    "validationErrors": null,
    "response": null,
    "exception": {
        "exception": false,
        "httpStatus": "400",
        "errorMsg": "Payment Authorization Failed: Please verify your information and try again, or try another payment method.",
        "errorCode": "607"
    }

}

Even I have provided with original card and all information in demo mode. But there's still the same issue.

Answer 1

I got the solution to this problem. I want to share it. May be it will be helpful for you. If you are testing 2checkout don't forget to check the documentation of test orders: https://knowledgecenter.2checkout.com/Documentation/09Test_ordering_system/01Test_payment_methods

Moreover, I wasn't adding the name according to this test order in api that's why it was saying me that Card Authorization failed.