외부API 결제(부트페이)

1 bootpay 회원가입

2 [결제설정] - 결제수단설정

3 [결제수단설정] - PG사 선택 - 카카오페이 - 결제수단선택 - 카카오페이(샌드박스 모드)

4 '부트페이 개발메뉴얼' 클릭

5 메뉴얼 따라 진행

npm install @bootpay/client-js
npm install cross-env            //개인정보보호



//Payment.jsx

import { Bootpay } from '@bootpay/client-js' //결제페이지에서 import

6 코드작성

//Payment.jsx


//onClick속성에 함수넣기
<button size="medium" text="결제하기" onClick={payHandler}>버튼</button> 


//결제요청예제 코드 추가하기 
const payHandler = async () => {    //await과 함께 사용하는 함수
const response = await Bootpay.requestPayment({
  "application_id":process.env.REACT_APP_PAY_APPLICATION_ID   
  //최초회원가입한 사람 연동키 암호화
  
  "price": 1000,
  "order_name": "테스트결제",
  "order_id": "TEST_ORDER_ID",
  "pg": "카카오페이       //밑의 그림과 같이 변경해야 함
  "method": "간편      //밑의 그림과 같이 변경해야 함
  "tax_free": 0,
  "user": {
    "id": "회원아이디",
    "username": "회원이름",
    "phone": "01000000000",
    "email": "test@test.com"
  },
  "items": [
    {
      "id": "item_id",
      "name": "테스트아이템",
      "qty": 1,
      "price": 1000
    }
  ],
  "extra": {
    "open_type": "iframe",
    "card_quota": "0,2,3",
    "escrow": false
  }
})}

7 연동키 암호화

바깥폴더에 '.env'파일 생성

REACT_APP_PAY_APPLICATION_ID= 연동키적기

**git에 push할때는, .env데이터는 넘어가지 않기때문에
각팀원들 .env파일 만들고, 연동키 적어서 공유!

git ignore에 먼저 .env를 작성한 후에
env파일을 만들어야 함 !!!!!!