test1

The React Latpay CardElement is a prebuilt UI component which can be included in any React app. This provides a seamless way to capture sensitive card data without passing through merchant application and sending request direct to Latpay. This helps merchant application to be fully PCI-compliant.

The steps to implement the React Latpay CardElement is outlined in the next sections.

step 1: Install
Download the com.latpay.react.latpaycard package from public repository (NPM) and install it.

Command to download the package:
npm i com.latpay.react.latpaycard

step 2: Import latpaycard component from com.latpay.react.latpaycard package as mentioned below.

Add it into your page and then call the Latpaycard component.

step 3: Pass the parameters as props to latpaycard component for the further process.

authInfo
- This prop is to contain authentication data, as issued by Latpay. It contains two properties.
- It has 2 properties inside of it they are:

Field	Value
merchantid	account created by latpay for transaction process
publicKey	issued by latpay for authentication

custInfo
- This prop is to contain information relating to the checkout customer. It contains three properties.
Field Value

firstname firstname of the customer

lastname lastname of the customer

email email of the customer

Field	Value
firstname	firstname of the customer
lastname	lastname of the customer
email	email of the customer

transInfo
This prop is to contain transaction details. It contains the following properties, which includes a security hash value. the values are amount, currency, reference and_3dcheck.

Field	Value
transactionkey	which is a SHA-256 hash of the following parameters[amount,currency,reference and _3dcheck]
currency	type of currency used for transaction
amount	total value of amount
reference	unique transaction reference in merchant system
_3dcheck	pass “Y” in it to enable 3dcheck process
datakey	will be issued by latpay and need to maintain secure

returnedURL: This prop is to contain the return URL, to where customer will be redirected after transaction authorisation. As part of redirection, the reference value sent in transInfo prop, will be appended as querystring to the returnedURL.

For e.g. https://lpsreact.azurewebsites.net/ordercompleted

based on the above sample props assigned, the customer will be redirected to the following URL after authorisation.

https://lpsreact.azurewebsites.net/ordercompleted?reference=lpstest123

errorResponse:
This is the callback function which will be triggered on any exceptions that is raised within the Latpay CardElement. Merchant can trap this function and include custom Error handling to be displayed for their customers.

  const [errorData,seterrorData]=useState("") //state used to store error data.
  const errorResponse = (data) => {
    seterrorData(data)
  };
//please handle data handling as per your need
});

Example 1

Example 2

Example 3

Example 4

{
    "errorcode":"1001",
    "statuscode":"1",
    "errordes":"Authentication Falied",
    "responsetype":"0"
}

{
    "errorcode":"9001",
    "statuscode":"1",
    "errordes":"Invalid key",
    "responsetype":"0"
}

{
    "errorcode":"9001",
    "statuscode":"1",
    "errordes":"Missing Field",
    "responsetype":"0"
}

{
    "errorcode":"9000",
    "statuscode":"1",
    "errordes":"System Error",
    "responsetype":"0"
}

To customize the CSS as per your requirement, use the below class Names:

Latpaycard
LatpayButton
LatpayCardnumber
LatpayName
LatpayCVC
LatpayExpiry
LatpayHeading

After getting the merchant reference, Call the below API to get the final transaction response, based on the response you can then display it to the customer.
URL: https://lateralpayments.com/checkout-staging/authorise/AuthStatusCheck

Pass the request as mentioned below.

Request:

Fields	Type	Mandatory
merchantid	string	Required
reference	string	Required
currency	string	Required
amount	string	Required
transactionkey	string	Required

Example 1

{

    "merchantid": "test_latpay_3d",
    “reference”: "lpstest123",
    "currency": "EUR",
    "amount": "0.10",
    “transactionkey”: "c2d6fc0c5ea3a1ede597f5a8ad81119c90464927269e8e9cee88fd312e501837",  [currency+amount+reference+datakey]

}

You’ll receive a response like this.

Fields	Type	Mandatory
reference	string	Required
amount	string	Required
currency	string	Required
banktransaction_no	string	Required
bankauth_no	string	Required
transactiondate	string	Required
transid	string	Required
statuscheckid	string	Required
cardbin	string	Required
cardlast4	string	Required
bankcode	string	Required
bankmsg	string	Required
cardtoken	string	Required
status	Status	Required

Accepted Response

Rejected Response

{
    "reference": "lpstest123",
    "amount": "0.10",
    "currency": "EUR",
    "banktransaction_no": "320712312728",
    "bankauth_no": "781161",
    "transactiondate": "Jul 26 2023 1:09PM",
    "transid": "85066827",
    "statuscheckid": "409139",
    "cardbin": "52047300",
    "cardlast4": "0021",
    "bankcode": "00",
    "bankmsg": "Approved",
    "cardtoken": "0xE2633B370EA75A8FAE0F9AAA6B205980D8997DD9",
    "status": {
        "responsetype": "5",
        "statuscode": "0",
        "originalcode": "00",
        "errorcode": "00",
        "errordesc": ""
    }
}

{
    "reference": "lpstest123",
    "amount": "0.10",
    "currency": "EUR",
    "banktransaction_no": "NULL",
    "bankauth_no": "NULL",
    "transactiondate": "Aug  1 2023  6:41AM",
    "transid": "85156428",
    "statuscheckid": "410414",
    "cardbin": "47613000",
    "cardlast4": "0043",
    "bankcode": "05",
    "bankmsg": "Do not honour",
    "cardtoken": "0x2C87BCCF84E36BBE5DCEE60EEE093ADE84B4F0E8",
    "status": {
        "responsetype": "5",
        "statuscode": "1",
        "originalcode": "AD",
        "errorcode": "05",
        "errordesc": ""
    }

}

Demo URL: https://lpsreact.azurewebsites.net

Screen 1:
Screen 2:
Screen 3:
Screen 4:

Fields	Type	Manditory
responsetype	string	required
statuscode	string	required
originalcode	string	required
errorcode	string	required
errordesc	string	required

Object