Capacitor Braintree Plugin

A Capacitor plugin for the Braintree mobile payment processing SDK with 3D secure and Data Collecting.

Features

• Google Pay Integration (Android)
• Apple Pay Integration (iOS)
• 3D Secure Verification (iOS)
• Device Data Collection
• Payment Method Tokenization

Installation

npm install capacitor-braintree
npx cap sync

Android Setup

1. Add Google Pay Configuration

Add the following to your android/app/src/main/AndroidManifest.xml:

<activity android:name=".MainActivity">
    <!-- ... existing activity configuration ... -->
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="${applicationId}.braintree" />
    </intent-filter>
</activity>

2. Configure Google Pay

Make sure you have:

• Google Pay API enabled in your Google Cloud Console
• A valid merchant ID configured
• Google Play Services installed on test devices

iOS Setup

1. Add Apple Pay Capability

In Xcode:

1. Select your target
2. Go to "Signing & Capabilities"
3. Add "Apple Pay" capability
4. Configure your merchant ID

2. Configure URL Schemes

Add the following to your Info.plist:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string></string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>$(PRODUCT_BUNDLE_IDENTIFIER).braintree</string>
        </array>
    </dict>
</array>

Usage

Initialize the Plugin

import { Braintree } from 'capacitor-braintree';

// Initialize with your client token
await Braintree.initialize('your-client-token');

Check Payment Availability

// Check if Google Pay is available (Android)
const canMakePayments = await Braintree.canMakePayments({ requireExistingPaymentMethods: false });
console.log('Can make payments:', canMakePayments.value);

Setup Apple Pay (iOS)

await Braintree.setupApplePay({
  merchantId: 'merchant.com.yourcompany',
  currency: 'USD',
  country: 'US',
  cardTypes: ['visa', 'mastercard', 'amex']
});

Launch Google Pay (Android)

const result = await Braintree.launchGooglePay({
  amount: '10.00',
  currency: 'USD',
  environment: 'TEST', // or 'PRODUCTION'
  requiredShippingContactFields: ['emailAddress', 'phoneNumber'],
  cardTypes: ['VISA', 'MASTERCARD']
});

if (!result.userCancelled) {
  console.log('Payment successful:', result.nonce);
  console.log('Device data:', result.deviceData);
}

Launch Apple Pay (iOS)

const result = await Braintree.launchApplePay({
  amount: '10.00',
  primaryDescription: 'Your Order',
  requiredShippingContactFields: ['emailAddress', 'phoneNumber']
});

if (!result.userCancelled) {
  console.log('Payment successful:', result.nonce);
  console.log('Device data:', result.deviceData);
}

Verify Card with 3D Secure (iOS only)

const result = await Braintree.verifyCard({
  amount: '10.00',
  nonce: 'existing-payment-method-nonce',
  email: 'customer@example.com',
  billingAddress: {
    givenName: 'John',
    surname: 'Doe',
    phoneNumber: '+1234567890',
    countryCodeAlpha2: 'US'
  }
});

console.log('Verification result:', result.nonce);
console.log('Device data:', result.deviceData);

API Reference

Methods

initialize(options: InitializeOptions)

Initialize the Braintree client with a client token.

canMakePayments(options: CanMakePaymentsOptions)

Check if the device can make payments.

setupApplePay(options: SetupApplePayOptions)

Configure Apple Pay settings (iOS only).

launchApplePay(options: LaunchApplePayOptions)

Launch Apple Pay payment sheet (iOS only).

launchGooglePay(options: LaunchGooglePayOptions)

Launch Google Pay payment flow (Android only).

verifyCard(options: VerifyCardOptions)

Verify a payment method with 3D Secure (iOS only).

Interfaces

interface InitializeOptions {
  token: string;
}

interface CanMakePaymentsOptions {
  requireExistingPaymentMethods: boolean;
}

interface CanMakePaymentsResult {
  value: boolean;
}

interface SetupApplePayOptions {
  merchantId: string;
  currency: string;
  country: string;
  cardTypes: string[];
}

interface LaunchApplePayOptions {
  amount: string;
  primaryDescription?: string;
  requiredShippingContactFields?: string[];
}

interface LaunchGooglePayOptions {
  amount: string;
  currency: string;
  environment: string;
  requiredShippingContactFields?: string[];
  cardTypes: string[];
}

interface VerifyCardOptions {
  amount: string;
  nonce: string;
  email: string;
  billingAddress: {
    givenName: string;
    surname: string;
    phoneNumber: string;
    countryCodeAlpha2: string;
  };
}

interface PaymentResult {
  userCancelled: boolean;
  nonce?: string;
  deviceData?: string;
  emailAddress?: string;
  name?: string;
  phoneNumber?: string;
  card?: {
    lastTwo: string;
    network: string;
  };
  applePayCard?: any;
  type?: string;
}

interface VerifyCardResult {
  nonce: string;
  deviceData: string;
  error?: string;
}

Platform Support

Platform	Google Pay	Apple Pay	3D Secure
iOS	❌	✅	✅
Android	✅	❌	❌
Web	❌	❌	❌

Implementation Notes

• Android: Google Pay is fully implemented. 3D Secure verification returns "not implemented" error.
• iOS: Apple Pay and 3D Secure verification are fully implemented.
• Web: Not currently supported.

Example Usage

See the example app for complete implementation examples including:

• Platform detection
• Payment flow management
• Error handling
• Contact information collection

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details.