Easypaisa integration in react-native

Question

I am trying to integrate Easypaisa payment into my app. I have a merchant account.

here is my code

 const requestBody = 'storeId=xxxx&amount=xx&postBackURL=xxx&orderRefNum=xx';

 const requestHeader = {
 'Accept': 'application/json',
 'Content-Type': 'application/x-www-form-urlencoded',
 };

Here is react-native-webview

 <WebView
    source={{
      uri: 'https://easypay.easypaisa.com.pk/easypay/Index.jsf',
      headers: requestHeader,
      body: requestBody,
      method: 'POST',
    }}
  />

here is an error that I'm facing

I have tried many solutions that didn't get any success and didn't find any solution or proper documentation related to Easypaisa.

Answer 1

I have used 3 packages for this purpose.

import AesJs from 'aes-js';

import { Buffer } from 'buffer';

import queryString, { stringify } from 'query-string';

and solved this issue

// Generating bytes encryption in AES, ECB mode with easypaisa HashKey

Step 1

const aes = new AesJs.ModeOfOperation.ecb(AesJs.utils.utf8.toBytes(HASH_KEY));

you can generate a hash key from the merchant account.

Step 2

pkcs5Pad

   function pkcs5Pad(text: string, blockSize: number): string {
   const pad = blockSize - (text.length % blockSize);
   return text + String.fromCharCode(pad).repeat(pad);
   }

convertObjectToString

    function convertObjectToString(obj: any): string {
    let data = '';
    Object.keys(obj)
    .sort()
    .forEach((key) => {
    data += `${key}=${obj[key]}` + '&';
    });
    return data.slice(0, data.length - 1);
    }

Step 3

// Generating HashMapReq

  const hasMapReq = Buffer.from(aes.encrypt(Buffer.from(
  pkcs5Pad(convertObjectToString(requestBody), 16))))
  .toString(
  'base64',
);

append your hashReq into request-body and enjoy.