1.0.1 • Published 4 years ago

@moovenda/capacitor-braintree v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

@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
ParamType
optionsDropInToken

Returns: any


showDropIn(...)

showDropIn(options: DropInOptions) => any
ParamType
optionsDropInOptions

Returns: any


getDeviceData(...)

getDeviceData(options: DataCollectorOptions) => any
ParamType
optionsDataCollectorOptions

Returns: any


Interfaces

DropInToken

PropType
tokenstring

DropInOptions

PropType
amountstring
disabled{}
givenNamestring
surnamestring
emailstring
phoneNumberstring
streetAddressstring
postalCodestring
localitystring
countryCodeAlpha2string

DropInResult

PropType
cancelledboolean
noncestring
typestring
localizedDescriptionstring
deviceDatastring
card{ lastTwo: string; network: string; }
payPalAccount{ email: string; firstName: string; lastName: string; phone: string; billingAddress: string; shippingAddress: string; clientMetadataId: string; payerId: string; }
applePaycardany
threeDSecureCard{ liabilityShifted: boolean; liabilityShiftPossible: boolean; }
venmoAccount{ username: string; }

DataCollectorOptions

PropType
merchantIdstring
1.0.1

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago