Installation: Step 1: Download the @latpay/latpay-react-component package from public repository (NPM) and install it. Command to install the package: npm i @latpay/latpay-react-component

Step 2:

import {LoadScripts} from @latpay/latpay-react-component

Authentication • Next, to authenticate the merchant account to enable binding of Checkout elements into the payment page. This is performed by calling the open() function inside the package

• The following sample can be used as a template. The function provides an option to handle authentication failure for e.g. to alert website admins or write to log etc.

            window.LatpayCheckout.open({
                        merchantuserid: formData.Merchant_User_Id,// issued by latpay
                        publickey: formData.PublicKey,//issued by latpay
                        currency: formData.Currency,// transaction currency
                        amount: formData.Amount,//transaction amount
                        reference: formData.Reference,// transaction reference
                        description: formData.Description,// transaction description
                        status: (status) => {
                        // status...
                        },
                    });

• Once Checkout elements to be binded, it is necessary to create an empty DOM container (div tag) with the unique id “latpay-element”. This should be placed in location where you would like to have the card elements to be displayed.

                       <div id="latpay-element">

                       </div>

• If you specifically want to handle the card section separately, replace the “LatpayCheckout.open” call with “LatpayCheckout.open_card” when initializing the card input fields. Here’s how to do it:

                latpayCheckout.open_card({
                        merchantuserid: formData.Merchant_User_Id,// issued by latpay
                        publickey: formData.PublicKey,//issued by latpay
                        currency: formData.Currency,// transaction currency
                        amount: formData.Amount,//transaction amount
                        reference: formData.Reference,// transaction reference
                        description: formData.Description,// transaction description
                        status: (status) => {
                        //status.....
                        },
                        });

Once authentication is successful, the Latpay Card Element would be embedded in the merchant page. If the customer selects the Wallet option (either Gpay or ApplePay), then the transaction flow will complete based on the wallet popup and customer completing the necessary authentication. Card Payment: When the customer selects the card option and fills in the card detail, on clicking the Submit button on merchant side, should trigger the secure3dPayment() function, the function call specification as shown below

                        window.LatpayCheckout.secure3DPayment({
                amount: formData.Amount,
                currency: formData.Currency,
                reference: formData.Reference,
                description: formData.Description,
                firstname: formData.Firstname,
                lastname: formData.Lastname,
                email: formData.Email,
                datakey: formData.DataKey,
                transkey: formData.TransKey,
                is3dcheck: "N",
            });

        \*\* note :secure3DPayment transkey combination
        • transactionkey - which is a SHA-256 hash of the following parameters.
        • currency – type of currency used for transaction.
        • amount – total value of amount.
        • reference - unique transaction reference in merchant system [use your unique value in reference]
        • \_3dcheck - “Y” || “N”.
        • datakey – will be issued by latpay and need to maintain secure.

Callback : Call the call back function named as “OnPaymentCompleted”, once payment completed then response will be triggered inside the function automatically. The following fields will be received from the package

                                {
                                "responsekey": "b65f6af5d9f3ffc9a7792b2c45fcbeba2dbe83ef55cdd08faa3c14d606e4710d2a66f97103e07b49c45c7111ae950ea1ee85ecfa5abd4532e0854f923e5dfd60",
                                "amount": "0.01",
                                "reference": "lpstest123",
                                "description": "lpstest123",
                                "currency": "AUD",
                                "errorcode": "00",
                                "errordesc": "Success"
                                }

Clients can write custom logic to make a call to their backend and initiate a server-to-server API to Latpay Payment AuthStatus Check API to validate the payment, before displaying the results to customers.

window.LatpayCheckout.OnPaymentCompleted = (val) => { console.log("Payment completed:", val); setResult(val); if(val.responsekey!=""){ const authRequest = { merchantid: formData.Merchant_User_Id, amount: formData.Amount, currency: formData.Currency, reference: formData.Reference, transactionkey: formData.AuthStatusCheck, }; console.log(authRequest);

        fetch(
          "https://lateralpayments.com/checkout-staging/authorise/authstatuscheck",
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json; charset=utf-8",
            },
            body: JSON.stringify(authRequest),
          }
        )
          .then((response) => response.json())
          .then((data) => {
            console.log(data);
            setAuthStatusCheck(data);
          })
          .catch((err) => {
            console.error("Error in Auth Status Check:", err);
          });
      };
    }

** AuthStatusCheck transkey combination

· transactionkey - which is a SHA-256 hash of the following parameters.

• currency – type of currency used for transaction.

• amount – total value of amount.

• reference - unique transaction reference in merchant system [use your unique value in reference]

• datakey – will be issued by latpay and need to maintain secure.

**** PS. The above sample implementation shows the authstatuscheck being called from front end script, however, it is recommended to make this call from merchant server to added security.