Max4637 - angular

[royal nest]

Hey there, this doesnt appear to be an issue with the Stripe API/client. Do you have that backend server running?

[haughty jewel]

Yes

The frontend is running through “ng serve”

This is the error I get when I click on “Checkout”

“checkout” should redirect me to the Stripe page

My checkout function in the TypeScript is checkout() { // Check the server.js tab to see an example implementation this.http.post('/create-checkout-session', {}) .pipe( switchMap(session => { //@ts-ignore return this.stripeService.redirectToCheckout({ sessionId: session.id }) }) ) .subscribe(result => { // If `redirectToCheckout` fails due to a browser or network // error, you should display the localized error message to your // customer using `error.message`. if (result.error) { alert(result.error.message); } }); }

[royal nest]

That's saying your server isn't handling the request to /create-checkout-session

You need to review your server code and ensure you have such an endpoint set up to handle requests

[haughty jewel]

I’ll give you the server.JS code

const app = express();
// @ts-ignore
const stripe = require('stripe')('sk_test...');

app.post('/create-checkout-session', async (req, res) => {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    success_url: 'https://example.com/success',
    cancel_url: 'https://example.com/cancel',
  });

  res.json({ id: session.id });
});

app.listen(4200, () => console.log(`Listening on port ${4200}!`)); ```

[lapis cypress]

My guess is that your Node/Express app and your Angular app are both running on port 4200

Or at least trying to

[royal nest]

Express should produce an error if you try to listen on a port already in use, I belive

@haughty jewel are you sure the server code here is running?

You can try checking the port conflict by changing to another post and accessing it there

[haughty jewel]

Yes. They are both on 4200

[haughty jewel]

I’ll send you pics of it running

[royal nest]

You'll ned to change one to ensure the request is handled correctly. Try running your server on 4300 instead and make the back end request to that.

[haughty jewel]

Ok. I’ll try it

It says “connection refused” because it’s a different port

[royal nest]

You may need to read a bit about proxying your backend server:
https://medium.com/bb-tutorials-and-thoughts/angular-how-to-proxy-to-backend-server-6fb37ef0d025
https://stackoverflow.com/questions/39809008/angular-cli-proxy-to-backend-doesnt-work

Unfortunately we can't assist with app build/configuration issues too extensively, but when you get that working I'm happy to help you sort out any issues you might encounter with the Stripe API/client