Braintree Drop-In Mobile Payment Interface

I have been working with the team since 2016 to design a flexible plug-and-play checkout experience for a global merchant base. I led design for a major redesign of the product and continue to build upon that foundation to deliver ongoing value to our merchants.
Braintree Drop-In Mobile Payment Interface

All-in-one, or just one.

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 2016, 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.

Today, we continue to build on that foundation to deliver new capabilities that continue to enable great checkout experiences for our merchants.

Payment method picker.Vaulted payment methods, digital wallets and more.
Seamless experience.Customization options and an agnostic design to fit any brand experience.
Languages supported.Data localization for 23 languages, including right-to-left languages.
Payment method form.Robust form for cards, ACH, and multi-factor authorization for payments.
Digital wallet buttons.Apple Pay, Android Pay, Venmo, and PayPal.
Card scanning.Card.io is bundled with Drop-In out of the box.

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.

Braintree Drop-In Mobile Payment Interface
Drop-In Digital Wallet Solution

Securely save and manage payment methods.

As a buyer, an excellent checkout experience is not just about the first purchase; its also about making future purchases effortless and being in control of what payment data a vendor stores. With Drop-In, payment methods used during checkout are stored securely in a Braintree Vault, allowing buyers to checkout faster with their next purchase. Buyers can fully manage saved payment methods, and toggle and sort digital wallet options supported by the merchant.

Drop-In Mobile Visual Design
Theme
Tint Color

Out-of-the-box visual appearance options.

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 them on Android. Both platforms ship with three default themes — light, dark, and auto — that merchants can also use.

PayPal Custom Expiration Date Picker

A date picker just
for expiration dates.

One of my design goals with this product was improving the accuracy of the data provided by end-users. When looking at expiration dates, there were two standard UI patterns up for consideration: a picker and a number input — neither option met expectations due to slowness, allowing inaccuracies, or disrupting the input rhythm when completing a form.

Instead, we created a custom input method that captured the best characteristics of pickers and number inputs. Users could only enter valid expiration dates in the present or future and still maintain input rhythm during data entry.

Card.io Support in Drop-In Mobile Payment Interface

Card scanning.

Card.io is bundled with Drop-In, giving merchants the flexibility to offer customers a genuinely effortless checkout experience.

Multi-factor authorization for mobile payments.

Multi-factor authorization for payments.

Drop-In includes support for multi-factor authorization for payment methods that require it. MFA adds advanced security when making payments online, and meets the PSD2 requirement in the European Union.

Last, but not least.
The payment method form.

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.

PayPal Drop-In Card Form
Credit and Debit Cards
PayPal Drop-In Card Form with Advanced Security
Checking and Savings Accounts