Payment Gateway Integration in iOS and Android Apps
What is a payment gateway and how does it work? Why should you use it in your services? What payment gateway should you choose? How do you integrate it in your mobile application? Learn the answers!
Mobile payments have taken center stage lately. Providing a fast and easy way to make purchases, they help users save time and enjoy a pleasant shopping experience. Since many people prefer to shop online, mobile payment gateway integration offers businesses a great competitive advantage. Retail companies, e-commerce stores, freelancing platforms, travel agencies, firms belonging to the HoReCa industry, and many others will benefit from using it.
How to build a mobile app that accepts payments? How do you ensure user and money safety? How do you automate the payment process? We’ve got the answers! Find out what a payment gateway is, how it works, and how to implement it.
What is a payment gateway and why should you integrate it?
Funds movement in an interbank network is a complex sequence of operations that creates risks primarily associated with security assurance. Although, for the end user, a mobile money transfer takes only a few seconds–a huge amount of work is hidden under the hood.
Fortunately, the bank is responsible for all transactions and data safety. How do you deliver this information to the bank? How do you check that the user has funds on their account and the account is really live and belongs to the customer?
And what about storing mobile payment details? What will happen if the base gets into the hands of the wrong people? Who will be responsible for this? Mobile app developers and business owners should not bear the blame. Especially since not everyone can get the opportunity to carry out financial operations and store user and billing information.
In addition, to keep such data and work directly with banks, it is necessary to pass a complicated licensing procedure of PCI DSS (Payment Card Industry Data Security Standard), which can take months. A payment gateway is what will do everything for you. So, what does this actually mean?
A payment gateway is a service that performs the processing of electronic transactions. It acts as an online analogue of the terminal and is used for payment authorization. An important advantage is that the buyer only gives their personal information to the online payment system, not to each individual seller. What’s more, the seller does not need to spend money on software development and hardware or worry about customer data security.
Therefore, mobile app payment gateway assumes responsibility for instantly sending data to the bank, tracking the transaction status, and providing for its safety.
How does a mobile payment gateway work?
It's noteworthy that a mobile payment gateway is just a transport on which billing information comes into the network of financial organizations. Then, it is transmitted through the interbank network channels like Visa and MasterCard.
Eventually, funds go to the business owner’s bank, which happens without the participation of the payment gateway. The last one monitors the operation result and informs the end user about it. But what does the process look like?
Simply put, it includes three main steps: payment gateway, banking network, and a client’s account.
More precisely, the payment process using a mobile payment gateway looks as follows:
- The user (buyer) enters the required data in a mobile application;
- First of all, information about a transaction is sent to the gateway. Through it, it is delivered to the bank that issued a user payment card;
- The bank sends a request to the payment system (MasterCard, VISA, etc.), which estimates a client’s credit reputation and analyzes the terms of the transaction;
- The card issuing bank sends an authorization code that permits the payment system to commit the transaction;
- This code is sent to the payment gateway and from there to the seller. If the bank approves the transaction, the funds are debited from the client’s account.
If the quality of the Internet connection is good, all of these operations take just a few seconds.
Since a huge amount of money and personal information of a large number of people pass through the payment gateway, security is very important. Therefore, all traffic of payment systems passes through an HTTPS secure protocol.
In addition, the IP address verification mechanism and the request signature are often used. These and other systems comply with modern security requirements and guarantee complete data protection.
Choose the right payment gateway
At the moment, there are plenty of payment gateway implementations that have both strong and weak sides. For example, some support over a hundred currencies, some accept cryptocurrencies or even focus on them, some establish additional security safeguards. Since everything depends on your business needs, you should define your goals, estimate the budget, investigate various payment gateways for mobile apps, and choose the best option.
In this post, we’ve considered some of the most popular payment gateways, namely Stripe, PayPal, and Braintree. Take a look!
Stripe is a San-Francisco based company, whose software enables companies and individuals to easily make money transfers. Stripe gives technical and banking infrastructure for operating online payment systems. To ensure safe data storage and prevent fraud, the service constantly monitors the network for suspicious activities.
Currently, Stripe is used in more than 100 countries and supports debit and credit cards, Apple Pay, Android Pay, Bitcoin, and Amex Express Checkout. Lyft, Instacart, Postmates, DoorDash, TaskRabbit, and Grab are among its famous customers.
Stripe offers a standard commission of 2.9% from each financial operation $0.3 per money transfer. It also sets no fees for international payments. It is also noteworthy, that it gives some discounts for businesses that have a monthly income of $80,000.
Concerning the use of the Stripe payment gateway, a plus is that it is geared toward mobile application developers. First of all, it contains clear comprehensive documentation. Secondly, it provides programmers with iOS and Android SDKs (software development kits).
PayPal is one of the pioneering companies, that, at one time, set the standard in its niche. As for today, PayPal continues to be very popular for the same reasons it took a leading position in its early years: ease of use, security, and global reach. A resident of nearly any country can make purchases and order services in online stores all over the world without entering their card details.
A personal user ID is the only thing that needs to be entered. Thanks to powerful encryption tools and monitoring of suspicious activities, customers can be confident in the security of their funds and personal accounts.
The platform sets up a standard fee of 3.4% plus 30 cents for each financial operation. However, if the company’s monthly income is more than $3,000, you can switch to another plan that has a lower commission.
Now, PayPal is supported by more than 200 countries and unites 277 million users. Such giants as Walmart, eBay, and Adobe are among its biggest clients.
This online payment system includes iOS, Android, and Windows native clients, which software engineers use for integrating PayPal in a mobile or web application.
Braintree is a Chicago based company that focuses on delivering digital financial solutions for the e-commerce industry. In 2013, it was acquired by PayPal, which now can be integrated using Braintree SDK.
This solution is a great choice for startups and middle-sized companies. Braintree establishes a standard fee of 2.9% from each operation plus 30 cents per one transaction (like Stripe) and processes the first $50,000 payments for no fee.
The platform supports Apple Pay, Android Pay, and Alipay, accepts Visa, AMEX, Visa, JCB, MasterCard and other cards, and can be integrated with over 300 applications. Airbnb, Uber, Yelp, Dropbox, and other successful businesses use the service.
Braintree provides software engineers with the necessary SDKs and ability to write code in various programming languages for integrating a payment gateway in a mobile or web app. Its official website contains detailed documentation and clear instructions on the implementation.
How to integrate a payment gateway in an iOS app?
Each platform offers SDKs and detailed documentation on payment gateway integration in a mobile app. When you’re choosing a service, check whether it supports the required framework. Implementation details may slightly differ depending on the platforms and development tools used but in general, the scheme is the same. Therefore, let’s see how to integrate an online payment system in an iOS app on the example of Braintree.
In order to interact with Braintree, you need to update both a mobile application and the server software with which it works through the internal API.
Ultimately, a safe tripartite system is organized with each object playing its role:
- A client application–collects payment data such as credit card number, CCV, expiration date, and sends it to Braintree.
- The server part of the application–works with the previously collected payment data, for instance, receives a request from the client application to make a payment, and sends the corresponding request to Braintree.
- Braintree server–stores all unsafe payment information, takes over the execution of transactions.
In addition to these system elements, the concept of using Nonce instead of real billing details is important. Nonce is a kind of projection of payment information that is generated by Braintree based on data, once transmitted by the client application.
You can see the main interaction stages on the scheme below:
- Each time the application is started, we need a special to initialize the client-side SDK, which the client application requests from our server.
- Using the server-side SDK, the server application generates a token and returns it to the client.
- The client application sends the payment method details to Braintree. Hereupon, the configuration is complete. To carry out transactions, the client application will use the appropriate Nonce payment method instead of the actual payment details, a list of which is requested from Braintree.
- A request with payment data (for example) is sent to our server. In addition to Nonce, this request may also contain other data, such as the payment amount.
- The server application receives the request from the client application and generates a request for Braintree using the server SDK.
Implementation details may slightly differ depending on the operating system and development tools but in general the scheme is the same. On the official Braintreee dev portal, client-side and server-side SDK versions are available for various platforms and programming languages.
It works as follows: the customer sends you the card information, which is moved forward to the server for carrying out a transaction. Nonce is not stored anywhere and each time it is generated again.
Take a look at how to adopt a payment gateway in an iOS application:
1. Create a Sandbox account in Braintree.
After finalizing the registration (check out the instructions in the email), log in to the account and find yourself on the home page, where you can see the keys for further SDK configuration.
2. Next, you need to configure the server application. The Braintree’s official dev portal contains examples of the server-side SDK integration using various stacks of software development tools.
Regardless of the platform, you will need special keys, called Public Key, Private Key, and Merchant ID. To use them, pass the following way:
- Log in to your Braintree account
- Click the icon in the upper right
- Choose an API in the dropdown menu
- Find the API Keys section, click on View near the Public Key
- Copy the Public Key, Private Key, Merchant ID, and use them in the server configuration
3. The next step is to implement a client-side SDK in iOS. As mentioned earlier, one of the main tasks of the client application is to collect and send the account information to Braintree. There are two ways to organize such a UI:
- Use your own UI–in this case, you will have to take care of managing the life cycle of the corresponding requests. However, you can completely customize the app interface to your individual needs.
- Use the Braintree Drop-in UI, a set of ready-made UI solutions for payment organizations, which allows programmers to quickly build the interface.
4. In the example below, the Drop-in UI using CocoaPods is used to work with the Braintree client-side SDK, we import the SDK itself into the project and initialize it. SDK initialization requires a special token that can be requested from our server through the appropriate endpoint.
Starting with the fourth version of the client-side SDK, it can also be initialized with the special Tokenization Key, which can be configured in the account on the Braintree portal.
You can do so by carrying out the following path:
- Login to your Braintree account
- Click on the icon in the upper right
- Choose an API
- Find the Tokenization Keys section
- Click on the button + Generate New Tokenization Key (or use the existing one)
5. To work in Sandbox, we need the test billing information.
At this point, we have everything needed to implement the client.
The process of iOS SDK setup
1. Import BraintreeDropIn framework into your project
2. Thus, we need to get a Client Token in order to initialize the client SDK. This token must be generated on your server and returned to the client application upon the appropriate request. Starting from the fourth version, you can also apply a Tokenization Key to initialize the SDK, which can be generated in the Braintree control panel.
3. Next we need to configure the payment method. Since we use the Drop-in UI, all we need is to design and show the user a special controller from the SDK. There is no need to worry about sending requests to the Braintree API as Drop-in UI will perform it.
As a result of DropIn controller work, we receive Nonce, which we will use for further transactions.
4. Due to having Nonce, we are ready to make payments. To do this, our server must generate a corresponding request to Braintree. In addition to information about the payment amount, this request must contain Nonce, which will be received from our client application.
Now, we have the payment gateway integration ready.
How to integrate a payment gateway in an Android application?
Payment gateway integration in Android is almost the same as iOS integration (except for several steps)–but generally, you can find Android SDKs and developer instructions on official websites. Check out Bratintree website on how to intergate Braintree SDK for all popular platforms, and for Android as well
At the moment, we’re finalizing the creation of a mobile product that represents an Airbnb in the parking field. The product consists of iOS and web applications and enables users to reserve and pay for a parking place with a few clicks.
It also has a cool intuitive design and lets users view all parking lots in the US, including the address, price per hour, and how to get there. We decided to integrate Braintree as a great solution for startups and middle-sized companies.
Moreover, our team is building a mobile project, a travel experience marketplace, that gives users the opportunity to buy and sell engaging custom experiences right in the mobile app.
If you deal with any kind of transactions, you should allow for accepting payments in your mobile app. The use of a mobile payment gateway will become a competitive advantage as you will automate online money transfers by making them last several seconds instead of several days.
A payment gateway is a connecting link between the bank and customer that removes the headache associated with safe data storage, fraud detection, and transaction security. What’s important here is that there will be no need for the buyer to give personal information to each particular seller.
Get weekly updates on the newest design stories, case studies and tips right in your mailbox.
There are two ways of building complex systems—either using monolithic or microservices architecture. Which one to choose and when? Let’s figure it out!
Here are the top 10 reasons why Selenium is the best tool for testing web applications on the market (and 3 reasons that make it less perfect–but who cares when it’s so cool anyway? : ) )
Find out how to create a web and mobile design that will make the experience of interacting with your product pleasant and effective.