角度1.xでストライプチェックが機能しない

ストライプ支払いを使用して支払いを処理しています。私はこのGITHUBプロジェクトとこのblogを追跡しました。角度1.xでストライプチェックが機能しない

私のプロジェクトはネストされたビューを持ち、ルータも使用しています。 app.jsは角のモジュールを手動でロードされているところであるとルーターを持っている

src 
    app 
    views 
    controllers 
    directives 
    index.html 
    app.js

よう

マイプロジェクト構造が見えます。

app.js

var myApp = angular.module('myApp', ['ui.router', 'formData']); 
myApp.config(function($stateProvider, $urlRouterProvider, $httpProvider) { 
    // routers 
}

のindex.htmlが角度とストライプスクリプトは

index.htmlを

<head lang="en"> 
    <script type="text/javascript" src="https://js.stripe.com/v2/"></script> 
    <Script src="resources/angular.min.js"></Script> 
    <Script src="resources/angular-ui-router.min.js"></Script> 
    <script src="app.js"></script> 
    <script src="directives/formData/formData.js"></script> 
    <script type="text/javascript" 
     src="resources/angular-payments.js"> 
    </script> 
    <script> 
     Stripe.setPublishableKey('key') 
    </script> 
</head> 
<div> 
    <div ui-view> 
    </div> 
</div>

Nが含まれているれています私は

formData.js

var formData = angular.module('formData',['angularPayments']); 
formData.directive('formData',function(){ 
    return { 
     restrict: 'EA', 
     scope: {}, 
     replace: true, 
     link: function($scope, element, attributes){ 

     }, 
     controller: function($scope,$attrs,$http, $state){ 
      //This is the callback for strip from the links above as followed 
      $scope.stripeCallback = function (code, result) { 
       console.log("inside cc callbakc"); 
       if (result.error) { 
        console.log("credit card error"); 
        window.alert('it failed! error: ' + result.error.message); 
       } else { 
        console.log(result); 
        console.log("credit card succes "+result.id); 
        window.alert('success! token: ' + result.id); 
       } 
      }; 

     }, 
     templateUrl: 'directives/formData/formData.tpl.html' 
    } 
});

ストリップ支払いを含めるようにしようとしているところFORMDATAディレクティブOW formData.tpl.htmlは別のUIルータ

formData.tplを持っています.html

<form id="signup-form" ng-submit="processForm()"> 
    <!-- our nested state views will be injected here --> 
    <div ui-view></div 
</form>

とUIルータのhtmlページの一つが、このコード

<form stripe-form="stripeCallback" name="checkoutForm">> 
    <input ng-model="number" placeholder="Card Number" 
      payments-format="card" payments-validate="card" name="card" /> 
    <input ng-model="expiry" placeholder="Expiration" 
      payments-format="expiry" payments-validate="expiry"     
      name="expiry" /> 
    <input ng-model="cvc" placeholder="CVC" payments-format="cvc" payments-validate="cvc" name="cvc" /> 
    <button type="submit">Submit</button> 
</form>

私が提出打ったとき、私は、コンソールでの作業の検証が、何も印刷を取得して支払いページです。私はjsが解雇されていないと思います。より多くの情報が必要な場合はお知らせください。

出典

2017-07-31 ksernow

これは、無効なhtmlであるネストされたフォームとしてレンダリングされます。ほとんどのブラウザは、内側のフォームを非フォーム要素として扱うことによって、このことを静かに「寛容」させています。サインアップフォームからcheckoutFormを移動すると、正しいトラックに置かれます。

出典

2017-07-31 03:24:31 PippLogic

はい私はサインアップフォームの外にこれを持っていれば動作します。しかし、私は本当にそこにこれが必要です – ksernow

角度1.xでストライプチェックが機能しない

答えて

関連する問題