Braintree

Improve this doc

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.

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

Installation

1. Install the Cordova and Ionic Native plugins:
   

   $ ionic cordova plugin add https://github.com/taracque/cordova-plugin-braintree
   $ npm install --save @ionic-native/braintree@4
   

2. Add this plugin to your app's module

Supported platforms

• Android
• iOS

Usage

import { Braintree, ApplePayOptions, PaymentUIOptions } from '@ionic-native/braintree';

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 = '<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: '<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));

Instance Members

initialize(token)

Platforms:Android iOS 

Used to initialize the Braintree client. This function must be called before other methods can be used. As the initialize code is async, be sure you call all Braintree related methods after the initialize promise has resolved.

setupApplePay(options)

Platforms:iOS 

Used to configure Apple Pay on iOS. In order for Apple Pay payments to appear on the Drop-In Payments UI, you must initialize the Apple Pay framework before using the Drop-In Payments UI.

Do not turn on Apple Pay in Braintree if you don’t have Apple Pay entitlements - the Braintree module will reject the attempt to set up Apple Pay. Please refer to the Braintree Merchant Documentation to set up a Merchant Account.

Calling this function on Android is a noop so you can call it without having to check which cordova platform you are on! :D

presentDropInPaymentUI(options)

Platforms:Android iOS 

Shows Braintree’s Drop-In Payments UI. Apple Pay is only shown in the Drop In UI if you have previously called setupApplePay.

ApplePayOptions

PaymentUIOptions

PaymentUIResult