How to integrate a payment gateway in a mobile app?

Ann Kravtsova photo
Anna Kravtsova Marketing Specialist
9 minutes to read

Understanding the nature of mobile app payment gateways

Every time you book an Airbnb room, buy kitchen stuff at Walmart or pay for a new car at eBay you deal with payment gateways (PGWs) – smart tools that facilitate purchase transactions.

Mobile shopping is the order of the day; millennials eagerly make purchases on the go using their smartphones.

The massive shift from desktops to mobile devices in recent years has forced retailers to develop e-commerce apps with built-in payment gateways.

How-to-integrate-a-payment-gateway-in-mobile-app10 How to integrate a payment gateway in a mobile app?
financesonline.com

Payment gateways — what are they?

Simply put, a payment gateway is a service that makes any financial transaction possible by transferring data between a device and an acquiring financial institution (usually a bank).

Payment gateways are important for apps designed for e-commerce, hotel reservation, flight booking, grocery shopping, etc.

Such e-commerce giants as Amazon, Groupon, H&M, Paytm are the leading providers of the apps in the realm of mobile shopping.

The gateways they use offer customers exciting buying experience without the distraction of the shopping itself.

how-to-integrate-payment-gateway-in-app How to integrate a payment gateway in a mobile app?
pay.amazon.com

Some of them have even developed their own payment gateways — high quality and reliable.

How-to-integrate-a-payment-gateway-in-mobile-app03-1100x664 How to integrate a payment gateway in a mobile app?
business.paytm.com

The mechanism

How do app payment gateways work?

The whole process takes a few seconds.

  • users add products they want to buy to the shopping cart while browsing a website — the cart links to with a payment gateway;
  • once clients input their card data into certain fields, the request goes to the gateway;
  • then this very request is sent to the processor of an acquiring bank;
  • next, Visa or MasterCard and an issuing bank validate the request. Once a transaction is approved, the bank sends an auth code to the retailer;
  • the customer’s card account is debited by the sum of purchase, and the seller gets the money moved to their accounts in a couple of days.
How-to-integrate-a-payment-gateway-in-mobile-app06 How to integrate a payment gateway in a mobile app?
Payment processing (bluesnap.com)

What account to choose?

Payments are kept on merchants’ accounts for a while as a gateway is processing them.

Sellers should choose a proper type of account they’re going to use because they are totally different.

Dedicated accounts are for those merchants who wish to keep a finger on the pulse. They give the owners more control over the money movement, however, they are more pricey and make the payment processing lengthier.

On aggregated merchant accounts, retailers can hold funds of different owners. This type is widely used due as it offers a quicker procedure. One possible drawback of aggregated accounts is that there are no regulations for the way how a provider handles your funds.

Consider all the ins and outs very carefully before you sign up with a payment processor.

Talk to us if you can't decide the best payment gateway solution for your business.
Get in touch

Top payment gateways

Before we move to the guidance notes for adding a payment gateway to a mobile app, let’s look at the world-leading service providers.

1. Stripe

User-friendly, easy and secure – this is all about Stripe. The pricing policy is standard with 2.9% plus + 30¢ per a card charge. Also, Stripe offers discounts when the total turnover of transactions increases.

how-to-integrate-payment-gateway-in-app-1-640x428 How to integrate a payment gateway in a mobile app?

 

2. PayPal

Probably, the best-known and the most popular provider, PayPal is packed with a plethora of features to any taste. Among the coolest functions are split purchase transactions, reporting tools, simple invoicing and payment procedures. PayPal charges 2.9% + $0.30 per a transaction with no hidden fees.

how-to-integrate-payment-gateway-in-app-2-640x348 How to integrate a payment gateway in a mobile app?

3. Amazon Payments

Amazon launched its payment gateway service long ago with the aim to provide the same payments standards on other sites.

The retailers who use the gateway have access to the personal shipping details of Amazon clients stored on their accounts. As in early examples, the fee is 2.9% + $0.30. 

how-to-integrate-payment-gateway-in-app-3-640x410 How to integrate a payment gateway in a mobile app?

4. Aduyen

Aduyen is globalising by leaps and bounds. It has solutions for enterprises of any size – small, mid and large.

The service comes in a bundle with an excellent functionality — all credit cards support, 3d secure payment, integration with CS-Cart/Multivendor, complete control of payments, etc.

how-to-integrate-payment-gateway-in-app-4-640x386 How to integrate a payment gateway in a mobile app?

5. Skrill

The competitive advantage of Skrill is its innovativeness and simplicity.

The provider offers payment services for digital wallets and quick checkouts.

how-to-integrate-payment-gateway-in-app-5-640x391 How to integrate a payment gateway in a mobile app?

The benefits of using Skrill are groovy reporting functionality, multilingual nature, tokenisation system.

The well-prepared documentation makes the mobile app payment gateway integration with Skrill a breeze.

So, who is the best?

In the beginning, it may be tough to find YOUR provider, but keep looking. Everything depends on the business requirements, and yours are specific.

To make an informed decision, you should specify what you need first and then begin your search. There are payment gateways that are specially tailored for online investment business, as well as services that are great for booking websites.

Then again, providers have different policies regarding different countries, so do your homework properly.

How to integrate a payment gateway in a mobile app: tips

PCI standards

Choosing a trustworthy provider is just a part of your success.

Beyond that, you have to make sure that all the financial transactions are carried out according to the PCI DSS standards compiled for protecting the info of a credit card holder.

To meet the PCI requirements, one has to create a secure network and test it regularly, implement encryption and access control elements into the security systems.

All this is for the sake of your reputation as a merchant.

SDKs for devs

This is the answer to the question “How to integrate a payment gateway in a mobile application?“.

Each service provider has elaborated software development kits (SDKs) and detailed documentation on a mobile app integration with the payment gateways for developers.

Usually, you can find them on official websites. Inside SDKs, libraries are processing the credit card details.

Kits allow creating forms where users input their card numbers.

These guidelines are clear and straightforward so that they leave no room for a long learning curve.

Once you’ve decided on a provider, check twice if it supports your app framework.

Let’s consider the example of Braintree and look at what it takes to implement its service in your iOS and Android apps.

Steps to make to integrate a payment gateway in an iOS app

1. Use the Drop-in UI to start accepting cards. For this, just embed a few lines into your code. Note that you should have iOS 9+.

If you use CocoaPods, add BraintreeDropIn to your Podfile and run pod install. In the case of Carthage, you need to add Github “braintree/braintree-ios-drop-in” to your Cartfile and remember to add these frameworks to your project.

2. Generate a client token with your server. You should obtain a client token generated by your server according to the request from your app. Generate a new client token upon every app launch.

How-to-integrate-a-payment-gateway-in-mobile-app12 How to integrate a payment gateway in a mobile app?
Braintree – Developers’ guide

If you use a Braintree tokenisation key, you can skip this step though.

This method is the easiest to get started.

However, one may want to build UI themselves and then do the tokenisation of the payment info.

Check how to do it on the examples of the code below.

How-to-integrate-a-payment-gateway-in-mobile-app05 How to integrate a payment gateway in a mobile app?
Braintree – Developers’ guide

3. Testing. Here you will need to sign up for a Braintree sandbox account. If you don’t have any yet, create one right now. Your credentials will include merchant ID, public and private keys. For tests use Braintree test card data and nonces.

4. When charging a card, use a payment method nonce on your server. It operates as follows: the client sends you the card info, you forward it to the server, and it uses the data for making a transaction.

How to integrate a payment gateway in an Android application

1. As is in the case with iOS, use Drop-in UI for connecting the PGW with your Android device. Add this piece of code in your build.gradle file.

How-to-integrate-a-payment-gateway-in-mobile-app18 How to integrate a payment gateway in a mobile app?
Braintree – Developers’ guide

2. Now you need to get a client token. Again likewise iOS, your server requests a client token once your app restarts. Just copy and paste this code into your app.

How-to-integrate-a-payment-gateway-in-mobile-app19 How to integrate a payment gateway in a mobile app?
Braintree – Developers’ guide

3. Present Drop-in UI to begin collecting payment info. Of course, you may want to use your custom UI with the tokenisation of the payment info.

4. Test how the integration works. You’ll need a Braintree account. Don’t forget to use the test card info as real numbers will work only out of the sandbox.

5. Start processing transactions using the payment method nonce. The mechanism is the same as it is in iOS.

How-to-integrate-a-payment-gateway-in-mobile-app13 How to integrate a payment gateway in a mobile app?
Braintree – Developers’ guide

What if I want to integrate a payment gateway in a hybrid app?

Meanwhile, there is a good number of tuts on implementing payment gateways into native applications, very little is said about how to do it in hybrid mobile apps based on Ionic, PhoneGap, React and other similar frameworks.

For instance, PayPal has a plugin for apps built on Cordova/Ionic. The repository of the plugin is stored at Github.

To integrate a payment gateway in an app, make these steps.

1. First, install Cordova and Ionic native plugins

How-to-integrate-a-payment-gateway-in-mobile-app21 How to integrate a payment gateway in a mobile app?

2. Then implement the plugin into your app’s NgModule.

How-to-integrate-a-payment-gateway-in-mobile-app07 How to integrate a payment gateway in a mobile app?

Another example is Razorpay, an Indian payment gateway, providing documentation SDK for apps on React Native. The installation goes through these three stages.

1. Add the gateway to your project. Run this command on the terminal from your project directory.

How-to-integrate-a-payment-gateway-in-mobile-app01 How to integrate a payment gateway in a mobile app?

2. Install the app. Here is the command for the automatic installation. If it doesn’t work, you can do it manually.

How-to-integrate-a-payment-gateway-in-mobile-app16 How to integrate a payment gateway in a mobile app?

3. Link iOS SDK. Within this step, you will need to import RazorpayCheckout module to your component (1) and use the payment options to call RazorpayCheckout.open (2). Then link iOS SDK.

How-to-integrate-a-payment-gateway-in-mobile-app04 How to integrate a payment gateway in a mobile app?
(1)
How-to-integrate-a-payment-gateway-in-mobile-app02 How to integrate a payment gateway in a mobile app?
(2)

Calculating the cost of the payment gateway integration

The process may require adding both basic and advanced features to your app, e.g. a storing facility for the card data, modules for managing refunds, channels for linking a financial institution with your app and others.

The time and cost of the gateway implementation depend on the complexity of your app.

If you hire a professional developer, it may take them up to 40 hours to finish everything and the price will depend on the hourly rate.

Doing it with a web-development agency will take more time and money, however, you get not only the coding service but everything else to have an excellent result: project management, testing, and useful suggestions.

In total, be ready to spend $3,000+.

The takeaway

In this article, we’ve tried to cover some essential aspects of the mobile app payment gateway integration.

As we mentioned earlier, the implementation process is pretty simple if you have some basic coding knowledge and SDKs are always there to help you.

Do you already have a hot project that is going to rock the market and don’t know how to integrate a payment gateway in your app?

We build hybrid mobile apps with React Native and integrate them with various third-party services. Reach out if you are looking for an expert tech team!
Get in touch
4.6/5 - (31 votes)

Book a call With our strategist

What we will talk about:
  • you and your business needs;
  • current plans, ideas, and strategy;
  • possible solution to your business challenge.

Describe your business requirements in enough details so we could understand your goal better.

*If an NDA should come first, please let us know.