Payment methods in mobile commerce applications. What are the best options out there?

Adding Stripe iOS library to the mobile commerce application

Why is in app payment flow so important?

Payment process is a crucial user experience flow element in any mobile commerce application. Mcommerce application has to have an easy to navigate screens, short user registration process, appealing and attractive design but in the end of the day its the number of sold items what matters to the bottom line. And this cannot be achieved without a payment step.

The nature of native mobile application is very different from the web based app (as it runs on the remote mobile device which application developer cannot control). This requires a specific approach to handling information security and data flow as well as user experience on mobile device screens with limited number of pixels available. Payment steps in best scenarios have to be non intrusive and maybe even transparent for the end user (with the final confirmation required of course).

Because of this and the back-end complexity of the actual payment processing the best option for majority mobile commerce applications is to integrate already existing mobile payment library or bundle provided by reliable 3rd party payment gateway. Such libraries are designed with the mobile architecture in mind, in most cases they have nice and simple UX controls in place and only few click checkout experiences.

In our today’s post I’ll list most popular payment libraries available for mobile commerce applications built on Apple iOS mobile platform (iPhones, iPads) and will do a technical review for one such library which enables mobile applications to accept credit card payments directly in app.

Apple IAP or 3rd party libraries?

First, the main factor to know about accepting payments in iOS based applications is that Apple do have a directive in the developer agreement which requires all the payments for digital purchases and purchases related to in app services to be made by using Apple IAP (in app purchase API) framework. It is available to all iOS developers as part of SDK. This means you have to use native payment process provided by Apple which in fact is very simple, native and usually one click payments experience as Apple does have around 200 million customer accounts with credit card details already pre filled. You will pay 30% fee on the sales amount. I’m writing a separate post here on Popular Owl Labs Blog to take a closer look at technical integration process for Apple IAP process.

But if your application is selling physical goods or services provided outside the mobile application you should choose how do you want to integrate payment process for such items or services. In fact, you must choose payment different from Apple IAP as otherwise your mobile application will be rejected during application review process according to Apple mobile application store review guidelines 11.3 (you will need Apple developer account in order to access this document).

What are the options for apps selling physical goods and services outside mobile applications? At the time of writing, most popular among mobile commerce apps and developers who create them are Stripe, Braintree and PayPal libraries.

Stripe does provide custom built view for collecting credit card (lets call them cc from now) details as well as iOS bindings so application owners and developers can design their own custom views and tokenize cc data before sending it to the back end servers (and this way staying PCI compliant). Braintree and PayPal provide libraries with predefined in app card data entry views which will kick in once user is ready to proceed with payment. Based on provided flexibility for collecting payment data in the next part of this post I’m going to do a technical review of Stripe iOS SDK integration from an app developer perspective.

Integrating Stripe payments to iOS mobile applications

First of all Stripe is known for their developer documentation which is nicely designed an very clear to read. This applies to iOS integration tutorial as well. We are going to add a payment option to our Flying Things mobile commerce app template and enable users to buy the physical item.

Before writing code first lets examine how Stripe credit card payments processing works technically.

App developer has to create Stripe account (quite smooth 2 step process, you only need email and password) and get public application key. This key can be used in non secure environments (internet, mobile apps) as it is public version of private key Stripe holds for your account.

Once you have key generated, Stripe provides service to tokenize credit card information. This means that your app will capture cc details, and will use Stripe service to store it on their servers (eliminating PCI DSS compliance troubles) by providing you a reference token. With this reference token you can then perform payment transactions on your backend servers referring to that specific card and create a single click purchasing experiences for your application users.

Knowing all this, I’m going to add and option to capture credit card details, tokenize them on Stripe servers and receive the cc token (witch we can then pass to our application backend for payment processing). This way if users of Flying Things mobile application have already added their credit card details app will provide them one click buying experience, if not, we are going to ask them to add cc details to the profile.

Flying Things iOS application template  Flying Things iOS application template single view

Coding

This part is about writing code for it. First step is to download and import Stripe iOS library which they also call Stripe iOS bindings. Its a set of classes and simple view created to handle collection of payment data. Once downloaded and imported to Xcode project make sure you have linked QuartzCore.framework and Security.framework in your target build phases as Stripe library relies on this framework.

We then add a UserSettingsController to the project which will be responsible for handling our add card button if user doesn’t have card added to their profile in our app. Once header and implementation files are created we add the following

 

#import "STPView.h"

@interface SingleItemViewController : UITableViewController <STPViewDelegate>
@property STPView *stripeView;

@end

 

Above code declares this controller to be a delegate for Stripe view. Meaning it will handle messages sent back by this view. We also declare a property variable stripeView to hold the link to view itself. Next, we add the code which starts and adds simple Stripe view element over the view we designed ourselves. At this point you can see the flexibility Stripe mobile payments library provides – we can design card details capturing view ourselves and still securely capture sensitive information.

 

// Add Stripe view to the stack
self.stripeView = [[STPView alloc] initWithFrame:CGRectMake(15,20,290,55)
                    andKey:@"your test public key"];
self.stripeView.delegate = self;
[self.view addSubview:self.stripeView];

 

Because we have declared our controller as a delegate for stripeView we can capture the message it will send us once user finished entering card details and card number is valid. This gives us a chance to enable or disable button which will perform card details tokinization so user can only hit the button once they finished entering all details

 

- (void)stripeView:(STPView *)view withCard:(PKCard *)card isValid:(BOOL)valid
{    
    // We can enable button if card is valid
    if (valid) {
        self.addCardButton.enabled = TRUE;
    } else {
        self.addCardButton.enabled = FALSE;
    }
}

 

Below are the print screens of mobile application views while user is entering cc details. Notice, I can maintain the custom flat design along the way as Stripe library allows for developers to do that.

Flying Things iOS application template with Stripe payments  Flying Things iOS template with Stripe payments not active

Once card details are fully entered by user application can perform card data tokenization with the method which will return success or error as a return

 

// Stripe inbuilt method for tokenizing card details
[self.stripeView createToken:^(STPToken *token, NSError *error) {
  [MBProgressHUD hideHUDForView:self.view animated:YES];

  // 2 scenarios, success and error
  // We have to handle both
  if (error) {
      [self receivedTokenizetionError:error];
  } else {
      [self receivedToken:token];
  }
}];

 

On the success we get encrypted token back from Stripe servers and our application now can send it to our backend for payment processing. Next time this user wants to buy something from our Flying Things application we dont have to ask them for their credit card details as we already have reference  token.

In our template I’m going to create customized alert message to just display the test token once its received (do not do this in the live environment). We now have Stripe payment card capturing enabled in iOS application.

Flying Things iOS application template with Stripe payments processing  Flying Things iOS application template with Stripe payments token

Summary and comments

The reason for this technical in-app payments review was to understand options for accepting payments in Apple iOS mobile applications. Apple application users according to many reports out there are the ones who spend the most money via mobile apps.

Your Apple iOS mobile application has to have external payment processing option if you are selling physical goods or services outside the app itself or application will be rejected from the app store (as per Apple app store review guidelines). In most cases its the best option to use already existing 3rd party payment gateway library which handles PCI security requirements. There are few options available and I did a technical review for the one which at the time of writing gives most flexibility to application developers and designers – Stripe iOS bindings.

Did you like this post?
Subscribe to our API first monthly newsletter!