2017-04-24 5 views
0

나는 알아낼 수없는 브레인 트리에 약간의 문제가 있습니다. API가있어서 내 API를 사용하여 내 client_token을 생성하도록 braintree를 설정할 수있었습니다. 나는 모든 것이 잘 작동하는지 확인하기 위해 먼저 드롭을 작성하기로 결정했다. 이 서비스는 지시어 내에서 호출Braintree + Angular add android pay

(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 양식을 생성하는 I는 다음과 같이 그것을했다 벌금 및 페이팔을 사용하여 요금을 처리 할 수 ​​있습니다. 문제는 가능한 한 간단하게 양식을 만들고 싶기 때문에 내 의뢰인이 apple pay/android pay를 사용하도록 요청했습니다. 사과 지불 설정은 몇 가지 추가 설정이 필요하므로 안드로이드 지불을 설정하려고하는데 문서가 흐릿합니다.

우선 안드로이드 지불 방식으로 dropin을 사용할 수 있습니까? 아니면 수동으로해야합니까? 후자 인 경우 누구나이 작업의 예가 있습니까? JavaScript/jQuery에서 막 볼 수 있습니다. 나는 혼자 회심을 할 수있다.

도움을 주시면 감사하겠습니다.

답변

0

전체 공개 : 저는 Braintree에서 일합니다. 더 궁금한 점이 있으시면 support으로 연락하십시오.

사용중인 코드는 Braintree의 웹 SDK 두 번째 버전의 드롭 인 UI입니다. 그러면 신용 카드 및 PayPal 지불을 수락 할 수있는 지불 양식이 생성됩니다. ApplePay와 같은 다른 지불 유형은 지원되지 않으며 지불 양식에 별도로 포함되어야합니다.

AndroidPay는 현재 기본 Android 앱에서만 지원되며 현재 Braintree의 웹 SDK를 통해 사용할 수 없습니다.

웹용 ApplePay는 기본 앱 외부에서 지원되지만 웹 SDK 버전 3 (v3)에서만 지원됩니다. 또한 v3 SDK's Drop-In UI이 현재 베타 버전이기 때문에 현재로서는 ApplePay를 추가하지 않았습니다. 자바 스크립트 통합을 통해, 페이팔, 그리고 ApplePay을 신용 카드를 사용할 수있는 지불 양식을 제공하기 위해, 당신은 지불 양식에 다음과 같은 설정하는 것이 좋습니다 :

Hosted Fields V3와 (신용 카드)

V3를 통해

PayPal button

V3를 통해

ApplePay for Web

명심해야 할 마지막 고려 사항은 코르도바 같은 것을 사용하는 경우 당신은 당신의 INTEGRA에 추가로 변경해야 할 수도 있으므로 브레인 트리의 웹 SDK를이 not built with hybrid runtimes in mind 있었다이다 우리 문서에있는 것 이상으로

+0

답장을 보내 주셔서 감사합니다. 그래서 우리 API와 angleJS를 프론트 엔드 용으로 .net을 사용하고 있습니다. 현재 ApplePay 나 AndroidPay를 사용할 수 없다는 말입니까? – r3plica

+0

프런트 엔드에서 각도를 사용하면 [ApplePay for Web] (https://developers.braintreepayments.com/guides/apple-pay/configuration/javascript/v3) 만 사용할 수 있지만 우리의 "v3"SDK의 ApplePay js 구성 요소가 필요합니다.현재 사용중인 코드는 "v2"SDK의 드롭 인 UI로 "v3"과 충돌합니다. 일반적으로 같은 체크 아웃 페이지에서 두 코드를 모두 사용하지 않는 것이 좋습니다. 그러나 AndroidPay는 기본 앱에서만 지원되며 현재 ApplePay와 같은 '웹용'구성 요소는 없습니다. –