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

Step 2:

import Latpaycomponent from @latpay/latpay-react-native-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

            const openForm = `
          window.LatpayCheckout.open({
            merchantuserid: "${formData.merchantuserid}",// issued by latpay
            publickey: "${formData.PublicKey}",//issued by latpay
            amount: "${initialData.Amount}",//transaction amount
            currency: "${initialData.Currency}",//transaction currency
            reference: "${initialData.Reference}",// transaction reference
            description: "${formData.Description}",//transaction description
            status: function(status) {
              window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'status', data: status }));
            }
        });
        pass this as a props to the package.

• 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:

                const openCard = `
          window.LatpayCheckout.open_card({
            merchantuserid: "${formData.merchantuserid}",// issued by latpay
            publickey: "${formData.PublicKey}",//issued by latpay
            amount: "${initialData.Amount}",//transaction amount
            currency: "${initialData.Currency}",//transaction currency
            reference: "${initialData.Reference}",// transaction reference
            description: "${formData.Description}",//transaction description
            status: function(status) {
              window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'status', data: status }));
            }
        });

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

        const openGpay = `
          window.LatpayCheckout.open_googlepay({
           merchantuserid: "${formData.merchantuserid}",// issued by latpay
            publickey: "${formData.PublicKey}",//issued by latpay
            amount: "${initialData.Amount}",//transaction amount
            currency: "${initialData.Currency}",//transaction currency
            reference: "${initialData.Reference}",// transaction reference
            description: "${formData.Description}",//transaction description
            status: function(status) {
              window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'status', data: status }));
            }
        });

       

Once authentication is successful, the Latpay Element would be embedded in the merchant page.

Error Handle Response: • 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.

  onErrorResponse={handleErrorResponse} 
    *pass this as props to handle response.

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

                       const packageRef = useRef(null);
                           const paymentParams = {
  amount: initialData.Amount,
  currency: initialData.Currency,
  reference: initialData.Reference,
  description: formData.Description,
  firstname: formData.Firstname,
  lastname: formData.Lastname,
  email: formData.Email,
  transkey: transKey,
  is3dcheck: initialData.is3dcheck,
};
                       if (packageRef.current) {
  //calling handlepayemnt function which is in package.
  packageRef.current.handlePayment(paymentParams); // Ensure fresh data is passed
} else {
  //print the error message
}
* ref={packageRef} used to access the handlePayment and trigger the secure3DPayment() function

**Transkey combination ** 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 : implement the call back function named as “OnPaymentCompleted”, once payment completed then response will be triggered back to this callback function automatically.“OnPaymentCompleted" function can be triggered by passing "handlePaymentCompleted" function mentioned below as props.it will automatically get triggered after the payment completion. 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.

const handlePaymentCompleted = (payment) => { //do auth status check if needed const authStatusPayload = { merchantid: formData.merchantuserid, amount: initialData.Amount, currency: initialData.Currency, reference: initialData.Reference, transactionkey: authStatusCheckKey, };

fetch("https://lateralpayments.com/checkout/authorise/authstatuscheck", {
  method: "POST",
  headers: {
    "Content-Type": "application/json; charset=utf-8",
  },
  body: JSON.stringify(authStatusPayload),
})
  .then((response) => response.json())
  .then((data) => {
    Alert.alert("Response:", JSON.stringify(data));
  })
  .catch((error) => {
    Alert.alert("Error:", error.message);
  });

};

** 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.

below is the process how to pass props to the package