title: Stripe doesn't add card to customer - Angular 2 / Express
body: <p>I have a problem with adding a card to a customer. I made a simple express server that handles the post request to stripe. At the moment it's register a new customer, but it fails in adding credit card information to the new customer. </p>
  
  <p>In my angular 2 application I collect the credit card information and send it to my Express Server. </p>
  
  <p><strong>Express server</strong></p>
  
  <pre><code>router.post('/charge', function(req, res) {
      console.log('post incomming');
      console.log('reg:', req.body)
      var token = req.body.id;
  
      stripe.customers.create({
        token: token
      }).then(function(customer) {
        console.log('customer:', customer)
        return stripe.charges.create({
          amount: 1000, // Amount in cents
          currency: "eur",
          customer: customer.id
        });
      }).then(function(err, charge) {
         if(err) {
           console.log('shomething wrong', err);
         }
         if(charge) {
           console.log('charge done');
         };
      });
  });
  </code></pre>
  
  <p>Getting the following response from express server</p>
  
  <pre><code>Something is happening.                                                                                                                                            
  post incomming                                                                                                                                                     
  reg: { '{\n  "id": "tok_19ASCZAgR5ZaHhRaLhfk7vcB",\n  "object": "token",\n  "card": {\n    "id": "card_19ASCYAgR5ZaHhRaQZbBj5uj",\n    "object": "card",\n    "addr
  ess_city": null,\n    "address_country": null,\n    "address_line1": null,\n    "address_line1_check": null,\n    "address_line2": null,\n    "address_state": null
  ,\n    "address_zip": null,\n    "address_zip_check": null,\n    "brand": "Visa",\n    "country": "US",\n    "cvc_check": "unchecked",\n    "dynamic_last4": null,\
  n    "exp_month": 12,\n    "exp_year": 2017,\n    "funding": "credit",\n    "last4": "4242",\n    "metadata": {},\n    "name": null,\n    "tokenization_method": nu
  ll\n  },\n  "client_ip": "90.210.15.78",\n  "created": 1477868095,\n  "livemode": false,\n  "type": "card",\n  "used": false\n}': '' }
  
  customer: { id: 'cus_9TP0BdARBgZ0NF',                                                                                                                              
    object: 'customer',                                                                                                                                              
    account_balance: 0,                                                                                                                                              
    created: 1477868096,                                                                                                                                             
    currency: null,                                                                                                                                                  
    default_source: null,                                                                                                                                            
    delinquent: false,                                                                                                                                               
    description: null,                                                                                                                                               
    discount: null,                                                                                                                                                  
    email: null,                                                                                                                                                     
    livemode: false,                                                                                                                                                 
    metadata: {},                                                                                                                                                    
    shipping: null,                                                                                                                                                  
    sources: { object: 'list',                                                                                                                                               
       data: [],                                                                                                                                                     
       has_more: false,                                                                                                                                              
       total_count: 0,                                                                                                                                               
       url: '/v1/customers/cus_9TP0BdARBgZ0NF/sources' },                                                                                                            
    subscriptions:                                                                                                                                                   
     { object: 'list',                                                                                                                                               
       data: [],                                                                                                                                                     
       has_more: false,                                                                                                                                              
       total_count: 0,                                                                                                                                               
       url: '/v1/customers/cus_9TP0BdARBgZ0NF/subscriptions' } }   
  
  Unhandled rejection Error: Cannot charge a customer that has no active card
  </code></pre>
  
  <p>And my Angular 2 applications has to following component and service.</p>
  
  <pre><code>import { Component, OnInit, NgZone } from '@angular/core';
  import { CheckoutService } from './checkout.service';
  declare var Stripe:any;
  
  @Component({
    selector: 'app-stripe',
    templateUrl: './stripe.component.html',
    styleUrls: ['./stripe.component.css'],
  })
  export class StripeComponent implements OnInit {
    private cardToken:any;
  
    constructor(private checkoutService:CheckoutService, private _zone: NgZone) {
    }
  
    ngOnInit(){
    }
  
    setUpCard() {
      //here we setup the stripe publish key.
      //notice that this is a test key for my account so replace with production key(live)
      Stripe.setPublishableKey('PUBKEYHERE');
    }
  
    getCardData(number, month, year, cvc) {
      //I get the card data typed in here and pass it to the getCardToken method
      this.getCardToken(number, month, year, cvc);
    }
  
    getCardToken(number, month, year, cvc) {
      //set up the card data as an object
      var dataObj = {"number": number, "exp_month": month, "exp_year": year, "cvc": cvc};
  
      // Request a token from Stripe:
      Stripe.card.createToken(dataObj,
        (status, response) =&gt; { //I'm using an arrow function instead of stripeResponseHandler(a function also) cos it's kickass!
          // basically you can do anything here with the reponse that has your token
          // you can hit your backend api and initialize a charge etc
          this._zone.run(() =&gt; {
            if (status === 200) {
              this.cardToken = response;
              console.log("the card token: ", this.cardToken);
              this.checkoutService.postToken(this.cardToken);
            }
            else {
              console.log("error in getting card data: ", response.error)
            }
          });
        }
      );
  
    }
  }
  </code></pre>
  
  <p>Checkout service</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Headers } from '@angular/http';
  import { Observable } from 'rxjs/Rx'; 
  
  @Injectable()
  export class CheckoutService {
  
    constructor(private http:Http) { }
  
    postToken(token) {
      console.log('from the posttoken: ', token);
  
      var headers = new Headers();
      headers.append('Content-Type', 'application/x-www-form-urlencoded');
  
      this.http.post('http://localhost:8080/api/charge', token, {
        headers: headers
      }).subscribe(
        data =&gt; console.log('data: ', data),
        err =&gt; this.logError(err),
        () =&gt; console.log('Authentication Complete')
      );
    }
  
    logError(err) {
      console.error('There was an error: ' + err);
    }
  
  }
  </code></pre>
  
  <p>When submitting the form I get the following response back:</p>
  
  <pre><code>from the posttoken:  Object {id: "tok_19ASCZAgR5ZaHhRaLhfk7vcB", object: "token", card: Object, client_ip: "90.210.15.78", created: 1477868095…}  
  </code></pre>
  
  <p><strong>Question</strong>     </p>
  
  <p>Why is Stripe not adding the provided credit card information to the newly created customer? </p>