Braintree

This plugin enables the use of the Braintree Drop-In Payments UI in your Ionic applications on Android and iOS, using the native Drop-In UI for each platform (not the Javascript SDK).

Ionic Native utilizes a maintained fork of the original cordova-plugin-braintree

For information on how to use Apple Pay with this plugin, please refer to the plugin documentation

NOTE: This is not a complete payments solution. All of the Braintree client-side UIs simply generate a payment nonce that must then be processed by your server to complete the payment. See the Braintree Node server documentation for details and a sample Express server that implements the required functionality.

https://github.com/taracque/cordova-plugin-braintree

Stuck on a Cordova issue?

Don't waste precious time on plugin issues.

If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.

Installation #

Capacitor
Cordova
Enterprise

$ npm install cordova-plugin-braintree $ npm install @ionic-native/braintree $ ionic cap sync

$ ionic cordova plugin add cordova-plugin-braintree $ npm install @ionic-native/braintree

Supported Platforms#

Android
iOS

Capacitor#

Not Compatible

Usage#

React#

Learn more about using Ionic Native components in React

Angular#

import { Braintree, ApplePayOptions, PaymentUIOptions } from '@ionic-native/braintree/ngx';
constructor(private braintree: Braintree) { }
...
// Your Braintree `Tokenization Key` from the Braintree dashboard.// Alternatively you can also generate this token server-side// using a client ID in order to allow users to use stored payment methods.// See the [Braintree Client Token documentation](https://developers.braintreepayments.com/reference/request/client-token/generate/node#customer_id) for details.const BRAINTREE_TOKEN = '&lt;YOUR_BRAINTREE_TOKEN>';
// NOTE: Do not provide this unless you have configured your Apple Developer account// as well as your Braintree merchant account, otherwise the Braintree module will fail.const appleOptions: ApplePayOptions = {  merchantId: '&lt;YOUR MERCHANT ID>',  currency: 'USD',  country: 'US'}
const paymentOptions: PaymentUIOptions = {  amount: '14.99',  primaryDescription: 'Your product or service (per /item, /month, /week, etc)',}
this.braintree.initialize(BRAINTREE_TOKEN)  .then(() => this.braintree.setupApplePay(appleOptions))  .then(() => this.braintree.presentDropInPaymentUI(paymentOptions))  .then((result: PaymentUIResult) => {    if (result.userCancelled) {      console.log("User cancelled payment dialog.");    } else {      console.log("User successfully completed payment!");      console.log("Payment Nonce: " + result.nonce);      console.log("Payment Result.", result);    }  })  .catch((error: string) => console.error(error));