Cordova

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] (merchantxuat.interswitchng.com)

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

Replace clientId and clientSecret in the command below with your clientId and clientSecret

cordova plugin add https://github.com/techquest/cordova-payment-plugin-2.git

* Add ```android``` platform. Make sure to add the platform **after** adding the plugin.

```terminal
cordova platform add android

cordova plugin add https://github.com/techquest/cordova-payment-plugin-2.git

* Add ```android``` platform. Make sure to add the platform **after** adding the plugin.

```terminal

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 8.3.2 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-2.git

1 2	cordova plugin add https://github.com/techquest/cordova-payment-plugin-2.git

Add ios platform. Make sure to add the platform after adding the plugin.

cordova platform add ios

1 2	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 number of files like .framework file.
Drag all the .framework files from Finder to XCode’s Embedded Binaries section for your app’s TARGETS settings. This will be found under the General tab.
In the dialog that appears, make sure Copy items if needed is unchecked.
Important: You can only test the SDK on an actual device.

### <a name='SandBoxMode'></a> 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

```javascript
    function init(){
        var userDetails = {
            clientId: "IKIAF8F70479A6902D4BFF4E443EBF15D1D6CB19E232",
            clientSecret: "ugsmiXPXOOvks9MR7+IFHSQSdk8ZzvwQMGvd0GJva30=",
            paymentApi : "https://sandbox.interswitchng.com",
            passportApi : "https://sandbox.interswitchng.com/passport"
        };
        var initial = PaymentPlugin.init(userDetails);
    }

### <a name='SandBoxMode'></a> 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

```javascript

function init(){

var userDetails = {

clientId: "IKIAF8F70479A6902D4BFF4E443EBF15D1D6CB19E232",

clientSecret: "ugsmiXPXOOvks9MR7+IFHSQSdk8ZzvwQMGvd0GJva30=",

paymentApi : "https://sandbox.interswitchng.com",

passportApi : "https://sandbox.interswitchng.com/passport"

};

var initial = PaymentPlugin.init(userDetails);

}

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

To allow for Payment with Card
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
    }

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 paySuccess = function(response) {
        var purchaseResponse = JSON.parse(response); // transaction success reponse
        alert(purchaseResponse.message); 
    }
    var payFail = function(response) {
        alert(response); // transaction failure reponse
    }
    PaymentPlugin.pay(payRequest, paySuccess, payFail);

var paySuccess = function(response) {

var purchaseResponse = JSON.parse(response); // transaction success reponse

alert(purchaseResponse.message);

}

var payFail = function(response) {

alert(response); // transaction failure reponse

}

PaymentPlugin.pay(payRequest, paySuccess, payFail);

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
    }

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 payWithCardSuccess = function(response) {
    var purchaseResponse = JSON.parse(response); // transaction success reponse
    alert(purchaseResponse.message);
  }
  var payWithCardFail = function(response) {
    alert(response); // transaction failure reponse
  }
  PaymentPlugin.payWithCard(payWithCardRequest, payWithCardSuccess, payWithCardFail);

var payWithCardSuccess = function(response) {

var purchaseResponse = JSON.parse(response); // transaction success reponse

alert(purchaseResponse.message);

}

var payWithCardFail = function(response) {

alert(response); // transaction failure reponse

}

PaymentPlugin.payWithCard(payWithCardRequest, payWithCardSuccess, payWithCardFail);

Using the Plugin without UI (In PCI-DSS Scope: Yes)

Pay with Card

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 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 makePaymentSuccess = function(response) {
        var responseObject ={};
        if(response.responseCode !== undefined){
          responseObject = response;
        }else if (response.responseCode === undefined){
          responseObject = JSON.parse(response);
        }
        if(responseObject.responseCode) {
          if (responseObject.responseCode === "T0") {
            ons.notification.prompt(responseObject.message).then(
            function(otp) {
              responseObject.method = "makePayment";
              responseObject.otpValue = otp;
              authorizePurchase(responseObject);
            }
          );
          } 
        }
        else { 
          if(responseObject.detailMessage !== undefined && responseObject.detailMessage !== null ){
            alert(responseObject.detailMessage);  
          }else{
            alert(responseObject);
          }
        }       
        //var responseObject = JSON.parse(response);
        //the response object here contains amount, message, transactionIdentifier and transactionRef        
        alert(responseObject.message);
    }
    var makePaymentFail = function(response) {
        alert(response);
    }    
    PaymentPlugin.makePayment(purchaseRequest, makePaymentSuccess, makePaymentFail);

var makePaymentSuccess = function(response) {

var responseObject ={};

if(response.responseCode !== undefined){

responseObject = response;

}else if (response.responseCode === undefined){

responseObject = JSON.parse(response);

}

if(responseObject.responseCode) {

if (responseObject.responseCode === "T0") {

ons.notification.prompt(responseObject.message).then(

function(otp) {

responseObject.method = "makePayment";

responseObject.otpValue = otp;

authorizePurchase(responseObject);

}

);

}

else {

if(responseObject.detailMessage !== undefined && responseObject.detailMessage !== null ){

alert(responseObject.detailMessage);

}else{

alert(responseObject);

}

//var responseObject = JSON.parse(response);

//the response object here contains amount, message, transactionIdentifier and transactionRef

alert(responseObject.message);

}

var makePaymentFail = function(response) {

alert(response);

}

PaymentPlugin.makePayment(purchaseRequest, makePaymentSuccess, makePaymentFail);

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 authorizeRequest = {
      otp : results.otpValue,  // Accept OTP from user
      paymentId: results.paymentId, // Set the OTP identifier for the request
      transactionRef: results.transactionRef, // Set the unique transaction reference.
      authData: results.authData // Set request authData.
    }

var authorizeRequest = {

otp : results.otpValue, // Accept OTP from user

paymentId: results.paymentId, // Set the OTP identifier for the request

transactionRef: results.transactionRef, // Set the unique transaction reference.

authData: results.authData // Set request authData.

}

In the onclick event of the authorize otp button, use this code.

var authorizeSuccess = function(response) {             
     var responseObject = JSON.parse(response);
     var theTransactionRef = responseObject.transactionRef;     
     alert(theTransactionRef); // transaction success response
   }
    var authorizeFail = function(response) {      
      alert(response);                                // transaction failure response
    }   
    if(results.method ==="makePayment"){
      PaymentPlugin.authorizePurchase(authorizeRequest, authorizeSuccess, authorizeFail);        
    }
    else if (results.method ==="validateCard"){
      PaymentPlugin.authorizeCard(authorizeRequest, authorizeSuccess, authorizeFail);  
    }

var authorizeSuccess = function(response) {

var responseObject = JSON.parse(response);

var theTransactionRef = responseObject.transactionRef;

alert(theTransactionRef); // transaction success response

}

var authorizeFail = function(response) {

alert(response); // transaction failure response

}

if(results.method ==="makePayment"){

PaymentPlugin.authorizePurchase(authorizeRequest, authorizeSuccess, authorizeFail);

}

else if (results.method ==="validateCard"){

PaymentPlugin.authorizeCard(authorizeRequest, authorizeSuccess, authorizeFail);

}

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
    }

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 paymentStatusSuccess = function(response) {
        var responseObject = JSON.parse(response);
        alert(responseObject.message);
    }
    var paymentStatusFail = function(response) {
        alert(response);
    }
    PaymentPlugin.paymentStatus(paymentStatusRequest, paymentStatusSuccess, paymentStatusFail);

var paymentStatusSuccess = function(response) {

var responseObject = JSON.parse(response);

alert(responseObject.message);

}

var paymentStatusFail = function(response) {

alert(response);

}

PaymentPlugin.paymentStatus(paymentStatusRequest, paymentStatusSuccess, paymentStatusFail);

Articles

Github

Cordova Payment Plugin

First steps

Plugin installation instructions for Android

Plugin installation instructions for iOS

Using the Plugin with UI (In PCI-DSS Scope: No )

Pay with Card

Pay with Card

Using the Plugin without UI (In PCI-DSS Scope: Yes)

Pay with Card

Authorize Transaction With OTP

Checking Payment Status

Articles

How can we help?