Braintree + Angular 添加安卓支付

Question

我对 Braintree 有一点问题，我似乎无法弄清楚。 我有一个 API，所以我能够设置 Braintree 以使用我的 API 生成我的 client_token，它工作正常。 我决定首先创建插件以确保一切正常。我是这样做的：

(function () {
    'use strict';

    angular.module('piiick-payment').service('paymentService', paymentService);

    paymentService.$inject = ['BaseApiService', 'ApiHandler'];

    function paymentService(baseApiService, apiHandler) {
        var service = angular.merge(new baseApiService('payments'), {
            dropIn: dropIn,
        });
        return service;

        //////////////////////////////////////////////////

        function dropIn(formId, target) {
            return getClientId().then(function (response) {
                var client_token = response;
                braintree.setup(client_token, 'dropin', {
                    container: target
                });
            });
        };

        function getClientId() {
            return apiHandler.get(service.apiPath + '/token');
        };
    };
})();

此服务在指令内调用：

(function () {
    'use strict';

    angular.module('piiick-payment').directive('payment', payment);

    function payment() {
        return {
            restrict: 'A',
            controller: 'PaymentController',
            controllerAs: 'controller',
            templateUrl: 'app/payment/payment.html',
            bindToController: true
        };
    };
})();

(function () {
    'use strict';

    angular.module('piiick-payment').controller('PaymentController', PaymentController);

    PaymentController.$inject = ['paymentService'];

    function PaymentController(paymentService) {
        var self = this;

        init();

        //////////////////////////////////////////////////

        function init() {
            createDropIn()
        };

        function createDropIn() {
            paymentService.dropIn('payment-form', 'bt-dropin');
        };
    };
})();

这个的html是这样的：

<form id="payment-form" ng-submit="controller.checkout()" novalidate>
    <div class="bt-drop-in-wrapper">
        <div id="bt-dropin"></div>
    </div>

    <div class="form-group">
        <label for="amount">Amount</label>
        <input class="form-control" id="amount" name="amount" type="tel" min="1" placeholder="Amount" value="10">
    </div>

    <div class="form-group">
        <button class="btn btn-primary" type="submit">Test Transaction</button>
    </div>
</form>

<script src="https://js.braintreegateway.com/js/braintree-2.27.0.min.js"></script>

这会很好地生成 dropin 表单，并允许我使用 paypal 来处理费用。问题是我想让表单尽可能简单，所以我的客户要求我使用苹果支付/安卓支付。设置apple pay似乎需要一些额外的设置，所以我正在尝试设置android pay，但是文档很模糊。

首先，我可以将 dropin 与 android pay 一起使用，还是必须全部手动完成？ 如果是后者，有没有人有这个工作的例子？我可以只使用 JavaScript/jQuery。我可以自己进行转换。

任何帮助将不胜感激。

Answer 1

_{全面披露：我在 Braintree 工作。如果您还有任何问题，请随时联系support。}

您使用的代码是 Braintree 网络 SDK 第二版中的 Drop-In UI。这将生成一个可以接受信用卡和 PayPal 付款的付款表格。不支持 ApplePay 等其他付款方式，需要单独包含在您的付款表单中。

AndroidPay 目前仅在原生 Android 应用程序中受支持，目前无法通过 Braintree 的网络 SDK 使用。

Web 版 ApplePay 在本机应用程序之外受支持，但仅限于我们的 Web SDK 版本 3 (v3)。此外，由于v3 SDK's Drop-In UI 目前处于测试阶段，目前尚未添加 ApplePay。为了通过 JavaScript 集成提供可以接受信用卡、PayPal 和 ApplePay 的付款方式，您需要在付款方式上设置以下内容：

Hosted Fields 使用 v3（用于信用卡）

PayPal button 通过 v3

ApplePay for Web 通过 v3

要记住的最后一个注意事项是，Braintree 的 Web SDK 是 not built with hybrid runtimes in mind，因此，如果您使用的是 Cordova 之类的软件，您可能需要对您的集成进行额外的更改，而不是我们文档中的内容。