Braintree - Drop-In Native Checkout UI

Braintree
Drop-In Native Checkout UI

A complete, ready-made checkout UI that offers a quick and easy way to securely accept payments online.

Drop-In is a complete, ready-made payment UI that offers a quick and easy way to securely accept payments. The product includes card and ACH data entry forms, payment method picker, payment method manager, and support for digital wallet buttons for PayPal, Venmo, Apple Pay, and Google Pay.

When we initially redesigned the product in 2017, we discovered that merchants needed more flexibility. So, everything is modular. Drop-In is designed to be used as a whole or any combination of its parts. Merchants are free to use everything they need, and none of what they don't in order to provide the best checkout experience to their customers.

Fast forward to today, the team continues to build on that foundation to deliver new capabilities that enable great checkout experiences for our merchants. This version is the last version I worked on prior to joining the Enterprise Merchant Team.

Company

Braintree
2017 – 2020

Role

Design, Prototyping, UX Strategy

Agnostic by Design

Drop-In UI is intentionally designed to feel like a system component. Every merchant has a unique brand and aesthetic, so we consciously decided to defer the visual design to the platform. This decision ensures that our product can seamlessly blend into any checkout experience and deliver a great buying experience to customers on behalf of our merchants.

Although the UI is designed to feel like a native system component, we also wanted to blur the lines between our product and the merchants' app. Drop-In fully supports native appearance APIs on iOS, and inherit's the merchant's app theme on Android. Both platforms ship with three default themes — light, dark, and auto — that merchants can also use.

Braintree - Drop-In Mobile Theme Modes - Light
Braintree - Drop-In Native Customization Options - Green

Componentization

When talking to our merchants during the initial redesign, one of their top requests was to use the credit card form on its own. Either they weren't interested in other payment methods, or they already had separate integrations for them. The modularity of Drop-In enables these types of merchants the plug-and-play integration they were craving and also helps streamline PCI DSS compliance for their business.

We also expanded our card form capabilities to include other payment methods where a user would need to supply data to make a purchase.

Braintree - Drop-In Date-Picker Component
Date-Picker Component
Braintree - Drop-In Shipping Form Component
Shipping Address Component
Braintree - Drop-In Multi-Factor Payment
Multi-Factor Payment Authorization
Braintree - Drop-In Card Form Component
Card Form Component
Braintree - Drop-In Card Scanning
Card Scanning
Braintree - Drop-In ACH Form Component
ACH Form Component