角度ストライプ - ストライプ要素

Question

への変換ストライプ支払いフォームは、私は角ストライプチェックアウトフォームを持っていたと私は最近導入された新しいStripe Card Elementsに自分のフォームを更新しようとしています。

フォーム入力フィールドを削除し、ストライプカードの要素とそれらを交換した後、私のフォームは次のようになります。フォームが送信される角度で以前

<form name="payment" ng-submit="vm.submit()"> 
<div class="row"> 
    <label for="card-element"> 
     Credit or debit card 
    </label> 
    <div id="card-element"> 
     <!-- a Stripe Element will be inserted here. --> 
    </div> 
</div> 
<button class="btn btn-primary" type="submit" ng-disabled="vm.submitting">Pay!</button> 
<div ng-show="vm.cardError" class="row"> 
    <div class="has-error"> 
    <p class="help-block">* {{vm.cardError}}</p> 
    </div> 
</div> 
</form> 

、私はsubmit()とstripeResponseHandlerからハンドリングましたコントローラ。新しい変更で角度コントローラを更新した後、コントローラは次のようになります。

function PaymentController() { 
     var vm = this; 
     var elements = stripe.elements(); 
     var style = { 
          base: { 
          color: '#32325d', 
          lineHeight: '24px', 
          fontFamily: 'Helvetica Neue', 
          fontSmoothing: 'antialiased', 
          fontSize: '16px', 
          '::placeholder': { 
           color: '#aab7c4' 
          } 
          }, 
          invalid: { 
          color: '#fa755a', 
          iconColor: '#fa755a' 
          } 
        }; 
     vm.card = elements.create('card', {style: style}); 
     vm.card.mount('#card-element'); 

     // Handle real-time validation errors from the card Element. 
     vm.card.addEventListener('change', function(event) { 
       if (event.error) { 
       vm.cardError = event.error.message; 
       } else { 
       vm.cardError = ''; 
       } 
     }); 

     function submit() { 
      vm.cardError = ''; 
      vm.submitting = true; 
      createToken(); 
     } 

     // Send data directly to stripe 
     function createToken() { 
      stripe.createToken(vm.card).then(function(result) { 
       if (result.error) { 
       vm.cardError = result.error.message; 
       vm.submitting = false; 
       } else { 
       // Send the token to your server 
       stripeTokenHandler(result.token); 
       } 
      }); 
     } 

     // Response Handler callback to handle the response from Stripe server 
     function stripeTokenHandler(token) { 
      vm.tokenData = { 
       token: token.id 
      }; 
      .. Process the rest in server ... 
     } 
} 

上記のコードはそのまま動作します。しかし、私はこれらに混乱しています：

1）ストライプは、現在のフォーム内のカードの要素を挿入するためにDOM操作を使用しているので、それは角度の方法のように、私の上記の方法が間違って作るのですか？意味、コントローラでこれ以上やってはいけないのではなく、指示に移すべきでしょうか？または、操作された要素がstripe.elements()を使用しているため、これは必要ではありません。

2私はディレクティブの内側にそれらを持っている必要があります場合は）、私はちょうど角度ディレクティブに上記を変換する方法がわからないです。これは、まず要素を操作して（指示リンク機能に追加できるように）操作しますが、その後フォーム送信およびイベントハンドラーにcard要素を使用します。私は、ディレクティブ・コントローラーの内部でサブミットし、リンク内の要素操作を行うというディレクティブ・リンク自体の中で、これをすべて行う必要がありますか？

私はとても混乱していて、ここで何をするかに固執しています。私はそれを間違ってやっている場合、誰かが私にこれに対処する方法のサンプルを私に与えることができますか？

私は角度1.5を使用しています。

Answer 1

私は今、ディレクティブにコントローラを変更し、リンク関数内のすべてのjQueryと角度のコードを配置しています。これは私の指示コードは更新後どのように見えるかです：

function stripeForm() { 

     // Link Function 
     function link(scope, element, attrs) { 

      scope.submitCard = submitCard; 

      var elements = stripe.elements(); 
      var style = { 
          iconStyle: 'solid', 
          style: { 
          base: { 
           iconColor: '#8898AA', 
           color: '#000', 
           lineHeight: '36px', 
           fontWeight: 300, 
           fontFamily: 'Helvetica Neue', 
           fontSize: '19px', 

           '::placeholder': { 
           color: '#8898AA', 
           }, 
          }, 
          invalid: { 
           iconColor: '#e85746', 
           color: '#e85746', 
          } 
          }, 
          classes: { 
          focus: 'is-focused', 
          empty: 'is-empty', 
          }, 
         }; 
      var card = elements.create('card', style); 
      card.mount('#card-element'); 

      // Handle real-time validation errors from the card Element. 
      card.on('change', function(event) { 
       setOutcome(event); 
      }); 

      // Form Submit Button Click 
      function submitCard() { 
       var errorElement = document.querySelector('.error'); 
       errorElement.classList.remove('visible'); 
       createToken(); 
      } 

      // Send data directly to stripe server to create a token (uses stripe.js) 
      function createToken() { 
       stripe.createToken(card).then(setOutcome); 
      } 

      // Common SetOutcome Function 
      function setOutcome(result) { 
       var errorElement = document.querySelector('.error'); 
       errorElement.classList.remove('visible'); 
       if (result.token) { 
        // Use the token to create a charge or a customer 
        stripeTokenHandler(result.token); 
       } else if (result.error) { 
        errorElement.textContent = result.error.message; 
        errorElement.classList.add('visible'); 
       } 
      } 

      // Response Handler callback to handle the response from Stripe server 
      function stripeTokenHandler(token) { 
       ..send to server ... 
      } 
     } 

     // DIRECTIVE 
     return { 
      restrict: 'A', 
      replace: true, 
      templateUrl: 'payment/PaymentForm.html' 
      link: link 
     } 
    } 

私のHTMLファイルは次のようになりました：

<form ng-submit="submitCard()"> 
    <div> 
     <label> 
     <div id="card-element" class="field"></div> 
     </label> 
    </div> 
    <div> 
     <button class="btn btn-primary pull-right" type="submit">Pay!</button> 
     <button class="btn btn-danger pull-left" type="button" ng-click="cancel()">Cancel</button> 
    </div> 
    <div> 
     <div class="error"></div> 
    </div> 
</form>