nativescript-braintree
Braintree Payment NativeScript plugin for Android & iOS (9+). Works with NS 6+
Detail information here:
https://developers.braintreepayments.com/start/hello-client/android/v2
https://developers.braintreepayments.com/guides/drop-in/overview/ios/v4
You will need a Server to Generate a client token. You can follow here:https://developers.braintreepayments.com/start/hello-server/php
Note: Your app's package ID should be lowercase letters. If your package contains underscores, the underscores should be removed. Detail: https://developers.braintreepayments.com/guides/client-sdk/setup/android/v2#browser-switch-setup
For iOS (Important)
For Paypal & Venmo setup, must need to follow bellow setup-ios-paypal--venmo
Platforms
Android
iOS (9+)
Installation
Nativescript 7+:
tns plugin add nativescript-braintree
NativeScript 5-6
tns plugin add nativescript-braintree@2.0.9
NativeScript 4.x
tns plugin add nativescript-braintree@2.0.1
Usage
import { Braintree, BrainTreeOptions } from 'nativescript-braintree';
let opts :BrainTreeOptions = {
amount: "10.0",
collectDeviceData: true,
requestThreeDSecureVerification: false
}
let token = token; //Get the token from server. https://developers.braintreepayments.com/start/hello-server/php
let braintree = new Braintree();
braintree.startPayment(token, opt);
braintree.on("success", function (res) {
let output = res.object.get("output");
console.dir(output);
})
braintree.on("cancel", function (res) {
let output = res.object.get("output");
console.dir(output);
})
braintree.on("error", function (res) {
let output = res.object.get("output");
console.dir(output);
})
Set up Apple Pay
If you want to use Apple Pay there are a few steps you must complete.
Set up your Apple Pay Certificate in Braintree and in the Apple Developer PortalFollow the configuration steps here: https://developers.braintreepayments.com/guides/apple-pay/configuration/ios/v4
To prevent compiler errors and to provide intellisense when working with native iOS classes add
tns-platform-declarationsto your project. Here is a video guide showing how to do that: https://www.youtube.com/watch?v=vz7qfpeghFs
Note: It was implemented this way so that the developer has more customization capabilities rather than putting some of this logic inside the plugin which might be harder for authors to modify if needed.
- Populate
applePayPaymentRequestproperty on theBrainTreeOptionsclass depending on how you want the Apple Pay prompt to look.
Note: The apple pay prompt will make the last item in the paymentSummaryItems show like a total. Therefore you can just add the summary/total item manually or put a summary/total item at the end of the applePayLineItems array.
Itemized Apple Pay
If you want an itemized prompt like above, do the following:
import { Braintree, BrainTreeOptions, ApplePayLineItem } from 'nativescript-braintree';
let applePayPaymentRequestObj = PKPaymentRequest.alloc().init();
// If you want to show an itemized Apple Pay prompt.
let applePayLineItems = [
{
label: "Service",
amount: 0.02
},
{
label: "Delivery",
amount: 0.03
},
{
label: "Company Name",
amount: 0.05
}
];
let lineItemsArray = [];
applePayLineItems.map((lineItem: ApplePayLineItem) => {
let pkSummaryItem = PKPaymentSummaryItem.summaryItemWithLabelAmount(lineItem.label, NSDecimalNumber.decimalNumberWithString(lineItem.amount.toString()));
lineItemsArray.push(pkSummaryItem);
});
let paymentSummaryArray = NSArray.alloc().initWithArray(lineItemsArray);
applePayPaymentRequestObj.paymentSummaryItems = paymentSummaryArray as NSArray<PKPaymentSummaryItem>;
applePayPaymentRequestObj.countryCode = "US";
applePayPaymentRequestObj.currencyCode = "USD";
applePayPaymentRequestObj.merchantIdentifier = "YOUR_MERCHANT_IDENTIFIER";
applePayPaymentRequestObj.merchantCapabilities = PKMerchantCapability.Capability3DS;
// Configure your allowed networks
let networksArray = NSArray.alloc().initWithArray([
"AmEx",
"Discover",
"MasterCard",
"Visa",
]);
applePayPaymentRequestObj.supportedNetworks = networksArray as NSArray<string>;
let opt: BrainTreeOptions = {
amount: "0.01", // This is ignored if Apple Pay is the selected payment method
collectDeviceData: false,
requestThreeDSecureVerification: true,
// Apple Pay payment request
applePayPaymentRequest: applePayPaymentRequestObj,
};
Summary Apple Pay
If you want a summary prompt like above, do the following:
import { Braintree, BrainTreeOptions, ApplePayLineItem } from 'nativescript-braintree';
let applePayPaymentRequestObj = PKPaymentRequest.alloc().init();
// If you want to show a summary Apple Pay prompt.
let applePayLineItems = [
{
label: "Company Name",
amount: 0.02
}
];
let lineItemsArray = [];
applePayLineItems.map((lineItem: ApplePayLineItem) => {
let pkSummaryItem = PKPaymentSummaryItem.summaryItemWithLabelAmount(lineItem.label, NSDecimalNumber.decimalNumberWithString(lineItem.amount.toString()));
lineItemsArray.push(pkSummaryItem);
});
let paymentSummaryArray = NSArray.alloc().initWithArray(lineItemsArray);
applePayPaymentRequestObj.paymentSummaryItems = paymentSummaryArray as NSArray<PKPaymentSummaryItem>;
applePayPaymentRequestObj.countryCode = "US";
applePayPaymentRequestObj.currencyCode = "USD";
applePayPaymentRequestObj.merchantIdentifier = "YOUR_MERCHANT_IDENTIFIER";
applePayPaymentRequestObj.merchantCapabilities = PKMerchantCapability.Capability3DS;
// Configure your allowed networks
let networksArray = NSArray.alloc().initWithArray([
"AmEx",
"Discover",
"MasterCard",
"Visa",
]);
applePayPaymentRequestObj.supportedNetworks = networksArray as NSArray<string>;
let opt: BrainTreeOptions = {
amount: "0.01", // This is ignored if Apple Pay is the selected payment method
collectDeviceData: false,
requestThreeDSecureVerification: true,
// Apple Pay payment request
applePayPaymentRequest: applePayPaymentRequestObj,
};
Setup Google Pay
In order to utilize the Google Pay services you must ensure you have set up the required meta tag in your AndroidManifest.xml detailed here: https://developers.braintreepayments.com/guides/google-pay/client-side/android/v3
Also be sure to provide the a currency code in the BrainTreeOptions, as this is required.
let opts: BrainTreeOptions = {
amount: "0.01",
collectDeviceData: false,
requestThreeDSecureVerification: true,
enableGooglePay: true, // need to do additional setup for android. Please check demo project. Details: https://developers.braintreepayments.com/guides/google-pay/client-side/android/v3#add-google-play-services-wallet
currencyCode: "USD"
};
Setup iOS paypal & Venmo.
If you want to use Paypal & Venmo then you will need to edit your app Info.plist file which is located app/App_Resources/iOS/Info.plist to add URL scheme like this:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>org.nativescript.demo.payments</string>
</array>
</dict>
</array>
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.yourcompany.yourapp, then your URL scheme could be com.yourcompany.yourapp.payments or com.yourcompany.yourapp.anything. Above I used org.nativescript.demo.payments because app's bundle ID is org.nativescript.demo & we will need this value below.
Now open your app.ts or main.ts (for Angular) file. Add following lines before application.start({ moduleName: "main-page" }); or platformNativeScriptDynamic().bootstrapModule(AppModule); (Angular).
import * as app from "application";
import { setupBraintreeAppDeligate } from "nativescript-braintree"
if (app.ios) {
setupBraintreeAppDeligate("org.nativescript.demo.payments");
}
Example:
https://github.com/jibon57/nativescript-braintree/blob/master/demo/app/app.ts
https://github.com/jibon57/nativescript-braintree/blob/master/demo/app/App_Resources/iOS/Info.plist
ref: https://developers.braintreepayments.com/guides/paypal/client-side/ios/v4
Using 3D Secure
In order to use 3D Secure payments which is required to satisfy PSD2 Strong Consumer Authentication (SCA) compliance requirements you should set requestThreeDSecureVerification: true in your options. Also it is required to set an amount.
Credits
Special thanks to @Pip3r4o, @TylerBlakeLOU, @SamGosman
License
Apache License Version 2.0, January 2004
-
NativeScript 可以使用 Javascript，CSS, XML 创建真正的 Native 跨平台应用，支持 iOS Android，NativeScript 将您的跨平台代码翻译成目标平台的代码。 UI 使用 XML 描述，CSS 样式，在编译时将 UI 转化成本地原生代码,最终得到正在的 Native 原生应用。 Telerik 公开了用于创建安卓、iOS和Windows Unive
-
NativeScript Command-Line Interface The NativeScript CLI lets you create, build, and deploy NativeScript-based apps on iOS and Android devices. Get it using: npm install -g nativescript What is Native
-
NativeScript-Snackbar �� �� �� NativeScript plugin for Material Design SnackBar component. Installation: NativeScript 7+:tns plugin add @nstudio/nativescript-snackbar NativeScript version prior to 7:t
-
Nativescript-Ripple This plugin aims to bring a native (or close to native) ripple implementation on Android and iOS. The android version uses a RippleDrawable and conserves the previous background, a
-
NativeScript-FloatingActionButton NativeScript plugin for Material Design Floating Action Button UI component. Installation Nativescript 7+: ns plugin add @nstudio/nativescript-floatingactionbutton Na
-
NativeScript CardView A NativeScript plugin to provide an XML widget to implement the Material Design CardView component. Installation NativeScript 7+: ns plugin add @nstudio/nativescript-cardview Nat