- 터보링크를 사용하여 자바스크립트 앱의 인앱 결제 기능 추가하기

09 Nov 2023

Turbolinks

인앱 결제 기능은 모바일 앱 또는 웹 앱에서 디지털 상품을 구매하는 기능을 말합니다. 이 기능을 구현하기 위해서는 결제 게이트웨이를 통해 신용카드나 전자 지갑 등의 결제 수단을 이용해야 합니다. 이번 튜토리얼에서는 터보링크(TurboLinks)를 사용하여 자바스크립트 앱에 인앱 결제 기능을 추가하는 방법에 대해 알아보겠습니다.

터보링크란?

터보링크는 웹 애플리케이션에서 페이지의 부분 갱신을 통해 빠른 네비게이션 경험을 제공하는 자바스크립트 라이브러리입니다. 터보링크는 페이지를 적재하지 않고 필요한 HTML, CSS 및 자바스크립트를 비동기로 로딩하여 사용자가 웹 앱을 사용하는 동안 더 빠른 전환과 응답 속도를 제공합니다.

터보링크로 인앱 결제 기능 추가하기

터보링크 라이브러리 추가하기

먼저, 자바스크립트 앱에 터보링크 라이브러리를 추가해야 합니다. 이를 위해 HTML 파일의 <head> 태그 안에 다음과 같이 스크립트 태그를 추가합니다.
```
<script src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.0.0/dist/turbo.es2017.cjs.js"></script>
```
결제 버튼 만들기

인앱 결제를 위한 버튼을 만들어야 합니다. 예를 들어, 다음과 같이 <button> 태그를 사용하여 결제 버튼을 생성할 수 있습니다.
```
<button id="purchase-btn" data-action="turbo-frame:submit" data-frame="payment-frame">구매하기</button>
```
위 예시에서는 purchase-btn 라는 ID를 가진 버튼을 생성하였고, data-action 속성을 이용하여 터보링크의 동작을 설정하였습니다. data-frame 속성은 결제 프레임을 지정합니다.
결제 프레임 만들기

터보링크를 사용하여 인앱 결제를 처리하기 위해서는 결제 프레임을 생성해야 합니다. 예를 들어, 다음과 같이 <turbo-frame> 태그를 사용하여 결제 프레임을 생성할 수 있습니다.
```
<turbo-frame id="payment-frame" src="/payment"></turbo-frame>
```
위 예시에서는 payment-frame 이라는 ID를 가진 결제 프레임을 생성하였고, src 속성을 이용하여 결제 처리를 담당할 서버 사이드 코드와 연결합니다.
결제 처리 로직 구현하기

자바스크립트 앱에서는 결제 처리를 위한 로직을 구현해야 합니다. 서버 사이드에서는 해당 결제를 처리하는 API 또는 라이브러리를 사용하여 실제 결제를 진행합니다. 이후, 결제 완료 또는 실패에 대한 처리 로직을 자바스크립트 앱에서 구현할 수 있습니다.
```
document.addEventListener("turbo:submit-end", (event) => {
  const frame = event.target;
  const response = frame.getResponse();

  if (response.success) {
    // 결제 완료에 대한 처리 로직
  } else {
    // 결제 실패에 대한 처리 로직
  }
});
```
위 예시는 결제 요청 이후 터보링크 이벤트인 turbo:submit-end 를 이용하여 응답을 처리하는 로직입니다. 응답에서 성공 여부를 확인하고, 결제 완료 또는 실패에 대한 처리 로직을 구현할 수 있습니다.
테스트 및 배포하기

인앱 결제 기능을 추가한 자바스크립트 앱을 테스트하고 배포해야 합니다. 테스트 과정에서는 실제 결제를 시뮬레이션하거나 결제 게이트웨이의 테스트 모드를 사용하여 테스트를 진행할 수 있습니다. 배포 후에는 사용자들이 앱을 통해 인앱 결제를 이용할 수 있게 됩니다.

위의 단계를 따라가면 자바스크립트 앱에 터보링크를 사용하여 인앱 결제 기능을 추가할 수 있습니다. 터보링크를 이용하면 빠르고 간편하게 인앱 결제 기능을 구현할 수 있으며, 사용자들에게 더 나은 결제 경험을 제공할 수 있습니다.

참고 자료: