CODEWITHSUNDEEP
javascriptnode.jspayment-gatewaypayfast
Mahmoud amr
Mahmoud amr

Reputation: 130

PayFast Onsite Integration Doesn't Open Popup Modal

I am working on PayFast Onsite integration following their docs. I am using the PayFast integration in the NodeJs environment (with HTTPS). I have successfully got their identifier using axios.

However, the problem happens when I call their payment function:

window.payfast_do_onsite_payment({"uuid": identifier})

It return with a 404 error: DevTools failed to load source map: Could not load content for https://www.payfast.co.za/onsite/js/es6-promise.auto.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

How to fix this problem as I couldn't find any issue regarding this on their docs or any place on the internet.

Here is my NodeJs implementation code:

const generateSignature = (data, passPhrase = null) => {
    // Create parameter string
    let pfOutput = "";
    for (let key in data) {
      if(data.hasOwnProperty(key)){
        if (data[key] !== "") {
          pfOutput +=`${key}=${encodeURIComponent(data[key].trim()).replace(/%20/g, "+")}&`
        }
      }
    }
  
    // Remove last ampersand
    let getString = pfOutput.slice(0, -1);
    if (passPhrase !== null) {
      getString +=`&passphrase=${encodeURIComponent(passPhrase.trim()).replace(/%20/g, "+")}`;
    }
  
    return CryptoJS.MD5(getString).toString();
  };
  
  
  const myData = {
    "merchant_id": "xxxx",
    "merchant_key": "xxxx",
    'return_url': "https://www.example.com/success",
    'cancel_url': "https://www.example.com/success",
    'notify_url': "https://www.example.com/success",
    'name_first': 'First Name',
    'name_last': 'Last Name',
    "email_address":"xxxx",
    "amount": "100.00",
    "item_name": "TEST",
};
  const passPhrase = 'xxxx';
  
  const dataToString = (dataArray) => {
    // Convert your data array to a string
    let pfParamString = "";
    for (let key in dataArray) {
      if(dataArray.hasOwnProperty(key)){pfParamString +=`${key}=${encodeURIComponent(dataArray[key].trim()).replace(/%20/g, "+")}&`;}
    }
    // Remove last ampersand
    return pfParamString.slice(0, -1);
  };
  
  const generatePaymentIdentifier = async (pfParamString) => {
    const result = await axios.post(`https://www.payfast.co.za/onsite/process`, pfParamString)
        .then((res) => {
          return res.data.uuid || null;
        })
        .catch((error) => {
          console.error(error)
        });
    console.log("res.data", result);
    return result;
  };
  
  // Generate signature (see Custom Integration -> Step 2)
  myData["signature"] = generateSignature(myData, passPhrase);
  
  // Convert the data array to a string
  const pfParamString = dataToString(myData);
  
  // Generate payment identifier
  const identifier = await generatePaymentIdentifier(pfParamString); 

  if (identifier !== null) {

  
  window.payfast_do_onsite_payment({"uuid": identifier})
  }

Upvotes: 2

Views: 716

Answers (2)

Tiaan Giliomee
Tiaan Giliomee

Reputation: 1

This happens when you call the script from a non-https website. Make sure you have an ssl certificate and your app is being delivered https.

Upvotes: 0

MarvinR
MarvinR

Reputation: 1

You are sending an entire object instead of just uuid property that comes with identifier response object after been generated.

// Generate payment identifier
const identifier = await generatePaymentIdentifier(pfParamString); 
console.log(identifier ) // see the instance and its properties returned

Try this

window.payfast_do_onsite_payment({"uuid": identifier.uuid})

since the generated identifier is an object that contains the following:-

{
  uuid:'uuid',
  return_url:'[email protected]',
  cancel_url:'[email protected]'
}

I hope this will assist. Happy coding.

Upvotes: 0

Related Questions