내 쇼핑몰에 결제연동을 하고 싶은데 어디서부터 시작해야 할지 알 수 없어 막막하셨죠? 이번 포스트에서는 그런 분들을 위해 주문서 만들기부터 시작하는 방법을 알려드려요.
결제 과정에서 고객이 만나게 되는 페이지는 크게 위 5가지예요. 이 포스트에서는 이미 상품을 선택할 수 있는 상품 리스트 페이지와 선택한 상품의 정보를 설명하는 상품 상세 페이지가 있다고 가정하고 결제연동이 시작되는 주문서 페이지부터 만들어 볼게요.
1️⃣ 주문서 만들기
상품을 결제하려고 하면 가장 먼저 해야 할 일은 주문서를 만드는 일이에요. 주문서 페이지에는 결제할 상품 정보, 배송지 정보, 할인 정보, 결제수단 정보 등 다양한 부분을 만들어야 해요. 아래 주문서를 구성하는 영역과 개발 체크리스트를 참고해서 계획을 세워보세요.
이 중에서 ④ 결제수단 선택 영역은 고객의 손쉬운 결제를 위해 가장 중요한 영역이에요. 고객이 어떤 카드, 어떤 계좌를 가지고 있을지 모르기 때문에 최대한 많은 결제수단을 제공하면 좋아요. OO페이 같은 간편결제도 제공하면 결제 전환율에 도움이 되죠. 또 실제로 PG사와 연결되는 부분이기 때문에 연동 공수도 많이 들어요.
✅ 결제수단 선택 영역 만들기
먼저 카드, 계좌이체, 가상계좌, 휴대폰 및 각종 간편결제 등 내 쇼핑몰에서 제공할 결제수단을 리스트업해요. 결제수단이 정해졌으면 이 결제수단 선택 영역을 어떤 식으로 구성할지 기획•디자인하고 개발합니다.
선택한 결제수단에 맞는 PG사 결제창을 실행할 수 있도록 작업합니다. 카드를 선택했다면 할부 개월 정보를 선택하는 기능은 필수에요. 가상계좌를 선택할 때는 환불 계좌 정보나 입금기한을 설정하는 기능도 추가해주세요.
✅ 약관 영역 만들기
상품 결제를 위해 필요한 약관 영역은 정보 관리가 필수예요. 여신전문금융업법, 전자금융거래법 등에 따라 고객의 개인 정보, 배송 정보 등을 다루는 결제를 진행하려면 고객의 약관 동의를 해야 하죠. PG사를 이용한다면 해당 PG사의 전자결제 서비스 이용 약관을 추가해 주세요. 이렇게 필요한 약관 정보는 따로 관리하면 유용해요.
약관 내용을 추가했다면 주문서에 동의 처리 기능을 추가해 주세요. 물론 고객의 동의 여부도 저장해 두어야 해요.
💡 주문서 결제 UI, 가장 쉽게 만드는 방법
토스페이먼츠를 사용하면 주문서의 결제수단 영역을 따로 디자인, 개발할 필요가 없어요. 기획자나 디자이너 없이 혼자 개발해야 하거나, 주문서 디자인에 쓸 시간이 부족하다면 결제위젯에서 만들어 주는 UI를 바로 사용하면 돼요. 내 쇼핑몰 브랜드에 맞게 디자인 커스텀도 가능한데요, 개발 없이 어드민으로 전부 가능해요. 개발이 필요하다고 했던 카드사 할부 개월 정보 선택이나 가상계좌 환불 계좌 정보, 입금기한 설정도 따로 개발할 필요 없어요. 내 쇼핑몰의 필수 이용약관, 회원·비회원 이용약관도 마찬가지죠.
개발자 입장에서는 이미 만들어진 화면을 메서드 하나로 바로 만들 수 있고, 각종 기능을 개발할 필요 없어 편리해요.
2️⃣ 결제영역 만들기
이제 주문서에서 선택한 결제수단 및 결제 정보로 결제를 진행해요.
✅ 선택한 결제수단의 결제창 실행하기
카드, 가상계좌, 휴대폰, 간편결제 등 각 결제수단을 선택했을 때 결제창이 실행되려면 알맞은 메서드와 파라미터를 연결해줘야 해요. 결제수단마다 필요한 정보가 조금씩 다르기 때문이에요. 메서드를 잘 설정했다면 결제창을 실행하기 전에 결제를 특정하는 키(key), 주문 ID, 주문 금액과 같은 최초의 결제 정보를 DB에 저장해 두세요. 결제 요청 전후의 데이터가 바뀌지 않았는지 확인하기 위함이에요. 저장해 둔 금액과 요청 결과로 돌아온 결제 금액을 비교하면 클라이언트에서 결제 금액을 조작, 승인하는 행위를 방지할 수 있어요.
✅ PG사 결제창에서 인증 요청하면 결과 받기
리다이렉트 URL은 결제 요청에 대한 결과를 받기 위해 필요해요. 요청에 대한 인증 결과를 리다이렉트 URL의 쿼리 파라미터로 받아 그 정보로 최종 결제 승인을 하기 때문이에요. 실제로 카드사에 결제를 승인해달라는 요청이 가고, 결제 승인 응답이 성공으로 돌아오면 결제가 완료돼요. 인증에 대해 좀 더 자세히 이해하고 싶다면 결제 요청, 인증, 승인… 이게 다 뭔가요?도 읽어보세요.
💡 PG사 화면 없이 바로 결제하기
토스페이먼츠를 사용하면 어떤 결제수단이든 메서드 하나로 결제창을 띄울 수 있어요. 또, PG사 화면을 거치지 않고 주문서에서 바로 선택한 결제수단 창, 예를 들어 신한카드 결제창으로 바로 연결돼요. 이렇게 카드사나 간편결제창이 바로 뜨면 고객의 결제 경험이 좋아지고 이탈이 줄어요. PG사 브랜드가 노출되지 않기 때문에 고객이 내 쇼핑몰의 브랜드 경험만 할 수 있다는 긍정적인 효과도 있어요.
3️⃣ 연동 마무리하기
이제 결제 완료 결과를 가지고 승인을 요청하고, 요청 결과에 따라 고객에게 보여 줄 결제 완료 페이지로 이동해요.
✅ 결제 승인 요청하고 결과 받기
결제를 마무리하는 단계에요. 인증 후 돌아온 정보로 승인 API를 호출하도록 구현하세요. API 호출 결과로 돌아온 값을 DB에 저장해요. 결제 승인에 대해 좀 더 자세히 이해하고 싶다면 결제 요청, 인증, 승인… 이게 다 뭔가요?를 확인해 보세요.
✅ 결제 완료 페이지 보여주기
마지막으로 고객에게 보여줄 결제 완료 페이지를 만들고, 결제 승인까지 완료되었다면 이 페이지로 이동하도록 구현하세요. 결제 승인이 잘 되었다면 이제 고객이 주문한 상품을 발송합니다.
4️⃣ 운영∙관리하기
결제수단 선택 영역에서 특정 결제수단을 빼고 싶거나 반대로 추가하고 싶을 때, 혹은 프로모션 배지 등 다른 커스터마이징이 필요하다면 어떻게 해야 할까요? 개발자 없이도 운영할 수 있도록 해 둔 토스페이먼츠 어드민에서 커스텀 기능을 이용하면 개발없이 바로 변경할 수 있어요. 기본적인 디자인 변경 뿐 아니라 상점관리자에서 내 쇼핑몰의 필수 약관, 회원·비회원 약관도 추가할 수 있습니다.
지금까지 결제연동을 시작할 때 무엇을 해야 하는지 간략히 소개드렸어요. 주문서의 결제 영역을 만들고 운영하는 데에 기획, 디자인, 개발.. 모든 영역에서 많은 노력이 필요하네요.
토스페이먼츠에서는 이런 가맹점의 어려움을 해결해주기 위해 결제위젯을 만들었어요. 이미 만들어진 깔끔한 UI를 메서드 하나로 그릴 수 있어요. 이렇게 간단히 연동하고 나면 개발자 도움 없이 화면을 커스텀하면서 운영할 수 있죠. 토스페이먼츠 결제위젯으로 연동을 시작해보세요!
Writer 한주연 Graphic 이은호, 이나눔
토스페이먼츠의 모든 콘텐츠는 사업자에게 도움이 될 만한 일반적인 정보를 ‘참고 목적’으로 한정해 제공하고 있습니다. 구체적 사안에 관한 자문 또는 홍보를 위한 것이 아니므로 콘텐츠 내용의 적법성이나 정확성에 대해 보증하지 않으며, 콘텐츠에서 취득한 정보로 인해 직간접적인 손해가 발생해도 어떠한 법적 책임도 부담하지 않습니다.
ⓒ토스페이먼츠, 무단 전재 및 배포 금지