@moovenda/capacitor-braintree

Capacitor v3+ Braintree Native SDK plugin for 3D Secure-enabled payments

Install

1. npm install @moovenda/capacitor-braintree
2. npx cap sync

iOS Setup

Register a URL type

1. In Xcode, click on your project in the Project Navigator and navigate to App Target > Info > URL Types
2. Click [+] to add a new URL type
3. Under URL Schemes, enter your app switch return URL scheme. This scheme must start with your app's Bundle ID and be dedicated to Braintree app switch returns. For example, if the app bundle ID is com.your-company.your-app, then your URL scheme could be com.your-company.your-app.payments.

For further informations please refer to the official docs.

Add listener in your AppDelegate.swift

1. Open your ios/App/App/AppDelegate.swift file
2. Import the braintree SDK with import Braintree
3. Search for the function func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool
4. Append the following snippet above the return line

if url.scheme?.localizedCaseInsensitiveCompare("com.your-company.your-app.payments") == .orderedSame {
  BTAppSwitch.handleOpen(url, options: options)
}

Android Setup

Browser switch setup

1. Edit your android/app/src/main/AndroidManifest.xml file
2. Add this snippet between within the <application> tag:

<activity android:name="com.braintreepayments.api.BraintreeBrowserSwitchActivity"
    android:launchMode="singleTask">
    <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>

3. Require cardinalcommerce editing the application's build.gradle adding the following repository:

 allprojects {
    repositories {
        google()
        jcenter()
        maven {
            url "https://cardinalcommerce.bintray.com/android"
            credentials {
                username 'braintree-team-sdk@cardinalcommerce'
                password '220cc9476025679c4e5c843666c27d97cfb0f951'
            }
        }
    }
}

Usage example

import { Braintree } from '@moovenda/capacitor-braintree';

let payment;

try {
  await Braintree.setToken({
    token: CLIENT_TOKEN_FROM_SERVER,
  });

  payment = await Braintree.showDropIn({
    amount: '0.00',
    disabled: ['venmo', 'applePay', 'googlePay'],
    givenName: customerDetails.firstName,
    surname: customerDetails.lastName,
    email: customerDetails.email,
    phoneNumber: customerDetails.phone,
    streetAddress: customerDetails.streetAddress,
    postalCode: customerDetails.zipcode,
    locality: customerDetails.city,
    countryCodeAlpha2: customerDetails.CountryAlphaCode,
  });
} catch(e) {
  console.error(e);
}

if (!payment.cancelled || !payment.nonce) {
  try {
    const deviceData = await Braintree.getDeviceData({
      merchantId: BRAINTREE_MERCHANT_ID,
    });
    await yourApiCall(`order/${orderId}/pay`, {
      nonce: payment.nonce,
      deviceData: deviceData,
    });
  } catch (error) {
    console.error(error);
  }
}

API

• setToken(...)
• showDropIn(...)
• getDeviceData(...)
• Interfaces

setToken(...)

setToken(options: DropInToken) => any

| Param | Type | | ------------- | --------------------------------------------------- | | options | DropInToken |

Returns: any

showDropIn(...)

showDropIn(options: DropInOptions) => any

| Param | Type | | ------------- | ------------------------------------------------------- | | options | DropInOptions |

Returns: any

getDeviceData(...)

getDeviceData(options: DataCollectorOptions) => any

| Param | Type | | ------------- | --------------------------------------------------------------------- | | options | DataCollectorOptions |

Returns: any

Interfaces

DropInToken

| Prop | Type | | ----------- | ------------------- | | token | string |

DropInOptions

| Prop | Type | | ----------------------- | ------------------- | | amount | string | | disabled | {} | | givenName | string | | surname | string | | email | string | | phoneNumber | string | | streetAddress | string | | postalCode | string | | locality | string | | countryCodeAlpha2 | string |

DropInResult

| Prop | Type | | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | cancelled | boolean | | nonce | string | | type | string | | localizedDescription | string | | deviceData | string | | card | { lastTwo: string; network: string; } | | payPalAccount | { email: string; firstName: string; lastName: string; phone: string; billingAddress: string; shippingAddress: string; clientMetadataId: string; payerId: string; } | | applePaycard | any | | threeDSecureCard | { liabilityShifted: boolean; liabilityShiftPossible: boolean; } | | venmoAccount | { username: string; } |

DataCollectorOptions

| Prop | Type | | ---------------- | ------------------- | | merchantId | string |