결제하기 구현하기 -react

지금 바로 결제 페이지를 확인하세요!

둘 다 해야 한다

그리고 Firebase 홈페이지로 돌아갑니다.

아래에 요소를 만들고 Promise를 사용하십시오.

<Route path="/payment">
    <Header />
    <Elements stripe={promise}>
    <Payment/>
    </Elements>
</Route>

아래는 Payment.js입니다.

import React, {useState} from 'react';

import './Payment.css'
import {useStateValue} from "./StateProvider";
import {Link, useHistory} from "react-router-dom";
import CheckoutProduct from "./CheckoutProduct";
import CurrencyFormat from 'react-currency-format';
import {getBasketTotal} from "./Reducer";
import {CardElement, useElements, useStripe} from "@stripe/react-stripe-js";

function Payment() {
    const ({basket, user }, dispatch ) = useStateValue();
    const history = useHistory();
    //App.js 에 적어주고 ! subtotal.js 결제하기 onclick 실행 !
    const (disable,setDisable) =useState(true);

    const (error, setError) = useState(null);
    const stripe = useStripe();
    const elements = useElements(true);
    const (processing,setProcessing) = useState("");
    const (succeeded , setSucceeded) = useState(false);
    const (clientSecret, setClientSecret) =useState(true);

    //아래는 비동기 async
    const handleSubmit = async(event) =>{

    }

    const handleChange = (event) => {
        setDisable(event.empty);
        setError(event.error ? event.error.message:"");
    }


    return (
        <div className="payment">
            <div className="payment_container">
                <Link to='/checkout' className="checkoutlink">
                    <h1>장바구니로 돌아가기 </h1>
                </Link>
                   <h1>{ basket?.length} 개의 상품목록이 존재합니다.</h1>

                    <div className="payment_section">
                        <div className="payment_title">
                            <h3>배달 받을곳</h3>
                        </div>
                        <div className="payment_address">
                            <p>{user?.email}님의 주소</p>
                            <p>강원도</p>
                            <p>철원</p>
                        </div>
                    </div>
            </div>

            <div className="payment_section">
                <div className="payment_title">
                    <h3>상품 목록</h3>
                </div>
                <div className="payment_items">
                    {basket.map((item) => {

                        return (
                            <CheckoutProduct
                                key={item.id}
                                id={item.id}
                                title={item.title}
                                image={item.image}
                                price={item.price}
                                rating={item.rating}
                            />
                        );
                    })}
                </div>
            </div>


            <div className="payment_section">
                <div className="payment_title">
                    <h3> 결제 </h3>
                </div>
                <div className="payment_detail">
                    <form onSubmit={handleSubmit}>
                        <CardElement onChange={handleChange}/>

                        <div className="payment_priceContainer">
                            <CurrencyFormat
                                renderText={(value) => (
                                    <>
                                        <p>
                                            총액(상품갯수 : {basket.length} EA) : <strong>{ value }원</strong>

                                        </p>
                                        <small className="subtotal_gift">
                                            <input type="checkbox"/> 체크박스 입니다.
                                        </small>
                                    </>
                                )}
                                decimalScale={2}  //소수점 몇짜리 까지
                                value={getBasketTotal(basket)}
                                displayType={'text'}
                                thousandSeparator={true}
                                prefix={'₩'}
                            />

                            <button disabled={processing || disable || succeeded }><span>{processing?<p>결제중입니다</p> : "결제하기"}</span></button>

                        </div>
                        {error && <div>{error}</div>}
                    </form>
                </div>
            </div>


        </div>
    );
}

export default Payment;

그런 다음 터미널에 다음 명령을 입력하십시오.

npm i axios –force

액시오스란 무엇인가

브라우저용 비동기 통신 라이브(깜박임 없이 쓰기)

Cloud Functions가 있는 서버 측

서버리스 서버를 가장한 서버, 간단한 기능