현재 버전

axios express node.js

axios express 질문있습니다!


노드 초보입니다 ㅠ 

현재 지금 결제 창을 만들고있는데, 카드 입력후 버튼 누르면 결제가완료되는 부분에서 막힙니다. 

링크를 참고해서 만들고 있는데 안되서 질문 남기게 되었습니다. 

위의 링크에서는, express를 안쓰고 저는 express를 쓸라니 꼬이는것 같아서요! 


일단 코드를 보면,  checkoutForm (여기서 이메일, 이름, 개인정보 적고 하단 버튼 누르면 보내야합니다) 

그래서 버튼이 눌리면 handleFormSubmit이 실행되고, axios.post('/pay') 로 보내면, 

express에서 받아오는게 맞는거 같은데, 자꾸 POST 404 (NOT FOUND) 에러가 뜨는게 궁금합니다! 

checkoutForm에서 post, pay로 보내고 express도 똑같이 post, /pay로 보내는게 맞지 않나요? 


Checkoutform.js
import React, { useState } from 'react';
import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
import BillingDetailsFields from './BillingDetailForm';
import axios from 'axios';
import styled from 'styled-components';
import payment_intents from './api/payment_intents';

const CheckoutForm = ({ price, onSuccessfulCheckout }) => {
  const [isProcessing, setProcessingTo] = useState(false);
  const [checkoutError, setCheckoutError] = useState();

  const stripe = useStripe();
  const elements = useElements();

  const handleCardDetailsChange = ev => {
    ev.error ? setCheckoutError(ev.error.message) : setCheckoutError();
  };
  const handleFormSubmit = async e => {
    e.preventDefault();
    const billingDetails = {
      name: e.target.name.value,
      email: e.target.email.value,
      address: {
        city: e.target.city.value,
        line1: e.target.address.value,
        state: e.target.state.value,
        postal_code: e.target.zip.value,
      },
    };

    setProcessingTo(true);

    const cardElement = elements.getElement('card');

    try {
    const { data: clientSecret } = await axios.post('/pay',
      {
        amount: price,
      }
    );
    console.log(clientSecret);

    const paymentMethodReq = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
      billing_details: billingDetails,
    });

    if (paymentMethodReq.error) {
      setCheckoutError(paymentMethodReq.error.message);
      setProcessingTo(false);
      return;
    }

    const { error } = await stripe.confirmCardPayment(clientSecret, {
      payment_method: paymentMethodReq.paymentMethod.id,
    });

    if (error) {
      setCheckoutError(error.message);
      setProcessingTo(false);
      return;
    }

    onSuccessfulCheckout();
    } catch (err) {
      setCheckoutError(err.message);
    }
  };
  const cardElementOpts = {
    hidePostalCode: true,
  };
  return (
    <form onSubmit={handleFormSubmit}>
      <div>
        <CheckoutTitle>Pay with</CheckoutTitle>
        <BillingDetailsFields />
      </div>
      <div>
        <CardElementContainer>
          <CardElement
            option={cardElementOpts}
            onChange={handleCardDetailsChange}
          />
        </CardElementContainer>
      </div>
      <div>
        <PayBtn disabled={isProcessing || !stripe}>
          {isProcessing ? 'Processing...' : `Confirm and Pay`}
        </PayBtn>
      </div>
    </form>
  );
};


server.js 
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const path = require('path');
if (process.env.NODE_ENV !== 'production') require('dotenv').config();
const stripe = require('stripe')(process.env.SECRET_KEY);

const app = express();
const port = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(cors());

if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, 'client/build')));

  app.get('*', function (req, res) {
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
  });
}
app.listen(port, error => {
  if (error) throw error;
  console.log('server running on port' + port);
});

app.post('/pay', async (req, res) => {
  console.log(res.body.amount);
  if (req.method === 'POST') {
    try {
      const { amount } = req.body;
      const paymentIntent = await stripe.paymentIntents.create({
        amount,
        currency: 'usd',
      });
      // res.render(() => history.push('/paymentSuccess'));
      // res.send('hello');
      res.status(200).send(paymentIntent.client_secret);
    } catch (err) {
      res.status(500).json({ statusCode: 500, message: err.message });
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
});





수정 이력

2021-07-23 16:26:27 에 아래 내용에서 변경 됨 #1

노드 초보입니다 ㅠ 

현재 지금 결제 창을 만들고있는데, 카드 입력후 버튼 누르면 결제가완료되는 부분에서 막힙니다. 

링크를 참고해서 만들고 있는데 안되서 질문 남기게 되었습니다. 

위의 링크에서는, express를 안쓰고 저는 express를 쓸라니 꼬이는것 같아서요! 


일단 코드를 보면,  checkoutForm (여기서 이메일, 이름, 개인정보 적고 하단 버튼 누르면 보내야합니다) 

그래서 버튼이 눌리면 handleFormSubmit이 실행되고, axios.post('/pay') 로 보내면, 

express에서 받아오는게 맞는거 같은데, 자꾸 POST 404 (NOT FOUND) 에러가 뜨는게 궁금합니다! 

checkoutForm에서 post, pay로 보내고 express도 똑같이 post, /pay로 보내는게 맞지 않나요? 


Checkoutform.js
import React, { useState } from 'react';
import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
import BillingDetailsFields from './BillingDetailForm';
import axios from 'axios';
import styled from 'styled-components';
import payment_intents from './api/payment_intents';

const CheckoutForm = ({ price, onSuccessfulCheckout }) => {
  const [isProcessing, setProcessingTo] = useState(false);
  const [checkoutError, setCheckoutError] = useState();

  const stripe = useStripe();
  const elements = useElements();

  const handleCardDetailsChange = ev => {
    ev.error ? setCheckoutError(ev.error.message) : setCheckoutError();
  };
  const handleFormSubmit = async e => {
    e.preventDefault();
    const billingDetails = {
      name: e.target.name.value,
      email: e.target.email.value,
      address: {
        city: e.target.city.value,
        line1: e.target.address.value,
        state: e.target.state.value,
        postal_code: e.target.zip.value,
      },
    };

    setProcessingTo(true);

    const cardElement = elements.getElement('card');

    try {
    const { data: clientSecret } = await axios.post(
      { payment_intents },
      {
        amount: price,
      }
    );
    console.log(clientSecret);

    const paymentMethodReq = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
      billing_details: billingDetails,
    });

    if (paymentMethodReq.error) {
      setCheckoutError(paymentMethodReq.error.message);
      setProcessingTo(false);
      return;
    }

    const { error } = await stripe.confirmCardPayment(clientSecret, {
      payment_method: paymentMethodReq.paymentMethod.id,
    });

    if (error) {
      setCheckoutError(error.message);
      setProcessingTo(false);
      return;
    }

    onSuccessfulCheckout();
    } catch (err) {
      setCheckoutError(err.message);
    }
  };
  const cardElementOpts = {
    hidePostalCode: true,
  };
  return (
    <form onSubmit={handleFormSubmit}>
      <div>
        <CheckoutTitle>Pay with</CheckoutTitle>
        <BillingDetailsFields />
      </div>
      <div>
        <CardElementContainer>
          <CardElement
            option={cardElementOpts}
            onChange={handleCardDetailsChange}
          />
        </CardElementContainer>
      </div>
      <div>
        <PayBtn disabled={isProcessing || !stripe}>
          {isProcessing ? 'Processing...' : `Confirm and Pay`}
        </PayBtn>
      </div>
    </form>
  );
};


server.js 
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const path = require('path');
if (process.env.NODE_ENV !== 'production') require('dotenv').config();
const stripe = require('stripe')(process.env.SECRET_KEY);

const app = express();
const port = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(cors());

if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, 'client/build')));

  app.get('*', function (req, res) {
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
  });
}
app.listen(port, error => {
  if (error) throw error;
  console.log('server running on port' + port);
});

app.post('/pay', async (req, res) => {
  console.log(res.body.amount);
  if (req.method === 'POST') {
    try {
      const { amount } = req.body;
      const paymentIntent = await stripe.paymentIntents.create({
        amount,
        currency: 'usd',
      });
      // res.render(() => history.push('/paymentSuccess'));
      // res.send('hello');
      res.status(200).send(paymentIntent.client_secret);
    } catch (err) {
      res.status(500).json({ statusCode: 500, message: err.message });
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
});