Braintree + Angular добавляет оплату через Android

У меня есть небольшая проблема с Braintree, которую я не могу понять. У меня есть API, поэтому я смог настроить braintree для генерации моего client_token с помощью моего API, который отлично работает. Я решил создать дроп-ин для начала, чтобы убедиться, что все работает нормально. Я сделал это так:

(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. Настройка Apple Pay требует некоторых дополнительных настроек, поэтому я пытаюсь настроить Android Pay, но документация туманна.

Прежде всего, могу ли я использовать дропин с Android Pay или мне нужно делать все это вручную? Если это последнее, есть ли у кого-нибудь примеры этой работы? Я могу просто в JavaScript/jQuery. Переделку могу сделать сам.

Любая помощь будет принята с благодарностью.


person r3plica    schedule 24.04.2017    source источник


Ответы (1)


Полное раскрытие информации: я работаю в Braintree. Если у вас есть дополнительные вопросы, обращайтесь в поддержку.

Код, который вы используете, — это пользовательский интерфейс Drop-In из второй версии веб-SDK Braintree. Это создаст платежную форму, которая может принимать платежи кредитной картой и PayPal. Другие типы платежей, такие как ApplePay, не поддерживаются и должны быть включены в платежную форму отдельно.

AndroidPay в настоящее время поддерживается только в собственных приложениях Android и в настоящее время недоступен через веб-SDK Braintree.

ApplePay for Web поддерживается за пределами собственных приложений, но только в версии 3 (v3) нашего веб-SDK. Кроме того, поскольку встраиваемый пользовательский интерфейс v3 SDK в настоящее время находится в стадии бета-тестирования, в настоящее время к нему еще не добавлен ApplePay. Чтобы представить платежную форму, которая может принимать кредитные карты, PayPal и ApplePay через интеграцию JavaScript, вы должны настроить в своей платежной форме следующее:

Размещенные поля с v3 (для кредитных карт)

кнопка PayPal через v3

ApplePay for Web через v3

Последнее соображение, о котором следует помнить, это то, что веб-SDK Braintree были не предназначен для гибридных сред выполнения, поэтому, если вы используете что-то вроде Cordova, вам может потребоваться внести в интеграцию дополнительные изменения помимо тех, что указаны в нашей документации.

person Ryan Regan    schedule 24.04.2017
comment
хорошо, спасибо за ваш ответ. Итак, поскольку мы используем .net для нашего API и angularJS для нашего внешнего интерфейса, вы говорите, что мы не можем использовать ApplePay или AndroidPay в настоящее время? - person r3plica; 24.04.2017
comment
При использовании Angular для вашего внешнего интерфейса вы сможете использовать только ApplePay for Web, но для этого потребуются компоненты ApplePay js нашего SDK v3. Код, который вы используете в настоящее время, — это пользовательский интерфейс Drop-In из нашего SDK v2, который в некоторых местах конфликтует с v3, и мы обычно не рекомендуем использовать оба на одной странице оформления заказа. Однако AndroidPay поддерживается только в нативных приложениях, и в настоящее время нет веб-компонента, как для ApplePay. - person Ryan Regan; 25.04.2017