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.
Stuck on a Cordova issue?
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic's experts offer official maintenance, support, and integration help.
Installation
Supported Platforms
- Android
- iOS
Usage
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 = '<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));