Today, a mobile phone has become the primary means to access the Internet because, unlike a laptop, it is always at hand. Users willingly install and use mobile apps, enjoying an all-in-one experience here and now. It is convenient to order groceries while you are in a traffic jam or prolong gym membership while waiting in the queue.
Statistics tell us mobile sales will grow fast. In 2021, 2.14bn people will make purchases in the digital environment, and 64% of all sales will come from mobile devices. Given this, it’s no surprise that companies latch on to accepting payments in mobile app and integrating a payment gateway.
In this post, we’ll look through the prominent nature of mobile payment integration. If you have on the roadmap to implement it in your eCommerce app, read on.
What is a Payment Gateway?
A payment gateway is a kind of layer between the acquiring bank and the merchant. It is a link in the payment chain that enables a financial transaction by transferring data between the device and the acquiring financial firm. The payment gateway for mobile apps is an essential tool because it allows buyers to pay right away. If they cancel the order for some reason, the money is quickly returned to the buyer’s account, and they do not need to bother with trips to the bank or post office.
eCommerce giants and smaller merchants now resort to payment gateways to provide their customers with a seamless shopping experience. Some of them opt for off-the-shelf solutions, yet, others choose to make a custom gateway and do not depend on third-party providers.
How Does Payment Gateway Work?
Card payment in a webshop goes just in a few seconds. A user visits your app, selects the product, puts it into the shopping cart, and enters payment details. Shortly, they receive a payment confirmation. During this time, a series of events with many participants take place behind the scenes. This is what is happening.
- Customer buys online
- The payment gateway encodes the operation details
- The processing center checks the operation details
- The issuing bank approves or denies the transfer
- The payment system requests the remittance of funds
- The seller receives the money.
Some payment gateways oblige the seller to open a merchant account; some – not. The merchant account accumulates the buyer’s funds before they go to the seller’s bank account. However, many gateways make a direct transfer without an intermediate stop.
The scheme below shows how the mobile app payment gateway works and what participants are involved in the process.
Payment Gateway vs. Payment Processor
While surfing the payment gateway topic, many come across the concept of a payment processor and think they are the same sort of thing. People confuse these two because the payment processing software includes or integrates with payment gateways. However, the functions of the gateway and processor are diverse. The former is a mechanism that rejects or approves every transaction between your buyers and an app. And the latter completes the entire activity, i.e., processes the financial operation.
When a user inserts the card number, CVV, and expiration date, this information first runs into the payment gateway. The gateway takes this data from the online store and forwards it to the payment processor ensuring the transmission is safe. The processor obtains the data and redirects it to the payment system. Further, the PS interacts with the bank-issuer and bank-acquirer to obtain all approvals, do checks, and transfer funds.
How To Choose Right Payment Processor and Payment Gateway?
At this stage, you may be wondering what your choice preference should be: a payment gateway or payment processor. The short answer is both. To build a mobile app that accepts payments, you can do with neither of them as the former transfers payment data and the latter processes it. The bright side is that large vendors usually offer two in one solution. It means you only need to choose a provider, and it will deliver the end-to-end payment mechanism to your app. Next, we will look through the bestselling payment gateway providers and figure out which one will best suit you. Our review will address Stripe, PayPal, and Braintree.
Stripe Integration
Stripe is a global technology company that enables secure payments in web and mobile apps. Over the years, it has won the reputation of a reliable partner who delivers an excellent service to big and small businesses. Stripe payment gateway presents in 34 countries and serves more than 100K merchants. It processes payments via its own servers, so you will fall under the simplest fourth level of the PCI-DSS audit. Stripe supplies the merchant with a full-fledged antifraud system. The client frees from the necessity to store sensitive data on their side and entirely relies on the payment gateway vendor in terms of security.
Stripe is a very developer-friendly system with well-structured docs and guides. It provides seven server-side libraries and many UI libraries both for mobile and web apps. Their SDKs for mobile application development work with Apple Pay and Android Pay so that you can expand payment opportunities with these options.
Stripe focuses on international clients and can be utilized almost anywhere. It works with a hundred plus currencies and offers several payment methods. Except for debit and credit cards, it supports e-wallets and place-based payments such as Alipay, Giropay, Sofort, and others.
Stripe is best for companies that look for flexible software with many ways for customization. The Stripe gateway can be adapted for any business from the eCommerce store to the crowdfunding platform. Besides, it offers affordable fees with no hidden charges.
Transaction fee: 2.9% + 0,30$
Monthly fee: no
Chargeback: $15
Refund: fees not returned
International cards: free
Recurring billing: free
PayPal Integration
PayPal is a trendsetter in the online payments industry. Integrating PayPal in a mobile app means growing your brand confidence and reaching a vast audience of customers. PayPal serves more than 400K stores and is available in 190 countries of the world. It has multiple options for small, medium, and large merchants who sell physical and digital goods. PayPal plans cover Express, Standard, Pro, Advanced, Digital Goods, and Checkout solutions. The latter even has smart options that allow you to display relevant payment types based on the users’ location.
The Digital Goods gateway will be a perfect fit for namesake merchants, for instance, those who sell e-books, music, software, images, games, etc. The gateway offers a modified checkout flow that avoids entering shipping requisites. Thus, the users can quickly complete a purchase and get the desired item or content.
PayPal Express and PayPal Standard offer fast payment gateway integration with no coding skills. You just need to embed the PayPal button onto your page by copying a piece of JS code. Note, these methods imply the checkout goes on the PayPal site, not on yours.
PayPal Pro and PayPal Advanced provide a perfect UX by enabling the checkout on your page. However, you will need some time to integrate it into your app. Besides, these options are more expensive.
Transaction fee: 2.9% + 0,30$
Monthly fee: $30/ month (for Pro users)
Chargeback: $20
Refund: fixed fee returned
International cards: 1%
Recurring billing: $10 a month
Braintree Integration
Braintree is PayPal’s subsidiary that provides handy payment options for desktop and mobile platforms. Just like its predecessors, it gives a choice between regular and custom solutions. For example, you can integrate a payment gateway in a mobile app by choosing the drop-in or custom checkout flow. The first option means the users will see Braintree-native elements, while the second gives a fully customizable look and feel which harmoniously blends in your app UI.
Thanks to Braintree, users can switch the provider without changing their credit card details. This option is called credit card portability. It brings benefits to both customers and companies since the first ones have an extensive selection of tariffs and service plans, and the second prove their willingness to serve the interests of clients.
Braintree has fair prices. Transaction fees are the same as those of competitors. Unlike PayPal, Braintree doesn’t charge a monthly fee and works with businesses that sell risky products, such as gambling, pharma drugs, tobacco, etc.
Transaction fee: 2.9% + 0,30$
Monthly fee: no
Chargeback: $15
Refund: fees not returned
International cards: 1%
Recurring billing: variable
How To Integrate Payment Gateway in an iOS App?
Now let’s discover how to integrate payment gateway in a mobile app for an iOS device. We have recently incorporated the Braintree pays at the request of a client who owns a retail app. Below, we share our recent experience and provide steps to follow.
1.Decide on the way to collect payment details from a customer. You can use one of three sources:
Payment card or PayPal account. In this case, you have to add the drop-in UI
Apple/Google Pay or Venmo. This way works for the current checkout.
Payment card tokenization. Use it when launching custom UI.
2.Build the client-side portion for the iOS app
Start by attaching BraintreeDropIn to your Podfile. Next, make the app ask for a token from your server. Be advised, you should get the renewed token as often as the app is launched or once a day if it is launched not so often.
| – (void)fetchClientToken {
// TODO: Switch this URL to your own authenticated API NSURL *clientTokenURL = [NSURL URLWithString:@”https://braintree-sample-merchant.herokuapp.com/”]; NSMutableURLRequest *clientTokenRequest = [NSMutableURLRequest requestWithURL:clientTokenURL]; [clientTokenRequest setValue:@”text/plain” forHTTPHeaderField:@”Accept”]; [[[NSURLSession sharedSession] dataTaskWithRequest:clientTokenRequest completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) { // TODO: Handle errors NSString *clientToken = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding]; // As an example, you may wish to present Drop-in at this point. // Continue to the next section to learn more… }] resume]; } |
3.Attach the import statements to either class through the use of Braintree
| #import “BraintreeCore.h”
#import “BraintreeDropIn.h” |
4.Adjust UI
We recommend beginning with the drop-in because it supplies a fully-packed solution to accept payments via the Internet and requires a minimum effort to adjust. You can also opt for the drop-in result properties to upgrade your UI and tokenize the payment-related data outright.
| – (void)showDropIn:(NSString *)clientTokenOrTokenizationKey {
BTDropInRequest *request = [[BTDropInRequest alloc] init]; BTDropInController *dropIn = [[BTDropInController alloc] initWithAuthorization:clientTokenOrTokenizationKey request:request handler:^(BTDropInController * _Nonnull controller, BTDropInResult * _Nullable result, NSError * _Nullable error) { if (error != nil) { NSLog(@”ERROR”); } else if (result.cancelled) { NSLog(@”CANCELLED”); } else { // Use the BTDropInResult properties to update your UI // result.paymentOptionType // result.paymentMethod // result.paymentIcon // result.paymentDescription } }]; [self presentViewController:dropIn animated:YES completion:nil]; } |
5.Send payment method nonce to the server
| – (void)postNonceToServer:(NSString *)paymentMethodNonce {
// Update URL with your server NSURL *paymentURL = [NSURL URLWithString:@”https://your-server.example.com/checkout”]; NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:paymentURL]; request.HTTPBody = [[NSString stringWithFormat:@”payment_method_nonce=%@”, paymentMethodNonce] dataUsingEncoding:NSUTF8StringEncoding]; request.HTTPMethod = @”POST”; [[[NSURLSession sharedSession] dataTaskWithRequest:request completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) { // TODO: Handle success and failure }] resume]; } |
Tip: Preface with a sandbox account. When everything’s set up, switch to production and replace test credentials with the permanent ones.
Now it’s time to learn how to integrate payment gateway in Android app.
How To Integrate Payment Gateway in an Android Application?
Braintree gives SDKv3 for Android payment gateway integration.
- Gather payment information similar to how it was described in the iOS guide
- Build the client-side portion for the Android app
Gain a client token by requesting it from your server. You will also want to obtain configuration and authorization data stored inside this token. The code sample below illustrates the token request with the Android asynchronous HTTP client.
| AsyncHttpClient client = new AsyncHttpClient();
client.get(“https://your-server/client_token”, new TextHttpResponseHandler() { @Override public void onSuccess(int statusCode, Header[] headers, String clientToken) { this.clientToken = clientToken; } }); |
Tips:
Get another token with each app launch.
Use any data to compose a token – not necessarily client ID or merchant ID.
Use separate tokenization keys for Sandboxenvironment and Production environment. Take the keys in the Braintree control panel.
- Implement UI
Turn to drop-in UI if you aim to integrate payment gateway in Android application quickly. It has all the features to let shoppers enjoy buying from your shop. Besides, the setup is as easy as one-two-three. If you need a unique interface for your payment option, go on and use the drop-in result properties to refresh your UI and tokenize the payment information outright.
Once the user submits card data, your app will get paymentMethodNonce in the calling AppCompatActivity#onActivityResult. You will need to override it to receive the response or see the mistakes.
| – (void)postNonceToServer:(NSString *)paymentMethodNonce {
// Update URL with your server NSURL *paymentURL = [NSURL URLWithString:@”https://your-server.example.com/checkout”]; NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:paymentURL]; request.HTTPBody = [[NSString stringWithFormat:@”payment_method_nonce=%@”, paymentMethodNonce] dataUsingEncoding:NSUTF8StringEncoding]; request.HTTPMethod = @”POST”; [[[NSURLSession sharedSession] dataTaskWithRequest:request completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) { // TODO: Handle success and failure }] resume]; } |
4.Send payment method nonce to the server
| – (void)postNonceToServer:(NSString *)paymentMethodNonce {
// Update URL with your server NSURL *paymentURL = [NSURL URLWithString:@”https://your-server.example.com/checkout”]; NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:paymentURL]; request.HTTPBody = [[NSString stringWithFormat:@”payment_method_nonce=%@”, paymentMethodNonce] dataUsingEncoding:NSUTF8StringEncoding]; request.HTTPMethod = @”POST”; [[[NSURLSession sharedSession] dataTaskWithRequest:request completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) { // TODO: Handle success and failure }] resume]; } |
Tip: Real payment details are a bad match for the testing mode. Check that you use special CC numbers for the Sandbox account that Braintree supplies.
How JoinSoft Can Help You
I hope this guide helped clarify the characteristics of payment gateway integration in Android and iOS apps. We covered this with Braintree’s case, but you can follow a similar algorithm for any of the above systems. As you may have noticed, some technical skills are required for such a task. So, if you would rather pass it to tech guys, start scratch around for a reliable team.
Ar JoinSoft, we specialize in web and mobile app development. Our partners range from start-ups to corporations. If you need expert help in payment gateway integration, we’ll be glad to assist. Contact us for a free consultation and choose the perfect solution for your business.
