버블에 국내 PG를 붙이는 걸 상당히 어려워 하는 분들이 많다.
예시로 대표적인 카드결제 방법 매뉴얼을 적어놓으면 다른 결제 방식도 응용할 수 있을 확률이 많으니
일단 기본적인 카드 결제 다는 방법을 준비했다.
참고 : https://docs.tosspayments.com/guides/overview
시작하기 | 토스페이먼츠 개발자센터
결제 연동에 필요한 모든 정보를 알려드려요.
docs.tosspayments.com
1. 스크립트 설치하기
Setting > header태그에 SDK 스크립트를 심는다.
<script src="https://js.tosspayments.com/v1/payment"></script>2. 결제하기 버튼에 워크플로우 넣기
결제버튼을 누르면 자바스크립트 코드를 실행시킬 것이기 때문에 ToolBox 플러그인을 설치해야 한다.
없으면 설치 후 진행하자.
https://bubble.io/plugin/toolbox-1488796042609x768734193128308700
Toolbox Plugin for Bubble, by Misha V
Toolbox Plugin page on Bubble, by Misha V. Add Toolbox in one click to your app. Bubble lets you build web apps without any code.
bubble.io
var clientKey = 'test_ck_어쩌고저쩌고'
var tossPayments = TossPayments(clientKey) // 클라이언트 키로 초기화하기
tossPayments.requestPayment('카드', { // 결제 수단 파라미터
// 결제 정보 파라미터
amount: 결제금액(숫자),
orderId: '결제요청문자열',
orderName: '상품명',
successUrl: '성공 url',
failUrl: '실패 url',
})클라이언트 키는 토스페이먼츠에 가입하면 테스트, 라이브용 키가 발급된다.
아래 결제 파라미터는 필수 파라미터만 적어놓았고,
적절한 파라미터들은 개발자 문서를 참고해서 추가하면 된다.
3. 결제 승인 요청하기
결제 승인 요청을 받기 전에 결제내역의 데이터 타입을 만든다.
예시니까 결제 성공 리다이렉트 URL에서 주는 paymentKey, orderId, amount만 일단 필드로 넣어놓겠다.
필자는 성공 URL을 같은 페이지로 해놓았기 때문에,
워크플로우 Do when condition is true 에서 orderId가 파라미터로 왔을 때 결제성공 팝업창을 띄워주도록 했다.
4. 결제 승인 API 요청
사용자가 토스 결제창에서 결제를 완료한 후에,
결제 승인 API를 호출하기 위해 버블의 API Connector 플러그인을 추가한다.
필자는 API 이름을 결제라고 지었고 인증을 위해 헤더에 키를 부여해준다.
키 값은 부여받은 시크릿키를 base64로 인코딩하여 앞에 Basic 을 추가한 뒤 적어놓으면 된다.
⚠️주의⚠️ 시크릿키 뒤에 ':' 를 꼭 붙여서 인코딩 해야됩니다!
인코딩 사이트는 여기! https://www.base64encode.org/
Base64 Encode and Decode - Online
Encode to Base64 format or decode from it with various advanced options. Our site has an easy to use online tool to convert your data.
www.base64encode.org
API Call을 추가하고 Initialize call을 해주면 된다.
Value값들은 프리뷰에서 결제버튼을 클릭하고 결제 내역에 저장된 값을 바탕으로 임의로 쏴보면 된다.
5. 결제 완료
마지막으로 결제완료를 눌렀을 때 실제 결제 승인이 잘 났는지 확인하는 작업을 진행한다.
댓글