5 Comments

What is PayFast?

PayFast claims to be South Africa’s PayPal. It’s a payment gateway that makes it easy for South Africans to accept payment from their websites quickly an easily. They offer a relatively easy API to integrate into the gateway but generally relies on server side code to make it happen.

The current help (as of Dec 2010) did not have any code examples of how to integrate correctly if you did not have any server-side back-end for your website. This is why I decided to create a simple JavaScript API to post the required information to the gateway for payment processing.

Requirements

PayFast requires quite a few things to correctly process a payment. The complete list can be found here. The main requirements are a couple pages hosted on your site that notify the user making the purchase, show a cancellation, and of course a page to capture basic payment details.

You need to provide these pages to the gateway when making the POST. Just like the sample code the easiest way to provide this information is in the form of hidden inputs, please refer to the documentation for more information.

  <body>
    <!--https://www.payfast.co.za/eng/process-->
    <input type="hidden" name="payfast_url" id="payfast_url" 
           value="https://sandbox.payfast.co.za/eng/process">
    <input type="hidden" name="merchant_id" id="merchant_id"
           value="10000100">
    <input type="hidden" name="merchant_key" id="merchant_key"
           value="46f0cd694581a">
    <input type="hidden" name="return_url" id="return_url"
           value="http://www.deventerprise.net/PayFast/payment_finished.html">
    <input type="hidden" name="cancel_url" id="cancel_url"
           value="http://www.deventerprise.net/PayFast/payment_cancelled.html">
    <input type="hidden" name="notify_url" id="notify_url"
           value="http://www.deventerprise.net/PayFast/payment_notify.html">
    <input type="hidden" name="item_name" id="item_name"
           value="DevEnterprise Test Product">
    <input type="hidden" name="item_description" id="item_description"
           value="">
    <input type="hidden" name="email_confirmation" id="email_confirmation"
           value="1">
    <input type="hidden" name="confirmation_address" id="confirmation_address"
           value="">
...

The commented out section contains the actual live payment page URL.

The Code

The code to make this happen was relatively simple with some outside help to create the functions to do an HTTP POST in plain old vanilla JavaScript.

function postPaymentToPayFast(payFastUrl, merchantId, merchantKey,
                              returnUrl, cancelUrl, notifyUrl, nameFirst,
                              nameLast, emailAddress, paymentId, amount,
                              itemName, itemDescription, emailConfirmation,
                              confirmationAddress) {
  // Sandbox merchant.
  if (merchantId == '10000100') {
    alert('Use the password \'clientpass\' to login and ' +
          'make the test purchase.');
  }
      
  postToURL(payFastUrl, {'merchant_id':merchantId, 
                         'merchant_key':merchantKey,
                         'return_url':returnUrl,
                         'cancel_url':cancelUrl,
                         'notify_url':notifyUrl,
                         'name_first':nameFirst,
                         'name_last':nameLast,
                         'email_address':emailAddress,
                         'm_payment_id':paymentId,
                         'amount':amount,
                         'item_name':itemName,
                         'item_description':itemDescription,
                         'email_confirmation':emailConfirmation,
                         'confirmation_address':confirmationAddress });
}

I have uploaded a demo of how this would work in a real website (using the provided sandbox) and deployed it on http://www.deventerprise.net/PayFast. The link to the source at the bottom of the page.

The script does not require any additional libraries to run and is compatible with all major browsers.  Hopefully this will become part of the standard sample code and documentation.

UPDATE: This implementation has been added to the official PayFast help wiki.

Comments

Comment by Devin Aumen

you don't see too many posts like this anymore. Most of them show no helpful information and are not eye catching in anyway. You kept my full attention very well when going over this. Good job and keep it up.

Comment by Jim Dane

This is pretty amazing! Will try to use it for sure.

Comment by JD

Goodjob

Comment by Thokozani Gwiliza

I agree a great post in deed. I am however struggling to hit my notify_url. The page is plublicly available but seems lie its is never hit. I am using the code provided and uses an alert on the notify page to grab some return parameters but no luck. The question is because I never see physically(happens in the server) the moment there is a redirect to my notify, how can I go about debugging it.

Thokozani Gwiliza
Comment by Werner

That article is very old (8 years) and is unlikely to work anymore, you'd be better off contacting PayPast for an official JS integration since they have come a long way since this was created: https://developers.payfast.co.za/documentation/

Werner
Post comment