미니는 밍기적
[REACT] PG사 일반결제 포트 연동시키기 _ 아임포트 본문
데이터유통플랫폼인만큼 결제가 필수인 플랫폼인지라 PG사 결제포트 연동이 필쑤인 것이다
이에 아임포트에서 일반결제 포트를 연동하기로 했다
이에 결제하기 버튼 연동 전, 초초안 간단하게 PaymentPage.js로 결제 페이지를 개발했다
결제하기 버튼 클릭 시, 현재는 결제 실패 Alert 창이 뜬다
당연하다
아직 access토큰을 담아두지도 않았고, 상품 정보를 담아두지도 않았으니
해당 박스들 칸에 아직 상품 정보와 결제 금액이 뜨지않는 이유는 db에 모셔놓은 상품을 갖고오지않았기때문이고
어제 밤에 api와 http 전달받은지라 이제 통신해서 불러오면 된다
이에 토큰 담기 전에 회원가입과 로그인으로 토큰 담는게 먼저인지라 이를 해결하고 결제 페이지로 넘어갈 예정이다
**맨 아래 하단 : 아임포트 결제하기 버튼으로 가져 온 html
아래 코드에서 기밀은 내가 해둔 표시고 ^.^ 대충 틀은 이렇다
이에 앞으로 프론트인 내가 해야할 것은 간략하게 정리해보면 다음과 같다
1. 기밀토큰 값에는 로그인 후 결제하고자하는 회원이 accesstoken값을 넣어주기
2. 기밀표시 된 부분에는 api 명세서 바탕으로 통신 연결해주기 _ 아래 괄호는 백엔드와 맞춘 것
{
- merchant_uid : 주문번호는 항상 고윳값으로 설정되어야하고 해당 고윳값은 프론트에서 별도의 로직으로 설정해야함 (별도의 로직 : * 회원이메일 + 랜덤숫자(유효아이디) / 또는 날짜 시간 등 자유롭게 앞에와 . 랜덤해도 됨 이와 같은 식으로)
- name : 상품 이름을 가져와야함
- amount : 가격을 불러와야함
- buyer_email : 이메일 가져오기
- buyer_tel : 있어도되고 없어도됨
- buyer_addr, buyer_postcode : null로 처리 }
3. dataProductId를 백으로 던져줘야해서 저장해서 불러오든 뭘하든 불러오든 가져와야함 _ 이것저것 시도해보기
4. 결제 전에 회원이 선택한 상품의 가격 정보와 백에서 통신된 상품의 가격 정보가 일치하는지 확인하는 코드 짜기
말은 참 간단하지만
기능 하나 구현할 때 며칠은 걸릴 것이라고 생각하기에
여유를 가지고 차근차근 도전해부려고한다
| <!DOCTYPE html> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <!-- PortOne SDK --> | |
| <script src="https://cdn.iamport.kr/v1/iamport.js"></script> | |
| <!-- jQuery --> | |
| <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script> | |
| <!-- iamport.payment.js --> | |
| <script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.1.8.js"></script> | |
| <script> | |
| var IMP = window.IMP; | |
| IMP.init("imp31818680"); | |
| function requestPay() { | |
| IMP.request_pay( | |
| { | |
| pg: "html5_inicis", | |
| pay_method: "card", | |
| merchant_uid: 기밀 | |
| name: 기밀 | |
| amount: 기밀 | |
| buyer_email: 기밀 | |
| buyer_name: 기밀 | |
| buyer_tel: 기밀 | |
| buyer_addr: 기밀 | |
| buyer_postcode: 기밀 | |
| }, | |
| function (rsp) { //결제 성공시 | |
| if (rsp.success) {// 결제성공시 로직 | |
| console.log(rsp.imp_uid) | |
| let data = { | |
| amount:rsp.paid_amount, | |
| imp_uid: rsp.imp_uid, // 결제 고유번호 | |
| merchant_uid: rsp.merchant_uid, // 주문번호 | |
| dataProductId:1 | |
| }; | |
| //결제 검증 | |
| $.ajax({ | |
| type:"POST", | |
| url:"http://localhost:8081/v1/payments/verifyIamport", | |
| data:JSON.stringify(data), | |
| contentType:"application/json; charset=utf-8", | |
| dataType:"json", | |
| // 이 헤더에 토큰정보 꼭 넣어서 보내야함. | |
| headers: { | |
| "Authorization": "Bearer " +"기밀토큰"// 획득한 토큰을 여기에 넣어주세요 | |
| }, | |
| success: function(result) { | |
| alert("결제검증 완료"); | |
| // 주문 api 호출 | |
| //self.close(); | |
| }, | |
| error: function(result){ | |
| alert(result.responseText); | |
| // cancelPayments(rsp); | |
| } | |
| }); | |
| } else {// 결제 실패 시 로직 | |
| alert("결재 실패"); | |
| alert(rsp.error_msg); | |
| console.log(rsp); | |
| } | |
| // callback | |
| //rsp.imp_uid 값으로 결제 단건조회 API를 호출하여 결제결과를 판단합니다. | |
| // if (rsp.success) { | |
| // $.ajax({ | |
| // url: "/payment/validate/" + rsp.imp_uid, | |
| // method: "GET", | |
| // contentType: "application/json", | |
| // data: JSON.stringify({ | |
| // imp_uid: 기밀 | |
| // merchant_uid:기밀 | |
| // amount: 기밀 | |
| // }), | |
| // }).done(function (data) { | |
| // // 가맹점 서버 결제 API 성공시 로직 | |
| // }) | |
| // } else { | |
| // alert("결제에 실패하였습니다. 에러 내용: " + rsp.error_msg); | |
| // } | |
| } | |
| ); | |
| } | |
| </script> | |
| <meta charset="UTF-8" /> | |
| <title>Sample Payment</title> | |
| </head> | |
| <body> | |
| <button onclick="requestPay()">결제하기</button> | |
| <!-- 결제하기 버튼 생성 --> | |
| </body> | |
| </html> |
부석순하자 ~ 파이팅하자 ~
'Frontend > GAN:ERATE' 카테고리의 다른 글
| [REACT] 상품 데이터 서버에서 불러오기 (0) | 2023.08.25 |
|---|---|
| [REACT] 아임포트 일반결제 성공 (0) | 2023.08.25 |
| [REACT] 회원가입 파트에서 백앤드와 통신했던 코드 (1) | 2023.08.19 |
| [REACT] 상품 등록 페이지 & 상품 상세 검색 페이지 구현 (0) | 2023.08.05 |
| GITHUB & vscode 터미널 창에서 자주 쓰는 코드 (0) | 2023.07.14 |
