From Simple to Invisible Part 2: Magic Revealed

Now that you understand why invisible apps deliver such great user experiences, you might wonder how you can incorporate this into your own app. In this post, we’ll take a deep dive into which tools or APIs are available at your disposal.

As magical as Google Now may seem, the logic that powers it isn’t all that complicated. One of my favourite Google Now features (and one I depend heavily on) is the notification telling me when I should leave for my next calendar event. This is not just a simple, ‘Meeting with Girlfriend in 15 mins’ notification, but a callout of, ‘Based on current conditions, and your preferred method of transportation, you need to leave in 5 minutes to arrive on time.’ This is incredibly useful because it incorporates factors like traffic and duration of commute. More impressively, these calculations are all performed in the background, notifying the user of only the end result.

Let’s break this down from a technical perspective to see how any third-party app can accomplish the same thing:

1) UI-less interface:
The Android platform allows developers to create UI-less apps -- a.k.a services -- that can execute in the background. This is most ideal if your app does not require user interaction. To declare a service, simply add the element in the Android manifest:

<manifest ... >  
  ...
  <application ... >
      <service android:name=".ExampleService" />
      ...
  </application>
</manifest>  

2) Retrieve destination from calendar events and use Google Maps to determine ETA

This step is fairly trivial. Android conveniently provides APIs for retrieving the user’s calendar events and getting the estimated time from origin to destination.

3) Lastly, if your app is UI-less, you can still alert the user with notifications:

NotificationManager notificationManager = (NotificationManager) getSystemService(NOTIFICATION_SERVICE);  
Notification notification = new Notification(/* your notification */);  
PendingIntent pendingIntent = /* your intent */;  
notification.setLatestEventInfo(this, /* your content */, pendingIntent);  
notificationManager.notify(/* id */, notification);  

This elegant app experience can also be applied to payment. Uber, another immensely popular app, incorporates this into their checkout flow. Once you set up your payment method inside of the Uber app, it will be used to pay for all future rides - automagically. This is extremely convenient as we no longer have to worry about digging for exact cash. Let’s explore how this works behind the scenes.

Storing payment methods

The Braintree Vault allows merchants to securely store payment methods and retrieve them at a later time. This means that, as a merchant, you don’t need to repeatedly handle any sensitive data, but instead you can offload that part to Braintree. This seamless payment experience can be accomplished in two simple steps:

Server SDK setup

Depending on the server language you’re working with, you can simply pull the code snippets we provide and drop them into your app. Below is a code snippet in Javascript for Node apps:

var braintree = require('braintree');  
var gateway = braintree.connect({  
    environment:  braintree.Environment.Sandbox,
    merchantId:   'xxxxxxxxxx',
    publicKey:    'yyyyyyyyyy',
    privateKey:   'zzzzzzzzzzz'
});

1) Create a payment method using the nonce (a string returned by the client SDK that depicts the customer’s payment method details) and attach it to a customer (referenced by ‘customerId’). Through this function call, the customer is automatically stored in the Braintree Vault. This is the same thing that happens when you add a credit card to your Uber account:

gateway.paymentMethod.create({  
  customerId: "12345",
  paymentMethodNonce: "nonce-from-the-client"
}, function (err, result) { });

2) When you need to charge the customer at a later time, you can create a transaction using the same ‘customerId’. Similarly, as you complete your Uber ride, this is how Uber charges your credit card without you needing to input your details again:

gateway.transaction.sale({  
  customerId: "12345",
  amount: "10.00"
}, function (err, result) {
});

And voila, that’s it. Though it’s simple to implement, the payment experience is vastly improved. And the more seamless the experience is, the more enticing it is for users to return.

Have you thought about how this payment experience can be applied to a variety of industries and businesses? Wouldn’t it be great if we could just walk in and out of a movie theatre and have the tickets charged to our credit card? Or not needing to pull out our wallets when we buy drinks at the bar? I don’t know about you, but I can’t wait for this experience to be replicated everywhere.

What are some payment/checkout scenarios you wish to be made invisible?

***
Alan Wong Alan works closely with APAC developers to provide support and guidance on enabling frictionless payment experiences. On the side, he enjoys prototyping crazy ideas on mobile and hardware platforms. More posts by this author

You Might Also Like