strip.com の支払い処理を AngularJS Web アプリに統合するために、angular-paymentsを追加しようとしています。
https://github.com/laurihy/angular-payments/blob/master/lib/angular-payments.jsのコードをangular-payments.js ファイルに複製し、https ://github.com/ のコードを複製しましたlaurihy/angular-payments/blob/master/example/index.htmlを localhost:8888/stripe.html にコピーして動作させました。
ただし、このコードを AngularJS Web アプリに統合しようとすると、ng-model が機能しません。
これがコードを統合する方法です。次のコードを持つ app.js を使用した単一ページ Web アプリがあります。
angular.module('io.config', []).value('io.config', {
'password': 'json/config.password.json',
....
....
});
...
...
angular.module('app.modules', ['app.config']);
var app = angular.module('app', ['ngCookies', 'io', 'ui', 'bs', '$strap',
'app.controllers', 'app.directives', 'app.factories', 'app.filters', 'app.modules', 'app.config']);
そこで、「angularPayments」を次のように追加しました。
var app = angular.module('app', ['ngCookies', 'io', 'ui', 'bs', '$strap',
'app.controllers', 'app.directives', 'app.factories', 'app.filters', 'app.modules', 'app.config', 'angularPayments']);
次のコードを含む app.route.js ファイルもあります。
angular.module('app')
.config(['$routeProvider', function($routeProvider) {
var _view_ = 'view/', _app_ = 'app/';
$routeProvider
.when('/user/invite', {templateUrl:_view_+'app/invite.html'})
app.route.js に以下を追加しました。
.when('/user/buy', {templateUrl:_view_+'app/buy.html'})
localhost:8888/stripe.html のコードを app/buy.html に複製し、localhost:8888/#/user/buy にマップします。
例外は、次の行を buy.html から取り出して index.html に入れたことです。
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="scripts/modules/angular-payments.js"></script>
私のindex.htmlには次のコードがあります：
<!DOCTYPE html>
<html class="no-js" lang="en" data-ng-app="app">
...
<link href="./css/bootstrap.css" rel="stylesheet">
...
<body class="ng-cloak" data-ng-controller="AppCtrl">
...
<div data-ng-view></div>
...
<script src="bower_components/angular-io/src/scripts/ie.js"></script>
...
<script src="bower_components/angular-complete/angular.js"></script>
...
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="scripts/modules/angular-payments.js"></script>
...
strip.html と buy.html の両方に次のコードがあります。
<form stripe-form="handleStripe">
<div class="span3">
<label for="">Card number</label>
<input type="text" class="input-block-level" ng-model="number" payments-validate="card" payments-format="card" />
</div>
<div class="span1">
<label for="">Expiry</label>
<input type="text" class="input-block-level" ng-model="expiry" payments-validate="expiry" payments-format="expiry" />
</div>
<div class="span3">
<label for="">Name on card </label>
<input type="text" class="input-block-level">
</div>
<div class="span1">
<label for="">CVC</label>
<input type="text" class="input-block-level" ng-model="cvc" payments-validate="cvc" payments-format="cvc" />
</div>
<div class="span4">
<button type="submit" class="btn btn-primary btn-large">Submit</button>
</div>
number:{{number}}, expiry:{{expiry}}, cvc:{{cvc}}
</form>
ただし、ng-model から値が返されないため、次のコードは strip.html では機能しますが、buy.html では機能しません。
number:{{number}}, expiry:{{expiry}}, cvc:{{cvc}}
したがって、このフォームを送信すると、Stripe に何も渡されないため、Stripe は status = 402 のエラーを返します。
ng-model を data-ng-model に変更しようとしましたが、役に立ちませんでした。次のコードを別のファイルに入れてみました: scripts/controllers/payment.js:
function PaymentCtrl($scope) {
$scope.handleStripe = function(status, response){
if(response.error) {
// there was an error. Fix it.
} else {
// got stripe token, now charge it or smt
token = response.id
}
}
}
app.route.js に以下を追加します。
.when('/user/buy', {templateUrl:_view_+'app/buy.html', controller:PaymentCtrl})
そして、buy.html で次のように変更します。
data-ng-controller="MainController"
に：
data-ng-controller="PaymentCtrl"
しかし、それでも役に立たない。
ng-model 変数を buy.html で動作させる方法を誰か教えてもらえますか? 前もって感謝します。