Cannot read property 'card' of undefined
Closed this issue · 1 comments
Hello !
I get this error :
"ionic.bundle.js:25642 TypeError: Cannot read property 'card' of undefined
at Scope.$scope.charge (controllers.js:29)
at fn (eval at (ionic.bundle.js:26457), :4:209)
at callback (ionic.bundle.js:36610)
at Scope.$eval (ionic.bundle.js:29158)
at Scope.$apply (ionic.bundle.js:29257)
at HTMLFormElement. (ionic.bundle.js:36615)
at HTMLFormElement.eventHandler (ionic.bundle.js:16583)
at triggerMouseEvent (ionic.bundle.js:2948)
at tapClick (ionic.bundle.js:2937)"
... when i submit the form
(Sorry i I started with angular)
My Controller
`.controller('PaiementCtrl', function($scope, $rootScope, $http, $state, stripe) {
$scope.charge = function () {
console.log(stripe.card);
return stripe.card.createToken($scope.payment.card)
.then(function (response) {
console.log('token created for card ending in ', response.card.last4);
var payment = angular.copy($scope.payment);
payment.card = void 0;
payment.token = response.id;
return $http.post('https://localhost/payments', payment);
})
.then(function (payment) {
console.log('successfully submitted payment for $', payment.amount);
})
.catch(function (err) {
if (err.type && /^Stripe/.test(err.type)) {
console.log('Stripe error: ', err.message);
}
else {
console.log('Other error occurred, possibly with your API', err.message);
}
});
}
})`
Form html
`
<label class="item item-input item-stacked-label">
<span class="input-label">Numéro de la carte</span>
<input type="text" ng-model="payment.card.number" name="cardNumber" cc-number placeholder="Numéro de carte">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Expiration</span>
<input type="text" name="expiry" ng-model="payment.card.expiry" placeholder="01 / 99">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Cryptogramme visuel</span>
<input type="text" name="cvc" ng-model="payment.card.cvc" placeholder="Cryptogramme">
</label>
<button type="submit" class="button button-full button-positive">Payer</button>
</form>`
Thanks !
Going to close this since it's not a bug or library issue. Hard to see what's up here. You might want to initialize $scope.payment = {}
in your controller.