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

simpleCart(js) PayFast demo

https://github.com/PayFast/mod-simplecart

1. Download and extract https://github.com/PayFast/mod-simplecart/zipball/master

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

Creating a simpleCart(js) shopping cart from scratch

Download and extract https://github.com/wojodesign/simplecart-js/zipball/master

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">
          simpleCart({
              checkout: {
                  type: "SendForm" ,
                  url: "https://sandbox.payfast.co.za/eng/process" ,
                  // HTTP method for form, "POST"
                  method: "POST" ,
                  // URL to redirect browser to after successful checkout
                  success: "http://yourwebsite.co.za/success.html" ,
                  // URL to redirect browser to after checkout was cancelled by buyer
                  cancel: "http://yourwebsite.co.za/cancel.html" ,
                  extra_data: {
                      currency_code: "ZAR",
                      merchant_id: "10000100",
                      merchant_key: "46f0cd694581a",
                      notify_url: "http://yourwebsite.co.za/notify.html", //this is the ITN or callback URL
                      amount: simpleCart.total, // 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;
              }
          });
      </script>

Visit https://github.com/PayFast/mod-simplecart and view the sample files for a complete example.