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>

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

首先，我可以使用带有Android支付的dropin，还是我必须手动完成所有操作？如果是后者，有没有人有这个工作的例子？我可以在JavaScript / jQuery中使用。我可以自己做转换。

非常感谢任何帮助。

Answer 1

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

您使用的代码是Braintree Web 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这样的东西，你可能需要对你的整合进行额外的更改，而不是＆＃ 39;在我们的文档中。

Braintree + Angular添加android pay

1 个答案: