Introducing the New Braintree Drop-in Mobile Payment UI

At Braintree, we focus on crafting smooth checkout experiences for our merchants and their customers; our products offer an easy way for merchants to start accepting payments with just a few lines of code. However, as the mobile landscape evolved and we continued to support more payment methods, it became clear that our Drop-in mobile payment UI needed to scale to meet new requirements and industry changes. An app’s checkout should feel like a natural extension; in our newest version, we’ve worked to make our Drop-in UI truly seamless.

For the second iteration of our Drop-in UI, we went back to the drawing board and took a hard look at what the first version did well and where it fell short. We reached out to merchants who use this feature and asked them what worked for them and what we could do better. We also retooled the API to make our Drop-in UI flexible enough to fit into almost any app’s checkout flow.

We’ve added tools to create a personalized checkout experience with three main components:

  1. A set of views and view utilities to fetch and display a customer’s payment methods within almost any checkout flow.

  2. A payment picker to allow customers to select payment methods vaulted with Braintree or add new ones.

  3. A card entry form to let customers easily add new cards.

Every component of the Drop-in UI can be customized. On iOS, the payment method picker ships with a light and dark theme, while on Android, the picker and card form will inherit the base app’s theme, allowing the Drop-in UI to blend with almost any app’s aesthetic.

We’ve added the ability for the Drop-in UI to fetch a Drop-in Result, which contains information about the current customer’s default payment method. If the customer specified in the client token has a Braintree vaulted payment method, the Drop-in result will contain a nonce that’s ready to transact with, and some helper functionality to display that payment method in the checkout flow. This means that returning customers won’t need to see the payment picker if they want to use their default Braintree vaulted payment method.

Changes include:

  • All new modernized and simplified API
  • Flexible payment picker
  • Card form for easy credit and debit card entry
  • All new expiration date picker
  • Support for 23 languages, including right-to-left languages
  • Apple Pay and Android Pay support
  • Customizable fonts and colors on iOS and Android
  • Standalone payment icons, localization, form fields, to help you more easily build great-looking checkout flows
  • Fully open-source
  • card.io support on both iOS and Android
  • UnionPay support

Our Drop-in UI is available today for iOS and Android. Check out the docs for iOS and Android to learn how to add it to your mobile app. A new version of our Drop-in UI is now also available for the web -- visit our GitHub page to learn more.

We’re excited to see what kind of interesting checkout experiences you’ll create!

***
Product & Development Team Here are the makers and the innovators who create the seamless experiences you see and use every day. We invent and initiate...rinse and repeat. More posts by this author

You Might Also Like