I have a bit of an issue with braintree that I can't seem to figure out. I have an API so I have been able to set up braintree to generate my client_token using my API which works fine. I decided to create the drop in to start with to make sure it all works fine. I did it like this:
(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');
};
};
})();
This service is invoked inside a directive:
(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');
};
};
})();
and the html for this is just like this:
<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>
This generates the dropin form fine and allows me to use paypal to process the charge. The issue is I want to make the form as simple as possible, so my client has asked me to use apple pay/android pay. Setting up apple pay seems to require some additional settings, so I am trying to set up android pay yet the documentation is hazy.
First of all, can I use the dropin with android pay or do I have to do it all manually? If it is the latter, does anyone have any examples of this working? I can just by in JavaScript/jQuery. I can do the conversion myself.
Any help would be greatly appreciated.
Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.
The code you're using is the Drop-In UI from the second version of Braintree's web SDK. This will generate a payment form that can accept credit card and PayPal payments. Other payment types like ApplePay are not supported and would need to be included in your payment form separately.
AndroidPay is presently only supported in native Android apps and is not available via Braintree's web SDKs at this time.
ApplePay for Web is supported outside of native apps, but only on version 3 (v3) of our web SDK. Additionally as the v3 SDK's Drop-In UI is presently in beta, it has not yet had ApplePay added to it at this time. In order to present a payment form that can accept credit cards, PayPal, and ApplePay via a JavaScript integration, you'll want to set up the following on your payment form:
Hosted Fields with v3 (for credit cards)
PayPal button via v3
ApplePay for Web via v3
One last consideration to keep in mind is that Braintree's web SDKs were not built with hybrid runtimes in mind, so if you're using something like Cordova you might need to make additional changes to your integration beyond what's in our documentation.