Start a conversation

How do I integrate PayFast with SimpleCart?

Create a simple shopping cart for use with PayFast using only HTML, CSSand Javascript.

simpleCart(js) PayFast demo

1. Download and extract

2. Double-click the simplecartjs.html file to see the demo.

Creating a simpleCart(js) shopping cart from scratch

Download and extract

simpleCart(js) depends on 1 of 3 common Javascript libraries (jQuery, Prototype or Mootools)

* Include 1 of these 3 library files (jQuery is used in the example)

* Include the simpleCart.js file itself

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
      <script type="text/javascript" src="js/simpleCart.js"></script>

* Code the simpleCart object by hand

<script type="text/javascript">
              checkout: {
                  type: "SendForm" ,
                  url: "" ,
                  // HTTP method for form, "POST"
                  method: "POST" ,
                  // URL to redirect browser to after successful checkout
                  success: "" ,
                  // URL to redirect browser to after checkout was cancelled by buyer
                  cancel: "" ,
                  extra_data: {
                      currency_code: "ZAR",
                      merchant_id: "10000100",
                      merchant_key: "46f0cd694581a",
                      notify_url: "", //this is the ITN or callback URL
                      amount:, // Total amount = item1 + item2 + item3 etc
                      name_first: "Buyer first name",
                      name_last: "Buyer last name",
              beforeCheckout: function( data ){
                  data.currency = "ZAR";
                  data.cancel_url = data.cancel_return;
                  data.return_url = data.return;
                  var payfast_description = '''';
                  for (var key in data)
                      if (key.match(/^item_name/))
                          payfast_description += '' ''+data[key];
                  data.item_description = data.item_name = payfast_description;

Visit and view the sample files for a complete example. 

Choose files or drag and drop files