V0.0.2 (더이상 업데이트 되지 않을 예정입니다.)
Release Note
v.0.0.1 - 최초버전
v.0.0.2 - 결제창 호출시 에러 핸들링(결제창 닫기 포함) 추가, 승인 API 호출 실패시 에러메시지 받을수 있도록 수정
버블 결제플러그인 사용법 가이드 입니다.
관련 문의는 토스페이먼츠 개발자 디스코드 채널을 통해 진행하고 있습니다.
해당 URL로 접속하셔서 디스코드에 로그인 하신후 #연동개발-문의 에 문의하시면 답변드리도록 하겠습니다.
버블 결제창 플러그인을 통해서는 페이팔 및 기타 해외 간편 결제수단은 연동이 불가능합니다. 국내 결제수단 결제만 지원하므로 참고부탁드립니다.
플러그인 등록
플러그인 이름은 TossPayments-Basic 입니다.
버블 플러그인 탭에서 검색하신후 설치하시면 됩니다.
플러그인 설정의 UserName 에는 토스페이먼츠 상점의 secretkey를
API KEY 에는 clientkey 를 넣어주면 됩니다.
만약 상점 정보가 없으시다면(토스페이먼츠 PG를 사용하지 않는다면) 아래 값으로 테스트 해볼 수 있습니다.
secretKey : test_sk_zXLkKEypNArWmo50nX3lmeaxYG5R
clientKey : test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq
결제 페이지 생성
플러그인을 추가하셨으면 element 에 “payment window” 가 추가 되었을 겁니다.
이 element를 배치하시고, “카드결제” 버튼을 하나 추가합니다.
“카드 결제” 버튼의 click workflow 를 추가합니다.
Step 1> Element Actions → payment window → set value a payment window 를 선택하시고
아래와 같이 결제에 필요한 정보를 넣어주세요.
를 참고해 주시기 바랍니다.
Step 2> Element Actions → payment window → Click a payment window 를 선택합니다.
이제 preview 로 가서 “결제하기” 버튼을 누르면 결제창이 뜨는지 확인합니다.
결제 승인 페이지 생성
결제승인 페이지는 결제 페이지와 동일 URL 에 success로 고정되어 있으므로 success page 를 새로 만들어 줍니다.
생성된 success page 에서 “Page is loaded” workflow를 추가하고
Step 1>에서 plugins → TossPayments APIs - confirm payments 를 선택합니다.
paymentKey, orderId, amount 정보를 넣어야 하는데, 이 정보를
“Get data from page URL” 을 선택한후 parameter name 에 paymentKey, orderId, amount 세 가지를 맞춰 설정해 주세요.
Step2 에서는 API 호출하신 내용을 받아 보시도록 설정하시면 됩니다.
API 의 결과(결제 결과)는 Element Actions → set state 등을 통해 Result of step 1 을 이용해서 값을 넘겨주면
해당 값을 다른 element 를 통해 UI 에 표시해 줄 수 있습니다.
결제창 호출시 발생하는 에러 처리하기
0.0.6 버전이상 플러그인 에서는 결제창 호출시에 발생하는 에러를 처리할 수 있습니다. 결제창을 사용자가 닫은 경우에도 이 방식으로 처리가 가능합니다.
paymentWindow 를 추가하신후, Workflow 에서 이벤트를 listening 하실수 있습니다.
아래와 같이 payment window에 errors 이벤트가 있습니다.
해당 이벤트는 결제창에서 오류가 발생하는 경우 호출되는 이벤트로 이때 payment window 의 state에 code와 message 정보를 넘겨드리게 됩니다. 해당 값을 가져다가 원하시는 방식으로 표시해 주시면 됩니다.
승인 API 호출시 발생하는 에러 처리하기
TossPayments APIs - confirm payments 에 Error 처리가 가능하도록 하였습니다.
결제 성공 여부를 확인하시려면 API 호출의 결과에서 returned_an_error 를 체크하시면 됩니다.
실패내용은 error body code 와 error body message 를 사용하시면 됩니다.
