Braintree + Angular add android payment

Question

私は理解できないようなbraintreeの問題が少しあります。 APIがあるので、うまく動作するAPIを使用してclient_tokenを生成するためにbraintreeを設定することができました。 私は、それがすべて正常に動作することを確認するためにドロップインを作成することに決めました。このサービスは、ディレクティブ内で呼び出され

(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フォームを生成し、私はこのようにそれをやりました罰金と私は電荷を処理するためにペンパルを使用することができます。問題はできるだけシンプルにフォームを作成したいので、クライアントからリンゴペイ/アンドロイドペイを使用するように依頼されています。アップルペイを設定するにはいくつかの追加設定が必要なようですが、私はアンドロイドペイを設定しようとしていますが、ドキュメントは濁っています。

まず、アンドロイドペイメントでdropinを使用することはできますか、それとも手動で行う必要がありますか？ 後者の場合、誰でもこの作業の例がありますか？私はJavaScript/jQueryでちょうどいいです。私は自分自身で変換を行うことができます。

ご協力いただければ幸いです。

Answer 1

_{全開示：私はブレーントリーで働いています。ご不明な点がございましたら、supportまでお気軽にお問い合わせください。}

使用しているコードは、BraintreeのWeb SDKの2番目のバージョンのドロップインUIです。これにより、クレジットカードとPayPal支払いを受け入れることができる支払いフォームが生成されます。 ApplePayのような他の支払いタイプはサポートされておらず、お支払いフォームに別途含まれる必要があります。

AndroidPayは現在ネイティブAndroidアプリでのみサポートされており、現時点ではBraintreeのWeb SDKでは利用できません。

ApplePay for Webはネイティブアプリの外部でサポートされていますが、バージョン3（v3）のWeb SDKのみでサポートされています。さらに、v3 SDK's Drop-In UIが現在ベータ版であるため、現時点でApplePayがまだ追加されていません。 JavaScriptの統合を経てクレジットカードを受け入れることができ、支払いフォーム、ペイパルを提示し、ApplePayするために、お支払いフォームに次のように設定することをお勧めします：

Hosted Fields V3と（クレジットカード用）

ビアV3

PayPal button

ビアV3

ApplePay for Web

心に留めておくべき一つの最後の考慮事項は、あなたがコルドバのようなものを使用している場合、あなたのインテグラに追加の変更を加える必要がある場合がありますので、ブレインのWeb SDKには、not built with hybrid runtimes in mindだったということです私たちのドキュメンテーションの内容を超えています。