gravity10
118
2021-07-23 16:25:28 작성 2021-07-23 16:26:27 수정됨
1
107

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');
  }
});




0
  • 답변 1

  • Mux
    417
    2021-07-23 16:31:44 작성 2021-07-23 16:32:55 수정됨

    404 NOT Found는 '/pay'라는 경로를 찾지 못해서 발생하는 것 같습니다.

    서버 측에서 선언이 되었다면 클라이언트 쪽에서 잘못된 요청을 날린 걸 수도 있습니다.

  • 로그인을 하시면 답변을 등록할 수 있습니다.