我正在使用 Stripe 付款来处理付款。我关注了这个GITHUB项目和这个blog .
我的项目有嵌套 View 并使用路由器。
我的项目结构如下
src
app
views
controllers
directives
index.html
app.js
app.js 是手动加载 Angular 模块并具有路由器的地方。
app.js
var myApp = angular.module('myApp', ['ui.router', 'formData']);
myApp.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
// routers
}
index.html 是包含 Angular 和 Stripe 脚本的地方
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>
现在 formData 指令是我尝试包含剥离付款的地方
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.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 没有被解雇。如果您需要更多信息，请与我们联系。
最佳答案
这将呈现为嵌套表单，这是无效的 html。大多数浏览器通过将内部表单视为非表单元素来默默地“原谅”这一点。 如果您将 checkoutForm 从注册表单中移出，这应该会让您走上正确的轨道。
关于javascript - Stripe checkout 在 Angular 1.x 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45406941/