Slydepay Android App Integration Tutorial

Have you ever wondered how users could pay for services in your app with their mobile money accounts or credit/debit cards? Cue Slydepay to the rescue. Slydepay is one of the leading fin tech solutions in Ghana and they have an easy to use REST API that you can use to accept payments in your app. In this tutorial, we would create an app that would include a web view that would open the Slydepay payment site and redirect to a success page after users have made a successful payment.

The Slydepay REST API documentation is available here http://doc.slydepay.com/

What you need for this tutorial

  1. Android Studio

Creating a Slydepay Merchant Account

You can skip this part if you already have a Slydepay Merchant Account

  1. Visit https://app.slydepay.com.gh/auth/signup
  • Merchant URL: This is a website for your business

9. Click the save icon in the top right corner

Integrating Slydepay Into The Android Application

First download or clone the starter project from https://github.com/tonte/SlydepayAndroidTutorial1

File structure for the project

To begin, Open App.java and replace the credentials with your Slydepay merchant credentials.

public class App extends Application{public static String MERCHANT_KEY = “XXXXXXXXXX”;
public static String EMAIL_OR_MOBILE_NUMBER = “XXXXXXXXXX”;
public static String CALLBACK_URL = “XXXXXXXXXXXXX"
}

Now build and run the application, it should look like this.

Our app has a singular purpose, to enable users pay for a meal of waakye. From the Slydepay REST API docs (http://doc.slydepay.com/) we have to do the following to make a payment:

  1. After the user taps the button to make the payment, we make a call to Slydepay to create a payment invoice, this would return a payToken if successful.

Our application uses Retrofit 2 to make REST Calls. Retrofit is a REST Client for Android and Java by Square. It makes it relatively easy to retrieve and upload JSON (or other structured data) via a REST based web service.

To make our REST calls I have done some preliminary setup in the network and model folders. All our calls would be handled by the APIClient class. WebViewActivity is an activity that has an android webView that would display the Slydepay payment website.

Creating a Payment Invoice

Coming back to our application, we want Slydepay to create a payment invoice whenever a user decides to purchase waakye.

Right now nothing happens when you tap on the button so let’s add a click listener to payButton in MainActivity.java like this.

This creates a progress dialog for the user, then calls the createInvoice function.This doesn’t do anything for now, we’ll come back to this later.

If the createInvoice call is successful, it should return a payToken which we use to open the Slydepay payment page in our WebViewActivity so that the user can complete payment.

To facilitate this, lets edit the navigateToWebViewActivity function on line 54 in MainActivity.java like this

The function requires an orderCode and payToken as parameters. It then creates a new Intent for the WebViewActivity class with the orderCode, payToken and url (generated by adding the payToken to the Slydepay payment site url). This function starts the WebViewActivity and passes this data to it.

At this point our app still doesn’t do anything, so we have to edit the createInvoice function to actually make a call to Slydepay’s API.

According to the Slydepay docs, the createInvoice call requires the following parameters:

  1. emailOrMobileNumber: This is the merchant email/phone number you signed up as a merchant with

There are other parameters that aren’t required and we won’t be using them for this tutorial. So let’s edit createInvoice() with the code below.

Here we create a HashMap named parameters from the required parameters of the Slydepay API and the merchant credentials entered in App.java. The orderCode is a random unique identifier which we would use to for record keeping. We then tell our apiClient to make the REST call and pass the HashMap we created earlier as parameters.

apiClient.createInvoice(parameters).enqueue(new Callback<APIResponse>() {}

Our apiClient’s createInvoice function returns an APIResponse in a callback. APIResponse is a model that I created to handle all the Slydepay API Responses. From the Slydepay docs, all responses have the following fields

success:Boolean
result:Object,
errorMessage: String,
errorCode: String

success: the success field is true or false depending on whether the action is successful or not.

result : this contains a response object depending on which action is made (refer to the slydepay docs for clarification)

errorMessage and errorCode: this contains errors depending on which action is made (refer to the slydepay docs for clarification).

Next we write code to handle the response from creating the invoice . We override two functions from our webService client below (Retrofit). OnResponse() is called if the call is successful, OnFailure() is called if the call fails.

If the create invoice call is successful we would receive an InvoiceDetails object from Slydepay. InvoiceDetails is a custom class I created to handle the response.

Let’s edit onResponse and onFailure as follows:

In the code above, first we check to see if the invoice was created successfully. If so, using Gson, we serialize the response to json, then deserialize the json object into an InvoiceDetails object. We then fetch the orderCode and payToken from the InvoiceDetails object, then pass them to the navigateToWebViewActivity function we created earlier.

If the invoice wasn’t created successfully we check to see if an error message was sent, and if so, show that error message to the user.

Now run the app again, and tap on the pay button. If everything goes well, you should see the slydepay order page shown below

This means the WebViewActivity is working as it should and has successfully displayed the slydepay payment page.

Handling Payment

After the user has selected their preferred payment option and submitted the form, the slydepay web page is going to redirect to the callback url we set in when creating our slydepay merchant account. In WebViewActivity.java we are going to override the onPageStarted function to do this. Extend line 42 with:

This function is called anytime the webView navigates to a web page. If that webpage is our callback url, that means slydepay has processed the payment. To check if payment was successful we have to make another call to slydepay. To do so we have to tell our apiClient to make the check status call. From the slydepay docs, The check status call requires the following parameters.

so we write code to close the webView and create a HashMap with the parameters required above

Then we call the check status function in our apiClient and override the onResponse and onFailure functions like we did for the create invoice call before

According to the Slydepay docs, these are the various statuses you can receive from the checkStatus call.

Slydepay Transaction Status

Based on this, we can write code to handle these outcomes

So in the code above if the transaction status is CONFIRMED, then we call the navigateToSuccessScreen() function. This means the transaction was successful and we can then show a receipt.

Run the app and make the payment, you should see a success screen like the one below

Complete project files

You can download the finished project from https://github.com/tonte/SampleSlydepayAndroidIntegration

Going Live

When you are ready to go live and accept payment, you need to send an email to support@slydepay.com.gh with scanned copies of the following documents

  1. Copies of Business Registration

I strongly recommend getting a backend service and creating a callback url that Slydepay would hit whenever a payment is processed. This is very important for record keeping.

Developer who loves gaming, waakye and finding solutions to everyday problems