Table of Contents
Cordova Payment Plugin
Interswitch cordova payment plugin allows you to accept payments from customers within your cordova mobile application.
Please Note: The current supported currency is naira (NGN), support for other currencies would be added later
The first step to using the plugin is to register as a merchant. This is described here
First steps
- Create a new cordova project. To do so refer to the documentation here
Plugin installation instructions for Android
-
cd to the directory of your cordova project.
-
Add the cordova-payment-plugin from CLI, using this command
cordova plugin add https://github.com/techquest/cordova-payment-plugin.git
- Add
android
platform. Make sure to add the platform after adding the plugin.
cordova platform add android
- NOTE: To use the inapp change your manifest theme to android:theme="@style/Theme.AppCompat.Light"
Please Note: Ensure your cordova.js file is the first Javascript file to be included in your index.html
Plugin installation instructions for iOS
-
You'll need to have Xcode 7.3 or later installed.
-
cd to the directory of your cordova project.
-
Add cordova payment plugin
cordova plugin add https://github.com/techquest/cordova-payment-plugin.git
- Add
ios
platform. Make sure to add the platform after adding the plugin.
cordova platform add ios
-
In
Finder
, go to the YourCordovaApp/platforms/ios directory. Open the .xcodeproj file in XCode. A dialog may appear asking: Convert to latest Swift Syntax? Click the Cancel button. -
In
Finder
, go to the/platforms/ios/<NameOfApp>/Plugins/com.interswitchng.sdk.payment
directory. You should see a PaymentSDK.framework file. -
Drag the PaymentSDK.framework file from
Finder
to XCode's Embedded Binaries section for your app's TARGETS settings. -
In the dialog that appears, make sure
Copy items if needed
is unchecked. -
Important: With
XCode
still open, click the project to view its settings. Under the info tab find the Configurations section and change all the values forDebug
andRelease
to None. You can change it back once our setups are done.
The PaymentSDK.framework needs some Cocoapods dependencies so we'll need to install them.
-
Close Xcode. cd into
platforms/ios
directory -
Run:
pod init
- Open the Podfile created and replace
#
commented parts with the following.
source 'https://github.com/CocoaPods/Specs.git'platform :ios, "8.0"use_frameworks!
- Add the following to the Podfile, inside the first
target
block.
pod 'CryptoSwift'
pod 'Alamofire', :git => 'https://github.com/Alamofire/Alamofire.git'
pod 'SwiftyJSON', :git => 'https://github.com/SwiftyJSON/SwiftyJSON.git'
pod 'OpenSSL'
- Now run:
pod install
- After the pods are installed successfully you can go to the directory
platforms/ios
and open the<NameOfApp>.xcworkspace
file in XCode.
Using The Plugin in Sandbox Mode
During development of your app, you should use the Plugin in sandbox mode to enable testing. Different Client Id and Client Secret are provided for Production and Sandbox mode. The procedure to use the Plugin on sandbox mode is just as easy:
- Use Sandbox Client Id and Client Secret got from the Sandbox Tab of the Developer Console after signup (usually you have to wait for 5 minutes after signup for you to see the Sandbox details) everywhere you are required to supply Client Id and Client Secret in the remainder of this documentation
- In your code, override the api base as follows
{ var userDetails = clientId: "IKIAF8F70479A6902D4BFF4E443EBF15D1D6CB19E232" clientSecret: "ugsmiXPXOOvks9MR7+IFHSQSdk8ZzvwQMGvd0GJva30=" paymentApi : "https://sandbox.interswitchng.com" passportApi : "https://sandbox.interswitchng.com/passport" ; var initial = PaymentPlugin; }
- Follow the remaining steps in the documentation.
- call the init function inside the onDeviceReady function of your cordova app
- NOTE: When going into Production mode, use the Client Id and the Client Secret got from the Production Tab of Developer Console instead.
Using the Plugin with UI (In PCI-DSS Scope: No )
Pay with Card/Wallet
- To allow for Payment with Card or Wallet
- Create a Pay button
- In the onclick event of the Pay button, use this code
- Set up payment request like this:
var payRequest = amount : 100 // Amount in Naira customerId : 1234567890 // Optional email, mobile no, BVN etc to uniquely identify the customer. currency : "NGN" // ISO Currency code description : "Purchase Phone" // Description of product to purchase
- Create a button to make payment and use this code in the onclick event of the button
var { var purchaseResponse = JSON; // transaction success reponse ; } var { ; // transaction failure reponse } PaymentPlugin;
Pay with Card
- To allow for Payment with Card only
- Create a Pay button and set the payment request *Set up payment request like this:
var payWithCardRequest = amount : 100 // Amount in Naira customerId : 1234567890 // Optional email, mobile no, BVN etc to uniquely identify the customer. currency : "NGN" // ISO Currency code description : "Purchase Phone" // Description of product to purchase
- In the onclick event of the Pay button, use this code.
var { var purchaseResponse = JSON; // transaction success reponse ; } var { ; // transaction failure reponse } PaymentPlugin;
Pay With Wallet
- To allow for Payment with Wallet only
- Create a Pay button and set the payment request
- Set up payment request like this:
var payWithWalletRequest = amount : 100 // Amount in Naira customerId : 1234567890 // Optional email, mobile no, BVN etc to uniquely identify the customer. currency : "NGN" // ISO Currency code description : "Purchase Phone" // Description of product to purchase
- In the onclick event of the Pay button, use this code.
var { var purchaseResponse = JSON; // transaction success reponse ; } var { ; // transaction failure reponse } PaymentPlugin;
Validate Card
- Validate card is used to check if a card is a valid card, it returns the card balance and token
- Set up payment request like this:
var validateCardRequest = customerId : 1234567890 // Optional email, mobile no, BVN etc to uniquely identify the customer
- To call validate card, use this code.
var { var validateCardResponse = JSON; var token = validateCardResponsetoken; var tokenExpiryDate = validateCardResponsetokenExpiryDate; var balance = validateCardResponsebalance; var panLast4Digits = validateCardResponsepanLast4Digits; var cardType = validateCardResponsecardType; ; } var { ; // transaction failure reponse } PaymentPlugin;
Pay with Token
- To allow for Payment with Token only
- Create a Pay button
- Set up payment request like this:
var payWithTokenRequest = pan : 5123459987670669364 //Token amount : 100 // Amount in Naira currency : "NGN" // ISO Currency code cardtype : "Verve" // Card Type expiryDate : 2004 // Card or Token expiry date in YYMM format customerId : 1234567890 // Optional email, mobile no, BVN etc to uniquely identify the customer. panLast4Digits : 7499 //Last 4digit of the pan card description : "Pay for gown"
- In the onclick event of the Pay button, use this code.
var { var purchaseResponse = JSON; // transaction success reponse ; } var { ; // transaction failure reponse } PaymentPlugin;
Using the Plugin without UI (In PCI-DSS Scope: Yes)
Pay with Card/Token
- To allow for Payment with Card or Token
- Create a UI to collect amount and card details
- Create a Pay button
- Set up payment request like this:
var purchaseRequest = pan:5060990580000217499 //Card No or Token amount : 100 // Amount in Naira cvv : 111 // Card CVV pin : 1111 // Optional Card PIN for card payment currency : "NGN" // ISO Currency code expiryDate : 2004 // Card or Token expiry date in YYMM format customerId : 1234567890 // Optional email, mobile no, BVN etc to uniquely identify the customer.
var { var responseObject = JSON; //the response object here contains amount, message, transactionIdentifier and transactionRef ; } var { ; } PaymentPlugin;
Pay with Wallet
- To allow for Payment with Wallet only
- Create a UI to collect amount, CVV, expiry date and PIN and to display user's Payment Method(s). Use the code below to load the Payment Method(s)
var { ; var responseObject = JSON; // The responseObject here contains cardProduct, panLast4Digits and token, the token is used for making payment // Load the cardProduct on a dropdown list and use the token in making payment with wallet forvar i = 0; i < responselength; i++ console; console; console; } var { ; } PaymentPlugin;
- Create a Pay button
- Set up payment request like this:
var walletRequest = pan:ADA4C1FFE6DE40C584ABD3CBAFDA0D08 //Token from the wallet amount : 100 // Amount in Naira cvv : 111 // Card CVV pin : 1111 // Optional Card PIN for card payment currency : "NGN" // ISO Currency code expiryDate : 2004 // Card or Token expiry date in YYMM format requestorId : 1234567890 customerId : 1234567890 // Optional email, mobile no, BVN etc to uniquely identify the customer.
- In the onclick event of the Pay button, use this code.
var { var responseObject = JSON; ifresponseObjectotpTransactionIdentifier // handle OTP else ; } var { ; } PaymentPlugin;
Validate Card and Get Token
- To check if a card is valid and get a token
- Create a UI to collect card details
- Create a Validate/Add Card button
- Set up validate card request using this code
var validateCardRequest = pan : 5060990580000217499 //Token from the wallet cvv : 111 // Card CVV pin : 1111 // Optional Card PIN for card payment expiryDate : 2004 // Card or Token expiry date in YYMM format customerId : 1234567890 // Optional email, mobile no, BVN etc to uniquely identify the customer.
- In the onclick event of the Validate/Add Card button, use this code.
var { var validateCardResponse = JSON; // transaction success reponse // The response object contains fields transactionIdentifier, transactionRef, // message, balance, token, tokenExpiryDate, panLast4Digits and cardType. var token = validateCardResponsetoken; var tokenExpiryDate = validateCardResponsetokenExpiryDate; var balance = validateCardResponsebalance; var panLast4Digits = validateCardResponsepanLast4Digits; var cardType = validateCardResponsecardType; // Save the token, tokenExpiryDate, cardType and panLast4Digits // in order to pay with the token in the future. ; } var { ;// transaction failure reponse } PaymentPlugin;
Authorize Transaction With OTP
- To authorize transaction with OTP
- Create a UI to collect OTP
- Create authorize otp button
- Set up otp request using this code
var authorizeOtpRequest = otp : 123456 // Accept OTP from user otpTransactionIdentifier: "2121324" // Set the OTP identifier for the request transactionRef: "13324444" // Set the unique transaction reference.
- In the onclick event of the authorize otp button, use this code.
var { var responseObject = JSON; // transaction success reponse var theTransactionRef = responseObjecttransactionRef; ; } var { ; // transaction failure reponse } PaymentPlugin;
Checking Payment Status
- To check payment status
- Create a UI to collect transaction identifier
- Create payment status button
- Set up payment status request using this code
var paymentStatusRequest = transactionRef : 117499114589 // The transaction unique reference. amount : 100 // The transaction amount
- To check the status of a payment made, use the code below
var { var responseObject = JSON; ; } var { ; } PaymentPlugin;