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> 

這將產生脫入形式罰款，並允許我使用貝寶處理費用。問題是我想盡可能簡化表單，所以我的客戶要求我使用蘋果支付/安卓支付。設置蘋果支​​付似乎需要一些額外的設置，所以我想設置安卓支付，但文檔是朦朧的。

首先，我可以使用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

通過V3 ApplePay for Web

最後一個考慮要記住的是，布倫特裏的網頁SDK也not built with hybrid runtimes in mind，所以如果你使用類似科爾多瓦你可能需要進行額外的更改您的INTEGRA而不是我們文檔中的內容。