Currently facing a challenge with Braintree that I need help resolving. I have successfully set up Braintree to generate my client_token using my API, and created the drop-in feature as a test. Here is how I implemented it:
(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 payment service is called within 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');
};
};
})();
The HTML structure for this implementation is as follows:
<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>
While the current setup works fine with PayPal, I am now looking to simplify the form by incorporating Apple Pay or Android Pay. However, configuring Apple Pay appears to be complex, so I am exploring Android Pay. Can the drop-in functionality work seamlessly with Android Pay, or does it require manual intervention? If manual setup is necessary, are there any working examples available in JavaScript/jQuery that I can refer to for guidance?
Your assistance on this matter would be highly appreciated.