React 카카오페이 Api연동법

£€€.T.$·2023년 5월 22일

23Mini_Proj

목록 보기

2/6

import React,{useContext} from "react";
import styled from "styled-components";
import axios from 'axios';
import PayLogo from "../image/payment_icon_yellow_small.png"
import { UserContext } from "../context/UserInfo";

const MemberShip =()=>{
    //컨텍스트에 카카오결제 페이지를 저장한다.
    const context = useContext(UserContext);
    const {setPayUrl,payUrl} = context; 
    
    //카카오 결제로 들어가는 axios
    const handlePayment1m = async () => {    
        try {
          const response = await axios.post(
            'https://kapi.kakao.com/v1/payment/ready',    
            {
              cid: 'TC0ONETIME', // 가맹점 CID
              partner_order_id: 'partner_order_id', // 가맹점 주문번호
              partner_user_id: 'partner_user_id', // 가맹점 회원 ID
              item_name: '상품판매',
              quantity: 1,
              total_amount: 5500, // 결제 금액
              tax_free_amount: 0,
              approval_url: 'http://localhost:3000/PayResult', // 결제 성공 시 리다이렉트할 URL
              cancel_url: 'hhttp://localhost:3000/kakaoPay', // 결제 취소 시 리다이렉트할 URL
              fail_url: 'http://localhost:3000/kakaoPay', // 결제 실패 시 리다이렉트할 URL
            },   
            {
              headers: {
                Authorization: `KakaoAK 02be1b58e11c4a0376b6ad075800f833`,       // 카카오톡 API 접속 로그인 후 내 애플리케이션 Admin키 저장 
                "Content-type": `application/x-www-form-urlencoded;charset=utf-8`
              },
            }
          );


          console.log(response.data); // 결제 요청 결과 확인
          console.log(response.data.next_redirect_pc_url);
          console.log(response.data.tid);
          window.localStorage.setItem("tid", response.data.tid);
        setPayUrl(response.data.next_redirect_pc_url);    

        } catch (error) {
          console.error("에러입니다1.");
          console.error(error);
        }
    };
  
  
      return(
        <Container>
            <div className="wholeBody">
                <div className="partition1">
                    <span>AEL이 준비한 특별한 선물</span>
                    3개월 결제시 20% 특가 할인 EVNET
                 </div>
                 <div className="partition2" onMouseOver={handlePayment1m}>
                      1개월 무제한 전곡 듣기
                      <span>월 5,500원  </span>                      
                      <a href={payUrl} target="_blank"><img src={PayLogo}/></a>
                  </div> 
            </div>
        </Container>
    );
};

엑시오스는 post방식으로 직접 카카오페이 페이지와 연결시킨다

🪄axios로 연결할 주소
'https://kapi.kakao.com/v1/payment/ready'

거래가 승인이 나면 approval_url로 이동하게 되는데 이때 새롭게 만든 페이지인 PayResult.js로 이동한다(🪄라우터 필수)

import React from "react";
import axios from "axios";
import { styled } from "styled-components";
import { useLocation } from "react-router-dom";


const Button =styled.button`

`
const PayResult =()=>{
    //apprval_url 을 통해서 받아온 현재 주소에는 pg_token값이 붙어있다. 이를 추출하여야 함
    const location = useLocation();
    //현재 로케이션값을 통해 어떤 값을 가져와야하는지 알 수 있다.
    console.log(location);
    //search르 통해서 ?뒤에 붙은 값을 가져온다
    const url = location.search;
    //=뒤에 붙은 pg_token값을 가져온다.
    const pgToken = url.split('=')[1];
    //최종 token값이 완성된다.
    console.log(pgToken);
    const handleApprove = async () => {    
        try {       
          const response = await axios.post(
            'https://kapi.kakao.com/v1/payment/approve',    
            {
              cid: 'TC0ONETIME', // 가맹점 CID
              tid: window.localStorage.getItem("tid"),
              partner_order_id: 'partner_order_id', // 가맹점 주문번호
              partner_user_id: 'partner_user_id', // 가맹점 회원 ID
              pg_token: pgToken,

            },   
            {
              headers: {
                Authorization: `KakaoAK 02be1b58e11c4a0376b6ad075800f833`,       // 카카오톡 API 접속 로그인 후 내 애플리케이션 Admin키 저장 
                "Content-type": `application/x-www-form-urlencoded;charset=utf-8`
              },
            }
          );
          console.log(response.data); // 결제 요청 결과 확인 
          console.log(response.data.amount); // 가격확인
          console.log(response.data.amount.total); // 가격확인
          console.log(response.data.quantity); //수량 확인
          window.close();//결제 완료후 창이 닫긴다.
          
        } catch (error) {
          console.error("에러입니다1.");
          console.error(error);
        }
    };

    return (
        <Button onClick={handleApprove}>
                버튼을 누르면 결제가 완료됩니다.
        </Button>

    )
}
export default PayResult;