bendrucker/angularjs-stripe

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.