@moovenda/capacitor-braintree
Capacitor v3+ Braintree Native SDK plugin for 3D Secure-enabled payments
Install
npm install @moovenda/capacitor-braintree
npx cap sync
iOS Setup
Register a URL type
- In Xcode, click on your project in the Project Navigator and navigate to App Target > Info > URL Types
- Click [+] to add a new URL type
- 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
- Open your
ios/App/App/AppDelegate.swift
file
- Import the braintree SDK with
import Braintree
- Search for the function
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool
- 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
- Edit your
android/app/src/main/AndroidManifest.xml
file
- 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>
- 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
Returns: any
showDropIn(...)
showDropIn(options: DropInOptions) => any
Returns: any
getDeviceData(...)
getDeviceData(options: DataCollectorOptions) => any
Returns: any
Interfaces
DropInToken
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 |