{"id":5039,"date":"2015-08-25T06:00:00","date_gmt":"2015-08-25T13:00:00","guid":{"rendered":"http:\/\/thinkapps.com\/blog\/?p=5039"},"modified":"2015-09-10T11:19:53","modified_gmt":"2015-09-10T18:19:53","slug":"payments-app-definitive-guide","status":"publish","type":"post","link":"https:\/\/thinkapps.com\/blog\/development\/payments-app-definitive-guide\/","title":{"rendered":"The Definitive Guide to Adding Payments to Your Web or Mobile App"},"content":{"rendered":"

This post is part of our Building Blocks series<\/a><\/span>, which provides comprehensive guides on common features of web and mobile apps. First was chat<\/a><\/span>, and now we’re diving into how to\u00a0build payments into your app.\u00a0<\/i><\/p>\n

There are predictions that this will be the year that mobile payments are finally considered the norm. The\u00a0<\/span>2014 Forrester report<\/span><\/a> predicts that by 2019 mobile payments to big and small businesses will more than double. That not only means that we\u2019ll be increasingly paying for things on small screens, but also that we won\u2019t have much patience for it. <\/span><\/p>\n

In-person payments are getting more streamlined with tap-to-pay. Meanwhile, you still have to pull out your card and type 20-something digits to buy something online.<\/span><\/p>\n

On a phone, those 20 digits are even more tedious, so a 5-second lag or glitch is usually enough to convince us not to buy.\u00a0<\/span>We\u2019re looking at our phones while waiting in line, killing time at the office, or brushing our teeth. Our interactions with them are frequent, but not really prolonged \u2014 so that 5-second lapse starts to feel like an eternity. <\/span><\/p>\n

Given all that, your payment process across all platforms (especially mobile) has to be extra intuitive, simple, and above all, trustworthy.<\/span><\/p>\n

From design to implementation, we explored everything you need\u00a0to know before and after adding payments into your web or mobile app.<\/h3>\n

\"Definitive<\/a><\/h3>\n

When It Comes to Payment Form UX, No Detail Is Too Small<\/h2>\n

To meet\u00a0all the necessary UX criteria for a payment form,\u00a0attention to detail is pivotal. <\/span><\/p>\n

Pete Keen<\/a> is a software developer and author of Mastering Modern Payments<\/i><\/a>. He gave us insight into\u00a0the dos and don\u2019ts of adding payments to your web or mobile app.<\/strong><\/p>\n

As he put it, \u201cThe entire flow, from adding something to a cart to putting in a credit card number, is vital to optimize for your own customers.\u201d <\/span><\/p>\n

Automate Formatting<\/h3>\n

Simple things like formatting can be enough of a hangup to make credit card forms a headache. Users often have to ask themselves: Do you enter spaces in the credit card number? And do you put in a slash or a hyphen in the expiration date? <\/span><\/p>\n

A great way to nix this user debacle is to automate the formatting. For example, with every four digits they type in the credit card number, a space pops up automatically. (This also means one less field for the user to fill in.)<\/span><\/p>\n

Another way to use automation to ease indecision is by distinguishing the card type by the first four digits. Each type of card (Visa, MasterCard, Amex) has a signature pattern in the <\/span>first four digits<\/span><\/a>. When your user types theirs\u00a0in, you can automate an icon for their card type, ensuring that you accept it and providing real-time verification.<\/span><\/p>\n

Reassure Your User<\/h3>\n

When the user is disclosing their personal account information, it\u2019s nice to include the payment amount on the screen so they know exactly how much they\u2019re paying beforehand, even if they\u2019ve seen this amount on the previous screen. <\/span><\/p>\n

This kind of clarity and transparency also comes into play on your actual completion button. If money will be taken from the user\u2019s account at the end of the form, the button should signify that with the word \u201cPay.\u201d This way your user doesn\u2019t think there\u2019s another screen or step to finalize their purchase. <\/span><\/p>\n

Communicate Errors with Options<\/h3>\n

Errors happen and it can either be a fault of the user, the bank, or your server. Rather than just asking them to re-enter their information or come back later, communicate the issue as best you can so that they can fix it or call their bank.<\/span><\/p>\n

\u201cI think one thing that’s sometimes overlooked is failure recovery,” explained Keen. “If a charge fails, it’s really important to inform the user in a way that lets them try again.\u201d <\/span><\/p>\n

This can be as simple as highlighting the error in red or explaining any server issues as clearly as possible\u00a0to reassure the user it’s not their\u00a0fault. <\/span><\/p>\n

Build for Trust<\/h3>\n

If you\u2019re using a third-party service, extra security measures like SSL certificate<\/a> and HTTPS<\/a> will already be taken care of for you. But small icons can go a long way to continue to put people at ease. <\/span><\/p>\n

\u201cGreen locks and security seals actually do quite a bit of good,” said Keen. “Customers will typically look for those two things, and if they’re not there, cart abandonment rates go way up.\u201d<\/span><\/p>\n

Don\u2019t Make Things\u00a0Too<\/em> Easy<\/h3>\n

You want the payment process to be simple, but not so much so that the user feels like they were just pick-pocketed. <\/span><\/p>\n

Keen said, \u201cI think it should be as easy to pay as the customer is comfortable with. For example, Apple Pay<\/a> lets a customer pay without handing their credit card over.\u201d<\/span><\/p>\n

Stripe<\/a> is an example of what can happen when\u00a0payments get too easy. <\/span><\/p>\n

\u201cWhen Stripe rolled out a version of their Checkout tool that could optionally save a user’s credit card for use across different sites, customers sometimes got confused and upset because the site that they were purchasing on already had their card number, even though this was the first time they had purchased there,\u201d Keen explained. <\/span><\/p>\n

So, be careful not to over-automate.<\/span><\/p>\n

\"Definitive<\/p>\n

It\u2019s Not All About the Money<\/h2>\n

UX concerns\u00a0don\u2019t end with your user hitting \u201cPay.\u201d Keen said that the receipt they get in their email is another opportunity to increase engagement. <\/span><\/p>\n

Company Insight<\/h3>\n

Kindful<\/a>, which develops software for non-profits,\u00a0<\/span>recommends using receipts<\/span><\/a> as a way to increase people\u2019s knowledge of your brand. The goal is to not only\u00a0make donors\u00a0feel happy about supporting\u00a0a great cause, but also to encourage a lasting, positive relationship (aka, more donations). <\/span><\/p>\n

Kindful suggests including\u00a0short videos, testimonials, photos, or blog posts along with your\u00a0receipts.<\/span><\/p>\n

Community Growth<\/h3>\n

A simple CTA<\/a> in your transactional email can lead the user\u00a0to follow you on various social platforms. Bonus points if following gives them VIP leads on discounts and sales. <\/span><\/p>\n

You can also use this space to encourage people to invite friends or share on social media for extra perks.<\/span><\/p>\n

Ask for Feedback<\/h3>\n

By allowing users to actually respond to your transactional email or at least offering a direct email address, your relationship with them doesn\u2019t end after the virtual <\/span>cha-ching<\/span><\/i>. <\/span><\/p>\n

Instead, you can ask them how you\u2019re doing or to leave a review of the\u00a0product. This\u00a0not only opens the door to further\u00a0engagement, but also\u00a0makes them feel like part of your brand.<\/span><\/p>\n

Choosing the Right Payments Platform<\/h2>\n

Keen\u2019s parameters for selecting a payments platform\u00a0are to choose a system that suits your and your customers’ needs. <\/span><\/p>\n

\u201cIntegration speed is also pretty important,” he added. “Having a pre-made integration or a reasonable API is important for getting payments up and running as fast as possible.\u201d<\/span><\/p>\n

To help you choose the right one, here’s the scoop on\u00a0today’s most common payments platforms.<\/h3>\n

Stripe \u2014 The Basics<\/h2>\n

Stripe<\/span><\/a> is certainly one of the most popular payment vendors out there.\u00a0<\/span><\/p>\n

It\u2019s one of the simplest services to implement, with easy drag-and-drop functionality to get you going quickly on an iOS or Android mobile app.\u00a0They also support Apple Pay<\/a> and Android Pay<\/a>, with the addition of just a couple of lines of code.<\/span><\/p>\n

In addition, they\u00a0offer <\/span>Stripe Checkout<\/a>,<\/span> which is a professionally and beautifully-designed payment form that works right off the shelf for both web and mobile.<\/span><\/p>\n

\"Definitive<\/p>\n

Stripe and Users<\/h3>\n

Stripe provides a quick, familiar, and comfortable interface using <\/span>Checkout<\/span>, and support for Apple Pay and Android Pay allows users to leverage their devices\u2019 unique hardware (i.e Apple fingerprint) to pay for items across multiple\u00a0platforms<\/a>. <\/span><\/p>\n

Stripe and Companies<\/h3>\n

Stripe is considered the payment method of choice for companies like Kickstarter<\/a>, Pinterest<\/a>, Lyft, and Instacart.<\/span><\/p>\n

Stripe is\u00a0a\u00a0powerful business asset because it not only collects payments immediately, but also allows for deferred payments. A\u00a0<\/span>good use case would be Lyft, which charges the rider a nominal fee upfront\u00a0and then later\u00a0charges the total fee at the completion of the ride. <\/span><\/p>\n

Stripe also provides <\/span>excellent reporting<\/span><\/a> such as monthly summaries, as well as integration with accounting software like Quickbooks. All transactions on Stripe are protected from\u00a0fraud (PCI-DSS security compliance), and the platform provides\u00a0high levels of availability and uptime. <\/span><\/p>\n

Stripe has a more comprehensive SDK and documentation than Braintree (below), including the ability to work with coupons and vouchers at the API level, whereas Braintree requires users to log in through a dashboard to accomplish that. <\/span><\/p>\n

Stripe Setup<\/h3>\n

Getting started with Stripe Checkout is as easy as writing a few lines. Here\u2019s a JavaScript snippet:<\/span><\/p>\n

form<\/span> action=”<\/span>\/charge<\/span>” method=”<\/span>POST<\/span>“><\/span>
\n<\/span> \u00a0<<\/span>script<\/span>
\n<\/span> \u00a0\u00a0\u00a0src=”<\/span>https:\/\/checkout.stripe.com\/checkout.js<\/span>“<\/span>
\n<\/span> \u00a0\u00a0\u00a0class=”<\/span>stripe-button<\/span>“<\/span>
\n<\/span> \u00a0\u00a0\u00a0data-key=”<\/span>pk_test_6pRNASCoBOKtIshFeQd4XMUh<\/span>“<\/span>
\n<\/span> \u00a0\u00a0\u00a0data-image=”<\/span>\/square-image.png<\/span>“<\/span>
\n<\/span> \u00a0\u00a0\u00a0data-name=”<\/span>Demo Site<\/span>“<\/span>
\n<\/span> \u00a0\u00a0\u00a0data-description=”<\/span>2 widgets ($20.00)<\/span>“<\/span>
\n<\/span> \u00a0\u00a0\u00a0data-amount=”<\/span>2000<\/span>“><\/span>
\n<\/span> \u00a0<\/<\/span>script<\/span>><\/span>
\n<\/span><\/<\/span>form<\/span>><\/span><\/em><\/p>\n

Stripe also supports recurring billing through Stripe\u2019s <\/span>Subscriptions API<\/span><\/a>, allowing companies to bill customers daily, weekly, monthly, or yearly. The API even takes care of the tricky math of calculating when a customer changes their subscriptions mid-month, reconciling how much the customer owes automatically. You can take a peek at all the different types of Stripe subscriptions by <\/span>consulting their subscription offers<\/span><\/a>.<\/span><\/p>\n

To learn more about integrating\u00a0Stripe into your web or mobile app, see Pete Keen’s book mentioned above.<\/span><\/p>\n

Stripe SDK Support<\/h3>\n

Stripe\u00a0supports an <\/span>extensive range of libraries<\/span>, including REST, Go, Java, Node, PHP, Python, Ruby, iOS, and Android. Consult <\/span>Stripe\u2019s library documentation<\/a>\u00a0<\/span>for the complete list. <\/span><\/p>\n

Stripe is currently available in 21 countries and 139 currencies, making it\u00a0one of the most diverse payments platforms out there. Stripe also converts foreign currencies into the company\u2019s account currency\u00a0for\u00a0a 2% fee. <\/b><\/em><\/p>\n

Stripe Pricing<\/h3>\n