Integrating NodeJS with PayFast Payment Gateway
Today I will be going through my journey on integrating a South African
payment gateway called PayFast (https://www.payfast.co.za/) with you. I recently began looking around for a payment gateway, so that
I could build it into my back end app, to provide a payment solution for my
web app.
At first, my attempts left me frustrated, as I attempted to connect to the
PayFast API using my front end (React). These attempts failed miserably, due
to a CORS issue.
You can read more about CORS here (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
I solved this problem by creating a back end solution with NodeJS to handle
my payment requests, and activated a npm package called cors within my back end, which would act as
middleware, to allow cors within the project.
You can find the package here
https://www.npmjs.com/package/cors
Usage with the cors module within your back end is fairly straightforward,
const cors = require('cors');
const app = express();
app.use(cors());
With the CORS issue resolved, I used the express framework, which is a flexible framework, that allows you to develop web applications.
Once that was done, the next step was to visit the PayFast developer page, and have a look at the requirements.
I decided to go with the "Onsite Payment" option, which required me to query a PayFast API to get a unique payment UUID.
Thankfully the PayFast documentation provided useful NodeJS scripts to create the required payload to submit to the PayFast API, to generated this UUID. Information that was mandatorily required was my merchant id, and merchant key, both of which was available on my PayFast page account.
The payload required info was minimal, and included a signature, which was a hash of the payload, which would allow PayFast to make sure that the info submitted was not intercepted between me and PayFast. Once the payload and signature were generated, this was submitted to the PayFast API, which resulted in it returning my unique payment UUID to me.
const paymentData = {
merchant_id : "fill in your merchant id here",
merchant_key: 'fill in your merchant key here',
email_address: "email goes here",
amount: "your product value goes here",
item_name: 'product item goes here'
};
const phrase = "your passphrase from your PayFast account goes here";
const generateSignature = (data, passPhrase = null) => {
// Create parameter string
let pfOutput = "";
paymentData["signature"] = "";
for (let key in data) {
if(data.hasOwnProperty(key)){
console.log(key + " " + data[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(phrase.trim()).replace(/%20/g, "+")}`;
}
console.log(getString);
return crypto.createHash("md5").update(getString).digest("hex");
};
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 getPaymentId = async (paymentString) => {
const result = await axios.post('https://www.payfast.co.za/onsite/process', paymentString)
.then(res => {
console.log(res.data)
return res.data;
})
.catch(err => console.log(err))
return result;
}
Once I obtained the UUID, I passed it back to my front end request, and initialized the PayFast payment modal with,
window.payfast_do_onsite_payment({"uuid": data});
This created the modal, which allowed me to process my payment.
Happy coding.
Comments
Post a Comment