Braintree + Angular 添加 android 支付

Question

我对 braintree 有点问题，我似乎无法弄清楚。我有一个 API，所以我已经能够设置 braintree 以使用我的 API 生成我的 client_token，效果很好。我决定先创建 drop in，以确保一切正常。我是这样做的：

(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>

这样可以很好地生成投递表格，并允许我使用贝宝来处理费用。问题是我想让表格尽可能简单，所以我的客户要求我使用 apple pay/android pay。设置 apple pay 似乎需要一些额外的设置，所以我正在尝试设置 android pay 但是文档很模糊。

首先，我可以使用带 android 付款的 dropin 还是必须全部手动完成？如果是后者，有没有人有这种工作的例子？我可以在 JavaScript/jQuery。我可以自己做转换。

如有任何帮助，我们将不胜感激。

Answer 1

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

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

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

ApplePay for Web 在本机应用程序之外受支持，但仅在我们的 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 的网络 SDK 是 not built with hybrid runtimes in mind，因此如果您使用 Cordova 之类的东西，您可能需要对您的集成进行超出我们文档中内容的其他更改。

Braintree + Angular 添加 android 支付

Braintree + Angular add android pay

javascript

android

braintree

angularjs