You can collect customer payment information via the client SDK in a number of ways:
- Add the Drop-in UI with a few lines of code to get a full-featured checkout with credit card and PayPal payments.
- Accept more payment types with your existing checkout form by adding buttons for PayPal, Apple Pay, Android Pay, and Venmo.
- Rolling your own checkout UI? Use credit card tokenization to save customer card information.
iOS SDK setup
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.
These instructions are for the latest version of our iOS SDK using our new Drop-in. For instructions using a different version of our SDK, use the selector near the top of this page.
For additional requirements and installation options, see the iOS Client SDK Guide.
Using CocoaPods
Add BraintreeDropIn to your Podfile:
pod 'BraintreeDropIn'Then run pod install.
Using Carthage
Add github "braintree/braintree-ios-drop-in" to your Cartfile, and add the frameworks to your project.
You will need the following frameworks at a minimum:
BraintreeDropIn.framework
BraintreeUIKit.framework
BraintreeCard.framework
BraintreeCore.framework
BraintreePaymentFlow.framework
PayPalOneTouch.framework
PayPalDataCollector.framework
PayPalUtils.frameworkGet a client token
Client tokens are optional: Starting with v4 of our iOS SDK, you can initialize Braintree with a tokenization key instead of a client token — if you are using a tokenization key, you may skip this section.
Your server is responsible for generating a client token, which contains the authorization and configuration details that your client needs to initialize the client SDK.
Your app should request a client token from your server. This example uses our sample integration server; please adapt it to use your own backend API.
- (void)fetchClientToken {
// TODO: Switch this URL to your own authenticated API
NSURL *clientTokenURL = [NSURL URLWithString:@"https://braintree-sample-merchant.herokuapp.com/client_token"];
NSMutableURLRequest *clientTokenRequest = [NSMutableURLRequest requestWithURL:clientTokenURL];
[clientTokenRequest setValue:@"text/plain" forHTTPHeaderField:@"Accept"];
[[[NSURLSession sharedSession] dataTaskWithRequest:clientTokenRequest completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
// TODO: Handle errors
NSString *clientToken = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
// As an example, you may wish to present Drop-in at this point.
// Continue to the next section to learn more...
}] resume];
}You should obtain a new client token often, at least as often as your app restarts. For the best experience, you should kick off this network operation before it would block a user interaction.
You must generate a client token on your server once per user checkout session. The endpoint we provide in this example is for demonstration purposes only.
Try it now
We generated a demo client token for you so you can jump right in. This is for testing purposes only!
NSString *clientToken = @"eyJ2ZXJzaW9uIjoyLCJhdXRob3JpemF0aW9uRmluZ2VycHJpbnQiOiI1Yjg3MmE3M2Q4ODI3YTQ2MWEwOGVjYzZmOTUyNjI5MTdlMWJlZmU4NDZjOGU4YmQ3YjZjZmY3N2FjNTAwMTI3fGNyZWF0ZWRfYXQ9MjAxOC0xMS0yMFQxMjoyMjozMS4yMzk2MDM0OTIrMDAwMFx1MDAyNm1lcmNoYW50X2lkPTM0OHBrOWNnZjNiZ3l3MmJcdTAwMjZwdWJsaWNfa2V5PTJuMjQ3ZHY4OWJxOXZtcHIiLCJjb25maWdVcmwiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tOjQ0My9tZXJjaGFudHMvMzQ4cGs5Y2dmM2JneXcyYi9jbGllbnRfYXBpL3YxL2NvbmZpZ3VyYXRpb24iLCJncmFwaFFMIjp7InVybCI6Imh0dHBzOi8vcGF5bWVudHMuc2FuZGJveC5icmFpbnRyZWUtYXBpLmNvbS9ncmFwaHFsIiwiZGF0ZSI6IjIwMTgtMDUtMDgifSwiY2hhbGxlbmdlcyI6W10sImVudmlyb25tZW50Ijoic2FuZGJveCIsImNsaWVudEFwaVVybCI6Imh0dHBzOi8vYXBpLnNhbmRib3guYnJhaW50cmVlZ2F0ZXdheS5jb206NDQzL21lcmNoYW50cy8zNDhwazljZ2YzYmd5dzJiL2NsaWVudF9hcGkiLCJhc3NldHNVcmwiOiJodHRwczovL2Fzc2V0cy5icmFpbnRyZWVnYXRld2F5LmNvbSIsImF1dGhVcmwiOiJodHRwczovL2F1dGgudmVubW8uc2FuZGJveC5icmFpbnRyZWVnYXRld2F5LmNvbSIsImFuYWx5dGljcyI6eyJ1cmwiOiJodHRwczovL29yaWdpbi1hbmFseXRpY3Mtc2FuZC5zYW5kYm94LmJyYWludHJlZS1hcGkuY29tLzM0OHBrOWNnZjNiZ3l3MmIifSwidGhyZWVEU2VjdXJlRW5hYmxlZCI6dHJ1ZSwicGF5cGFsRW5hYmxlZCI6dHJ1ZSwicGF5cGFsIjp7ImRpc3BsYXlOYW1lIjoiQWNtZSBXaWRnZXRzLCBMdGQuIChTYW5kYm94KSIsImNsaWVudElkIjpudWxsLCJwcml2YWN5VXJsIjoiaHR0cDovL2V4YW1wbGUuY29tL3BwIiwidXNlckFncmVlbWVudFVybCI6Imh0dHA6Ly9leGFtcGxlLmNvbS90b3MiLCJiYXNlVXJsIjoiaHR0cHM6Ly9hc3NldHMuYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJhc3NldHNVcmwiOiJodHRwczovL2NoZWNrb3V0LnBheXBhbC5jb20iLCJkaXJlY3RCYXNlVXJsIjpudWxsLCJhbGxvd0h0dHAiOnRydWUsImVudmlyb25tZW50Tm9OZXR3b3JrIjp0cnVlLCJlbnZpcm9ubWVudCI6Im9mZmxpbmUiLCJ1bnZldHRlZE1lcmNoYW50IjpmYWxzZSwiYnJhaW50cmVlQ2xpZW50SWQiOiJtYXN0ZXJjbGllbnQzIiwiYmlsbGluZ0FncmVlbWVudHNFbmFibGVkIjp0cnVlLCJtZXJjaGFudEFjY291bnRJZCI6ImFjbWV3aWRnZXRzbHRkc2FuZGJveCIsImN1cnJlbmN5SXNvQ29kZSI6IlVTRCJ9LCJtZXJjaGFudElkIjoiMzQ4cGs5Y2dmM2JneXcyYiIsInZlbm1vIjoib2ZmIn0=";The above demo client token is for temporary use. You must change this client token in order to process payments with your Braintree sandbox or production account.
Present Drop-in UI
At this point, you are ready to collect payment information from your customer.
Drop-in is the easiest way to get started. It provides a fully fledged payments experience out of the box. You can also choose to create a custom UI and then tokenize the payment information directly.
Add the import statements to any class using Braintree.
#import "BraintreeCore.h"
#import "BraintreeDropIn.h"- (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];
}Test your integration
Create a sandbox account
If you haven't already, sign up for a free Braintree sandbox account:
Sign Up for a Braintree Sandbox Account
Log in to obtain your sandbox API credentials. You'll need your:
- Sandbox merchant ID
- Public key
- Private key
Use these credentials for your development and testing.
When you go live, you will need to replace your sandbox API credentials with production API credentials.
Test values
When testing in the sandbox, be sure to use our test card numbers (e.g. 4111111111111111) and nonces (e.g. fake-valid-nonce). Real payment method data will not work in the sandbox. See our Testing page for more details.
Send payment method nonce to server
Send the resulting payment method nonce to your server (again, adapt this example to your own setup):
- (void)postNonceToServer:(NSString *)paymentMethodNonce {
// Update URL with your server
NSURL *paymentURL = [NSURL URLWithString:@"https://your-server.example.com/checkout"];
NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:paymentURL];
request.HTTPBody = [[NSString stringWithFormat:@"payment_method_nonce=%@", paymentMethodNonce] dataUsingEncoding:NSUTF8StringEncoding];
request.HTTPMethod = @"POST";
[[[NSURLSession sharedSession] dataTaskWithRequest:request completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
// TODO: Handle success and failure
}] resume];
}world.greeted = true
At this point, you should have a working client-side checkout flow. When your user provides payment information, you receive a payment method nonce and send it to your server.
Next, your server closes the loop by using the payment method nonce to create a transaction.