Braintree's Drop-in UI offers a complete, ready-made payment UI for a quick and easy way to accept payments. It's equally as easy to maintain PCI compliance with Drop-in; it is eligible for SAQ A since Braintree hosts the form that captures customer payment information.

The UI includes a card entry form and, if enabled, Android Pay, Apple Pay, and PayPal/Venmo buttons (Venmo only on mobile). When a user completes the UI, your client code obtains a payment method nonce for use on your server.

The Drop-in UI is the quickest way to start accepting payments, but depending on your business's needs, it might not be the best choice for you. Here's a general overview of the differences between a custom integration and the Drop-in UI.

Drop-in UI Custom Integration
  • More developer work needed than Drop-in UI
  • Create your own payment form with custom colors and layout
  • Collect any customer information that you’d like
  • Translate payment form to any language you want
  • Typically qualifies you for the SAQ A PCI compliance form on mobile and the SAQ A-EP form on web (unless using Hosted Fields)

Availability

Currently, the Drop-in option is available in 23 languages on iOS and Android, but only in English (US) on the web. We plan to add further multilingual support in future releases. Until then, if you wish to create a checkout in another language than English (US), we recommend using a custom client SDK integration.

Configuration

In order to use the Drop-in UI, you'll first need to generate a client token on your server.

If you're using our iOS SDK v4 or Android SDK v2, you may also use a tokenization key instead.

Customer ID

If you pass a customer_id when generating the client token, the Drop-in will display that customer's saved payment methods and automatically add any newly-entered credit card payment methods to their Vault record.

PayPal One Touch

To support PayPal One Touch™ payments in the Drop-in UI, make sure to follow the app switch setup instructions in the PayPal Client-Side Implementation guide.

Installation

note

The latest version of our Drop-in UI requires iOS 9+. You can find an example of the legacy Drop-in (iOS 7+) in our demo app.

There are several ways to include Braintree's Drop-in with your project.

CocoaPods

Ruby
pod 'BraintreeDropIn'

By default, Drop-in only ships with support for cards. You can include additional payment methods by adding their respective pods.

Ruby
pod 'Braintree/PayPal'
pod 'Braintree/Venmo'
pod 'Braintree/Apple-Pay'
pod 'Braintree/3D-Secure'

Carthage

Add github 'braintree/braintree-ios-drop-in' to your Cartfile, and add the relevant frameworks to your project.

You will need the following frameworks at a minimum:

BraintreeDropIn.framework
BraintreeUIKit.framework
BraintreeCard.framework
BraintreeCore.framework

For PayPal, you must add the following frameworks:

BraintreePayPal.framework
PayPalDataCollector.framework
PayPalOneTouch.framework
PayPalUtils.framework

For Apple Pay, you must add the following framework in addition to PassKit. See the Apple Pay Client-Side Implementation for more details.

BraintreeApplePay.framework

Client-side implementation

Import BraintreeDropIn and Braintree

Add the import statements to any class using Braintree.

Objective-C Swift
#import "BraintreeCore.h"
#import "BraintreeDropIn.h"

Starting Drop-in

Present BTDropInController to collect the customer's payment information and receive the nonce to send to your server. Saved payment methods will appear if you specified a customer_id when creating your client token.

Objective-C Swift
- (void)showDropIn:(NSString *)clientTokenOrTokenizationKey {
    BTDropInRequest *request = [[BTDropInRequest alloc] init];
    BTDropInController *dropIn = [[BTDropInController alloc] initWithAuthorization:clientTokenOrTokenizationKey request:request handler:^(BTDropInController * _Nonnull controller, BTDropInResult * _Nullable result, NSError * _Nullable error) {

        if (error != nil) {
            NSLog(@"ERROR");
        } else if (result.cancelled) {
            NSLog(@"CANCELLED");
        } else {
            // Use the BTDropInResult properties to update your UI
            // result.paymentOptionType
            // result.paymentMethod
            // result.paymentIcon
            // result.paymentDescription
        }
    }];
    [self presentViewController:dropIn animated:YES completion:nil];
}

Displaying the last used payment method

If your user already has an existing payment method, you may not need to show the Drop-in payment picker. You can check if they have an existing payment method using BTDropInResult:fetchDropInResultForAuthorization. A payment method will only be returned when using a client token created with a customer_id.

Objective-C Swift
- (void)fetchExistingPaymentMethod:(NSString *)clientToken {
    [BTDropInResult fetchDropInResultForAuthorization:clientToken handler:^(BTDropInResult * _Nullable result, NSError * _Nullable error) {
        if (error != nil) {
            NSLog(@"ERROR");
        } else {
            // Use the BTDropInResult properties to update your UI
            // result.paymentOptionType
            // result.paymentMethod
            // result.paymentIcon
            // result.paymentDescription
        }
    }];
}

Configuring payment methods

Additional steps are required for the Drop-in UI to accept payment methods other than cards. After completing the Drop-in installation instructions, follow the steps below for each payment method type.

PayPal and Venmo

To support PayPal One Touch™ and Venmo payments in the Drop-in UI, make sure to follow the app switch setup instructions in the Client SDK Setup guide and complete the full PayPal and Venmo integrations.

Apple Pay

If you've included the Apple Pay pod or framework in your project, Drop-in will show Apple Pay as a payment option as long as you've completed the Apple Pay integration and the customer's device and card type are supported.

If Apple Pay is enabled and you would like to conditionally hide the Apple Pay option, you can use the following method:

Objective-C Swift
BTDropInRequest *request = [[BTDropInRequest alloc] init];
request.applePayDisabled = YES;
important

If your customer selected Apple Pay as their preferred payment method, then result.paymentOptionType == .ApplePay and the result.paymentMethod will be nil. Selecting Apple Pay does not display the Apple Pay sheet or create a nonce – you will still need to do that at the appropriate time in your app. Use BTApplePayClient to tokenize the customer's Apple Pay information, and see our Apple Pay Guide for more information.

3D Secure

Drop-in supports 3D Secure verification. If you're using 3D Secure, enable it in your BTDropInRequest and set an amount:

Objective-C Swift
BTDropInRequest *request = [[BTDropInRequest alloc] init];
request.threeDSecureVerification = YES;
request.amount = @"1.00";

Themes

Drop-in is fully customizable, but we also provide Light and Dark themes. Drop-in will use the Light theme by default. To use the Dark theme instead, call this method before initializing Drop-in:

Objective-C Swift
// Set the theme before initializing Drop-in
[BTUIKAppearance darkTheme];

Customization

Use BTUIKAppearance to customize the appearance of Drop-in and other BraintreeUIKit classes. Be sure to call these methods before initializing Drop-in. View the list of customizable properties.

Objective-C Swift
[BTUIKAppearance sharedInstance].primaryTextColor = [UIColor greenColor];

Advanced fraud tools

Enable fraud tools for your Drop-in form by including the loading and initializing script on the client side. Then, use the server side handling when making a Braintree library call.

Custom integration

If the Drop-in UI doesn't fit your needs, develop your own custom integration using our client SDKs to accept credit cards, Android Pay, Apple Pay, PayPal, and Venmo payments. This allows you full control over the checkout process.

Using our native mobile SDKs, you can typically qualify for the SAQ A PCI compliance form regardless of whether you use a Drop-in or custom integration. However, our JavaScript SDK for the web typically qualifies you for the SAQ A-EP form. If you want to provide a custom experience on the web without extra PCI burden, consider using Hosted Fields.

note

By choosing a custom integration you will be responsible for the tokenization process for credit cards, PayPal, and Venmo.

See also

Still Have Questions?

If you can’t find an answer, give us a call at 877.434.2894 or contact our Support team