title: Angular Unexpected token c in JSON at position 0 at JSON.parse when expecting a string
body: <p>I am not sure what I am doing wrong here.</p>
  
  <p>I am trying to use the checkout facility for stripe using this documentation: <a href="https://stripe.com/docs/payments/checkout/accept-a-payment" rel="nofollow noreferrer">https://stripe.com/docs/payments/checkout/accept-a-payment</a></p>
  
  <p>I have configured my API to just return the checkoutid as a string.
  The Angular service just calls the controller. When I run my code I actually get a nice 200 response and I can see the checkout id in the response body, but Angular throws an error:</p>
  
  <blockquote>
    <p>SyntaxError: Unexpected token c in JSON at position 0 at JSON.parse () at XMLHttpRequest.onLoad (<a href="https://127.0.0.1:4200/vendor.js:18780:51" rel="nofollow noreferrer">https://127.0.0.1:4200/vendor.js:18780:51</a>) at ZoneDelegate.invokeTask</p>
  </blockquote>
  
  <p>The service looks like this:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { map } from 'rxjs/operators';
  
  import { environment } from '@environments/environment';
  
  @Injectable({
    providedIn: 'root',
  })
  export class StripeService {
    private endpoint: string = 'stripe';
  
    constructor(private http: HttpClient) {}
  
    checkout(priceId: string) {
      return this.http
        .get&lt;string&gt;(`${environment.apiUrl}/${this.endpoint}/${priceId}`)
        .pipe(
          map((response) =&gt; {
            console.log(response);
            return response;
          })
        );
    }
  }
  </code></pre>
  
  <p>and I am invoking it like this:</p>
  
  <pre><code>this.stripeService
    .checkout(this.button.priceId)
    .subscribe((checkoutId: string) =&gt; {
      console.log(checkoutId);
      // this.stripe
      //   .redirectToCheckout({
      //     sessionId: checkoutId,
      //   })
      //   .then(function (result) {
      //     // If `redirectToCheckout` fails due to a browser or network
      //     // error, display the localized error message to your customer
      //     // using `result.error.message`.
      //   });
    });
  </code></pre>
  
  <p>If I look in the network tab I can see this:</p>
  
  <p><a href="https://i.stack.imgur.com/BIm0p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BIm0p.png" alt="enter image description here"></a></p>
  
  <p>But the console actually shows this:</p>
  
  <p><a href="https://i.stack.imgur.com/8T2Xx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8T2Xx.png" alt="enter image description here"></a></p>
  
  <p>Does anyone have a scooby why?</p>