@moovenda/capacitor-braintree
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

@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>
  1. 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(...)

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

Package Sidebar

Install

npm i @moovenda/capacitor-braintree

Weekly Downloads

0

Version

1.0.1

License

MIT

Unpacked Size

46 kB

Total Files

27

Last publish

Collaborators

  • enricodeleo