우리가 인터넷을 통해 옷을 구매하는 과정은
실제로 아래와 같습니다.
1. 구매자가 구입할 옷에 대한 정보와 금액을 판매자에게 전달
2. 판매자는 전달받은 금액을 PG사에게 결제해줄 것을 요청
3. PG사는 요청받은 정보를 은행사에게 다시 결제 요청
4. 은행사는 요청받은 금액을 구매자의 계좌에서 출금 후 PG사로 전달
5. PG사는 판매자에게 금액을 전달 (일정량의 수수료를 제외)
6. 판매자는 금액 확인 후, 구매자에게 옷을 배송
PG는 Payment Gateway 의 줄임말로
구매자와 판매자 사이에서의 이뤄지는 결제를 안전하게 할 수 있도록
대행해주는 역할을 담당합니다.
개발자가 직접 결제프로세스를 적용 하는방법은 정말 어려운 작업일수도 있습니다 실제로 ERP를 자체 개발하여 사용하는 회사라면 정말 잔인한 작업이 될수가 잇죠 특히나 버전이 낮은 .NET 이라면.. 더욱더.... 오프라인 카드결제를 구현하기 위해서 DB에서 연결하는데 엄청난 시간과 노력을 드렷던 기억이 있습니다.. PG사에서 주는 버전은 높고 회사에서 사용하는 ERP는 버전은 낮고 ... PG사 담당자 분한테 하루에도 전화를 엄청했던 기억이 있었습니다.. ㅜ 결국 혼자서 해결못하고 선배의 도움으로 겨우겨우 우거지로 배포 했던 기억이 있습니다 ㅋㅋㅋ
너무 TMI이 였네요
이번에 사용할 서비스는 아임포트 입니다.
원하는 PG사와의 결제시스템을 연결시켜주는 결제 API 서비스입니다.
실제로 아임포트가 제공하는 API 를 사용하면
PG사와의 연결 과정은 모두 아임포트가 대신 처리해주기 때문에
복잡한 결제환경을 직접적으로 구현할 필요가 없어집니다.
너무 간편하지 않나요? 저위 코드마저 다 제공을 해주고 있습니다.
"IMP"는 window.imp라고 있습니다.
스크립트 가 실행되면 라이브러리를 다운받게 되는데 다운받은 라이브러리를 window.imp로 등록 하게 됩니다.
window는 가장 글로벌한 객체라고 생각하시면됩니다!
alert창 으로 경고를 확인할수 있잖아요? 이런 명령어들이 window에 등록되어 있습니다. 그리고우리가 사용할때는 window가 생략이 가능하기때문에 그냥 alert으로 사용할수가 있는겁니다.
jsx를 사용해서 Head를 만들어주고 Script를 작성해주시면 됩니다.
jsx를 사용하지않고 순수 리엑트만 사용하게된다면 헬멧이라고 입니다!!
이름만 다를뿐 사용하는 방법은 동일합니다.
최신 라이브러리 정보 확인후 복붙!
짜로랑~~
겁나 간편하고 쉽죠? 카드 결제및 카카오페이 다가능합니다!!
완전 개꿀~
결제가 성공하게 되면 imp_uid 저녀석이 DB로 넘어가게되공~
merchant_uid는 주석처리 했기 때문에 자동으로 만들어줍니당~
하지만 모바일에서는 또 얘기가 달라집니다!
모바일에서는 웹사이트 페이지가 전환이 되버리는데 여기서 발생하는 문제점이 2가지 인데 첫번째 문제점이 결제를 하고 어디로 돌아갈것인가!!
그리고 만들어진결제 정보를 어떻게 DB로 전달할것인가!!
2번째 문제점은 아임포트 에서 직접 요청하는 방법으로 requeset를 날릴수가 잇어요~
그리고 결제한 시간이 조금 문제가 될수도 있다고 합니다!
어디서 브라우저를 실행시켰냐 에 따라서 달라질수 있기 때문에 프론트에서 시간을 직접 만지지 않는다고 합니다!
백엔드에서 세션 메모리 라는게 있는데 그걸 사용하지 않는이유는 백엔드 컴퓨터 마다 시간이 달라서 그 시간을 맞춰주는 시간 컴퓨터가 하나 더있어야 합니다! 시간 컴퓨터의 시간을 백엔드컴퓨터에 동기화 시켜주고 동기화된 벡엔드 컴퓨터가 다시 DB 로 보내지게 됩니다. 이런 내용 때문에 프론트에서 직접 시간을 만들어 주지 않는다고 합니다. 이런 서버를 NTP서버라고 합니다!
글로벌 서비스라고 하면 또 얘기가 달라집니다.
결재를 각각 다른나라에서 결재를 시도하게된다면 백엔드에서 DB로 저장하는 시간이 있는데 세계 표준시간으로 저장하게 되요 UTC라고 합니다!
이시간 기준으로 + , - 로 해서 저장됩니다! 한국은 +9! 입니다!
실제로 저장되는 시간은 utc 이지만 지역마다 나라에 맞게 시간을 맞춰서 보여주게 됩니다.
시관관련 라이브러리가 있는데 Moment.js라고 제공됩니다!
이건 다음에 한번 알아보도록 하죠 ~!
