들어가며
본 가이드 문서는 다음과 같이 각 토스페이먼츠의 결제창을 이용하여 연동하신 경우 손쉽게 결제위젯으로 마이그레이션 할 수 있는 방법을 포함하고 있습니다.
기존 연동 방식인 통합결제창 연동한 코드 예시
마이그레이션 과정
이미 토스페이먼츠로 연동을 하신 경우 서버 코드는 전혀 수정하실 필요 없이 front-end 코드만 약간 수정하여 결제위젯으로 마이그레이션하실 수 있습니다. (XPAY 모듈은 제외)
좌측에 보이는게 가맹점에서 직접 구현하신 결제창이며 우측의 화면이 결제위젯으로 마이그레이션한 화면입니다.
원하는 결제수단을 선택한 다음 “결제하기” 버튼을 누르면 현재 선택되어있는 결제수단과 결제 정보를 갖고 requestPayment(”카드”), requestPayment(”휴대폰”) 와 같은 코드를 직접 호출하는 것이 기존의 방식이고, 결제위젯은 그런 코드를 작성하실 필요 없이 결제 영역으로 사용할 곳을 선택하여 결제위젯을 그리는 renderPaymentMethods() 메소드를 호출하시면 됩니다.
다음은 마이그레이션 과정의 이해를 돕기위한 예시 영상입니다.
마이그레이션 과정은 다음과 같은 순서로 진행됩니다.
1.
기존 결제수단 영역 코드를 삭제합니다.
2.
3.
가맹점의 마이그레이션 코드 예시는 다음과 같습니다. (어떤 개념인지 이해를 위한 가이드 코드입니다.)
// 결제위젯 스크립트 추가
const script = document.createElement('script')
script.src = 'https://js.tosspayments.com/v1/payment-widget'
document.head.append(script)
// 기존 결제창 삭제
document.querySelector('.tbl_form.bdbn').remove()
document.querySelector('#card-info-show').remove()
document.querySelector('#orderAgreeNextLabel').remove()
document.querySelector('.tit_cont.inline').remove()
// 결제위젯 추가
CLIENT_KEY = 'test_ck_OEP59LybZ8B1MNwPE4Jr6GYo7pRe'
AMOUNT = 500_000
const payments = document.createElement('div')
payments.id = 'payments'
document.querySelector('.order_area').appendChild(payments)
const paymentWidget = PaymentWidget(CLIENT_KEY, 'test-customer')
paymentWidget.renderPaymentMethods('#payments', AMOUNT)
// 기존 결제 버튼 변경
const button = document.querySelector('#orderSetlBtn')
const newButton = button.cloneNode(true)
newButton.addEventListener('click', () => {
paymentWidget.requestPayment({
orderId: 'unique-order-id',
orderName: '상품명',
successUrl: 'https://shop.com/success',
failUrl: 'https://shop.com/success',
customerEmail: 'customer@email.com',
customerName: '김토스'
})
})
button.parentNode.replaceChild(newButton, button)
JavaScript
복사
토스페이먼츠를 통하지 않고 결제하는 결제수단이 있어요
네이버페이와 같은 일부 간편결제 수단을 토스페이먼츠가 아닌 직접 계약하셔서 사용하시나요? 혹은 일부 결제수단은 다른 PG를 통해서 사용하시나요?
그런 경우에도 “커스텀 결제수단”, “간편결제 직연동” 기능을 통해 결제위젯을 통해 연동하실 수 있습니다. 결제위젯을 통해 결제창을 그리고 따로 붙이고 싶은 결제수단을 결제 버튼에 추가할 수 있습니다.
