CODEWITHSUNDEEP
jsonapipostangularstripe-payments
mbillz
mbillz

Reputation: 163

Can't pass updated credit card details in JSON to Stripe update customer API endpoint in Angular 2

I'm trying to update a customer's stripe account via Angular 2. I have no problem creating customers.

My code currently looks like this:

  stripeHeaders(headers: Headers) {
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    headers.append('Authorization', 'Bearer ' + this.apiKey);
  }

  updateBilling(customerId, cardNumber, expiryMonth, expiryYear, cvc): Observable<any> {
    let headers = new Headers();
    this.stripeHeaders(headers);
    let jsonParams = {
      source: {
        object: 'card',
        number: cardNumber,
        exp_month: expiryMonth,
        exp_year: expiryYear,
        cvc: cvc
      }
    }
    let stringParams = 'source={"object":"card","number":' + cardNumber + ',"exp_month":' + expiryMonth + ',"exp_year":' + expiryYear + ',"cvc":' + cvc + '}';
    return this.http.post('https://api.stripe.com/v1/customers/' + customerId, body, { headers: headers } )
      .map(res => res.json());
  }

The response is: { error: { type: "invalid_request_error", message: "No such token: {'object':'card','number':4242424242424242,'exp_month':05,'exp_year':20,'cvc':202}", param: "source" } }

Unfortunately Stripe doesn't support passing JSON and I'm forced to use application/x-www-form-urlencoded but I can't figure out how to encode the object to pass it on successfully. You can see the JSON formatted variable versus my attempt at making it a string between jsonParams and stringParams.

I'm able to update other attributes, but the new cc info needs to be in the source object as documented here https://stripe.com/docs/api/php#update_customer

Thanks in advance for any help.

Upvotes: 0

Views: 742

Answers (1)

mbillz
mbillz

Reputation: 163

While researching for a solution, I stumbled upon the jQuery.param() function which converts data to a serialized representation. I'm not using jQuery in my Angular 2 project, but I plugged it into a different project where I utilize jQuery and converted the JSON into a string which successfully registers with the Stripe API. You can see the difference between the two here:

 let jsonBody = {
    source: {
      object: 'card',
      number: cardNumber,
      exp_month: expiryMonth,
      exp_year: expiryYear,
      cvc: cvc
    }
  }

  let serializedBody = 'source%5Bobject%5D=card&source%5Bnumber%5D=' + cardNumber + '&source%5Bexp_month%5D=' + expiryMonth+ '&source%5Bexp_year%5D=' + expiryYear + '&source%5Bcvc%5D=' + cvc;

Resources: http://api.jquery.com/jquery.param/

Upvotes: 0

Related Questions