Adding Quickteller JavaScript SDK to enable payment on your website

Quickteller JavaScript SDK makes it easy for you to accept payment on your website by just adding a simple JavaScript. It is created in order to ease the pains of integration of payment on websites for web developers. Quickteller JavaScript SDK doesn’t have any external library requirements, just add it to your application, after integration and you are good to go.

The steps below describe the process involved in adding the JavaScript SDK to your website.

Register as a merchant on Quickteller

The first step to integrating the JavaScript SDK is registering as a Quickteller merchant. To complete this step, please refer to the “How to get listed” document. After this process you’ll be issued a payment code which you’ll need as a parameter for adding the JavaScript SDK.

Integrating the JavaScript SDK to your application

To add the JavaScript SDK to your application, please follow the steps below:

  1. Add an empty container tag to house the button that you wish to include, at the place where you wish the button to be. It could be a <div> or a <p> and it must have an id which is used to identify it in the Quickteller JavaScript SDK. A sample container is given below:
    <div id="btn_div"></div>
  2. Add the following tag to import the JavaScript just before the closing <body> tag on your page:
    <script id="qtScript" type="text/javascript" src="https://sandbox.interswitchng.com/quickteller.js/v1" onload="Quickteller.initialize()"></script>

    The tag imports the v1 of the Quickteller JavaScript file, then it executes the Quickteller.initialize() function to set-up the environment, after the file finishes loading.

  3. Add the following line immediately after the line above:
    <script type="text/javascript">
    document.onreadystatechange = function() {
    
    if(document.readyState === "complete"){
    
    Quickteller.checkout({
    
    "paymentCode" : "",
    
    "buttonSize": "small | medium | large",
    
    "redirectUrl": "http://example.com/redirect",
    
    "amount": "",
    
    "customerId": "",
    
    "mobileNumber": "",
    
    "emailAddress": ""
    
    }, "btn_div", function(){
    
    //fn called before loading payment pop-up.
    
    }, function (status) {
    
    //fn called just before closing payment pop-up.
    
    });
    
    }
    
    }
    </script>

    We are adding the Quickteller.checkout() function to execute when the document loading completes. The Quickteller.checkout() function takes four parameters:

    1.   A JSON object with the following properties: paymentCode: The payment code you got when you registered as a merchant on Quickteller. buttonSize: The size of the button you want to include. Valid options are: small, medium and large. redirectUrl: The URL where you want the response of the transaction submitted to. The response would be sent as a form submission, with POST method. The following parameters are what should be received:tx_ref, resp_desc, status and resp_code. amount: The amount of the item that you want to sell. customerId: Any unique ID which you want to use to use to identify the current customer making the transaction. MobileNumber: For sending the receipt sms. emailAddress: For email for emailing receipt to user.
    2. The ID of the container which you want to hold the button.
    3. A JavaScript function that is called just as the pop-up is loaded.
    4. A JavaScript function that is called just before the pop-up is closed. This function takes one Boolean parameter which indicates if the payment was successful or not.

How to handle response from redirect URL

After the payment pop-up closes, Quickteller redirects to the URL you supplied, sending a number of parameters back via HTTP POST. The parameters passed to your redirect are as follows:

  1. tx_ref: This represent the transaction reference of the current transaction and is unique to each transaction.
  2. resp_desc: This represent description of the current transaction.
  3. status: This represents the status of the operation and it’s boolean: “True” for successful and “false” for failed.
  4. resp_code: This represent the response code from WebPAY. The code for successful transaction is “9000″ or “00″

After you get this response, you are required to do a service call to the URL: https://sandbox.interswitchng.com/quickteller.js/api/v2/<<tx_ref>>. The HTTP method is GET and the header must contain your two parameters:

  1. domain: The domain name where your request originated from. For instance: “example.com”
  2. hash: Use your mac key, given to you when you registered as a merchant and the tx_ref returned to compute a hash

Moving your SDK integration from Sandbox to Production

After you are done testing the application and you are ready to move your application to production, please replace the source of the imported JavaScript to:

<script id="qtScript" type="text/javascript" src="https://js.quickteller.com/v1" onload="Quickteller.initialize()"></script>

Also, change the service call URL to https://js.quickteller.com/api/v2/<<tx_ref>>

Try it out

To try out a sample web page which integrated Quickteller JavaScript SDK, please visit the URL: https://stagenet.interswitchng.com/snickapp/. To log-in, use the following details:

E-mail: test@gmail.com. Password: password.

Leave A Comment?

Ask Questions With: