市场place
作者 NativeScript.org
nativescript-braintree
由 Jibon L. Costa 编写 | v3.1.2
NativeScript 的 Braintree 支付 (Drop-in) 插件。
npm i --save nativescript-braintree

npm npm

nativescript-braintree

Braintree 支付 NativeScript 插件，适用于 Android 和 iOS (9+)。与 NS 6+ 兼容。

详细信息请在此处查看

https://developers.braintreepayments.com/start/hello-client/android/v2

https://developers.braintreepayments.com/guides/drop-in/overview/ios/v4

您需要一个服务器来生成客户端令牌。您可以在此处查看：https://developers.braintreepayments.com/start/hello-server/php

注意：您的应用程序的包 ID 应该是小写字母。如果您的包包含下划线，则应将其删除。详细信息：https://developers.braintreepayments.com/guides/client-sdk/setup/android/v2#browser-switch-setup

对于 iOS（重要）

对于 PayPal 和 Venmo 设置，必须遵循以下 setup-ios-paypal--venmo

平台

Android

iOS (9+)

安装

Nativescript 7+

tns plugin add nativescript-braintree

NativeScript 5-6

tns plugin add [email protected]

NativeScript 4.x

tns plugin add [email protected]

用法

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);
})

设置 Apple Pay

如果您想使用 Apple Pay，则必须完成以下步骤。

  1. 在 Braintree 和 Apple 开发者门户中设置您的 Apple Pay 证书，并按照以下配置步骤进行操作：https://developers.braintreepayments.com/guides/apple-pay/configuration/ios/v4

  2. 为了防止编译错误，并在使用原生 iOS 类时提供智能感应，请将 tns-platform-declarations 添加到您的项目中。以下是一个视频指南，展示了如何执行此操作：https://www.youtube.com/watch?v=vz7qfpeghFs

注意：之所以采用这种方式实现，是为了让开发者有更多的自定义能力，而不是将一些逻辑放在插件内部，这样如果需要，作者可能更难修改。

  1. 根据您想要 Apple Pay 提示的外观，在 BrainTreeOptions 类上设置 applePayPaymentRequest 属性。

注意：Apple Pay 提示将使 paymentSummaryItems 中的最后一个项目显示为总计。因此，您可以手动添加总结/总计项目，或者将总结/总计项目放在 applePayLineItems 数组的末尾。

详细 Apple Pay

Itemized Apple Pay screenshot

如果您想要像上面那样的详细提示，请执行以下操作

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,
};

总结 Apple Pay

Summary Apple Pay screenshot

如果您想要像上面那样的总结提示，请执行以下操作

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,
};

设置 Google Pay

为了利用 Google Pay 服务，您必须确保已在其 AndroidManifest.xml 中设置了所需的元标签，具体请参阅：https://developers.braintreepayments.com/guides/google-pay/client-side/android/v3

此外，请确保在 BrainTreeOptions 中提供货币代码，因为这是必需的。

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"
        };

设置 iOS PayPal & Venmo。

如果您想使用 PayPal & Venmo，则需要编辑您的应用程序的 Info.plist 文件，该文件位于 app/App_Resources/iOS/Info.plist，以添加类似以下的 URL scheme

<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>org.nativescript.demo.payments</string>
		</array>
	</dict>
</array>

此方案必须以您的应用程序的 Bundle ID 开头，并专门用于 Braintree 应用程序切换返回。例如，如果应用程序包 ID 是 com.yourcompany.yourapp，则您的 URL 方案可以是 com.yourcompany.yourapp.payments 或 com.yourcompany.yourapp.anything。我在上面使用了 org.nativescript.demo.payments，因为应用程序的包 ID 是 org.nativescript.demo，并且我们将在下面需要此值。

现在打开您的 app.ts 或 main.ts（对于 Angular）文件。在 application.start({ moduleName: "main-page" }); 或 platformNativeScriptDynamic().bootstrapModule(AppModule);（Angular）之前添加以下行。

import * as app from "application";
import { setupBraintreeAppDeligate } from "nativescript-braintree"

if (app.ios) {
    setupBraintreeAppDeligate("org.nativescript.demo.payments");
}

示例

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

参考：https://developers.braintreepayments.com/guides/paypal/client-side/ios/v4

使用3D Secure

为了使用3D Secure支付，这是满足支付服务指令2（PSD2）强化消费者认证（SCA）合规要求的必备条件，您应该在选项中设置requestThreeDSecureVerification: true。另外，还需要设置一个金额。

致谢

特别感谢@Pip3r4o, @TylerBlakeLOU, @SamGosman

许可证

Apache许可证版本2.0，2004年1月