Web Payment SDK Quickstart

Welcome to the new and improved Interswitch Web Payment integration. The Web Payment SDK is for merchants who have goods and services to sell on the internet. The Web Payment SDK empowers them to accept payment from customer’s Payment Instruments (Payment Cards, Mobile Money and other Payment Tokens) that are available the Interswitch network. This SDK will enable merchant to integrate to WebPay effortlessly. So let’s get started!

Step 1

You will be required to register your business. Merchant registration form looks like the form shown below. The following information will be required:

qt-merchant-form1

Company Name

Supply your company name. Note that we will ask for your account number. The company name you supplied must match the name registered with the Corporate Affairs Commission (CAC). Also, the “Company Name” must match the name on the “Account Number” that will be supplied later on.

Company Email

Supply an active email where you (or the merchant) can get notification mails.

Company Phone

Supply a valid phone number you (or the merchant) can be reached on.

Website domain

This is the website where this merchant will be accepting payment. Please note that merchant will not be able to accept payments on other website other than this one. This mean the merchant “Payment Code” issued to you will only work on this Website domain. It should be in the format: www.hostname.com. No “http://” and no “/mypage”.

RC Number

This is your Corporate Affairs Commission (CAC) RC number. Please check with CAC to confirm your RC number.

Bank

This is the bank where your “Account Number” resides. This is the bank where all your payments will go to.

Account Number

This is the “Account Number” where all your payments will go to.

Register your business on Interswitch Network here. A “Payment Code” will be issued to you at the end of your registration. Please keep the “Payment Code” we will need it very soon.

Step 2

You will be required to create an App for your project. You must select “Payment Web Application” as your application type when prompted to create an App. You will notice that your merchant “Payment Code” is already linked to this new App. If you have not done step 1 above, click on the link shown on the “Create your new app” page to create your Merchant “Payment Code”. See step 1 above to understand each of the Merchant registration form fields. App creation page looks like the image shown below:

ap-form

App Name

At the time of payment checkout, this is the name that will be shown to your customer.

App Description

A brief description of what your Application does or what you are selling.

App Logo

Upload a 200 x 200 application logo.

Create a Payment Web SDK App here. A client ID and secret key will be issued to you. Your Merchant “Payment Code” will be automatically assigned to your “Payment Web Application” App.

Step 3

Add “Pay with QuickTeller” button to your web App.

    1. Add an empty container tag to house the button that you wish to include (at the location you wish the button to be). It could be a
      div-tag or a p-tag and it must have an id which is used to identify it in QuickTeller Javascript SDK. A sample container is shown below:
    2. Add the following tag to import the QuickTeller JavaScript just before the closingtag on your page:The tag imports the version 1 (v1) of the Quickteller Javascript file, then it executes the QuickTeller.initialize() function to setup the environment.

Add the following immediately after the line above:

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

document.onreadystatechange = function () {
if (document.readyState === "complete") {
Quickteller.checkout({
"clientId": "client-id",//get this from developer console
"paymentCode": "payment-code",//merchant payment code
"buttonSize": "small",//button size
"redirectUrl": "site-redirect-url;",//site redirect url
"amount": "amount",//amount
"customerId": "customer-ID",//customer id
"mobileNumber": "customer-mobile-number",//customer's mobile
"emailAddress": "customer-email"//customer's email
}, "btn_div_mini", function () {
//fn called before loading payment pop-up.
}, function (status) {
//fn called just before closing payment pop-up.
});
}
}

</script>

[/code]
Summary of Parameters
paymentCode

This is the merchant “Payment Code” assigned to you when you registered as a merchant

redirectUrl

This is the URL of your server Web Application

amount

This is the value of goods your customer wants to pay for

customerId

This is a unique identifier of your customer. E.g. If someone is paying for NEPA bill, customerId will be the customer’s meter number.

mobileNumber

This is a mobile number the customer can be reached on. Quickteller uses the number to send SMS notification about the payment to the customer.

emailAddress

This is an email address the customer can be reached on. Quickteller uses the email to send email notification about the payment to the customer.

Leave A Comment?

Ask Questions With: