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.