Payments API를 활용한 자바스크립트 웹 앱 다국가 화폐 지원 구현

07 Nov 2023

payments

개요

이번 블로그 포스트에서는 Payments API를 활용하여 자바스크립트 웹 앱에서 다국가 화폐 지원을 구현하는 방법을 알아보겠습니다. Payments API는 전자상거래 웹 앱에서 결제 처리를 간편하게 할 수 있도록 도와주는 API입니다. 자바스크립트를 사용하여 Payments API를 호출하여 다국가 화폐를 지원하는 웹 앱을 만들어 보겠습니다.

Payments API 설정

먼저 Payments API를 사용하기 위해 필요한 설정을 해야 합니다.

Payments API를 사용하기 위해선 Google Pay 또는 Apple Pay와 같은 결제 플랫폼에 가입해야 합니다. 각 플랫폼에서 제공하는 개발자용 포털에서 계정을 생성하고 API 키를 발급받아야 합니다.
받은 API 키를 웹 앱의 코드에 추가합니다. 자바스크립트 코드에서 Payments API에 접근할 수 있도록 API 키를 설정해야 합니다.

<script src="https://payments.google.com/payments.js"></script>
<script>
  window.payments.setEnvironment('TEST');
  window.payments.setApiKey('YOUR_API_KEY');
</script>

화폐 단위 설정

Payments API를 사용하여 다국가 화폐를 지원하는 웹 앱을 구현하기 위해서는 화폐 단위 설정이 필요합니다. 예를 들어, 웹 앱에서 한화, 달러, 유로 등 여러 화폐 단위를 지원한다고 가정해봅시다.

const supportedCurrencies = ['KRW', 'USD', 'EUR'];
window.payments.setSupportedCurrencies(supportedCurrencies);

위의 예시 코드에서는 supportedCurrencies 배열에 지원할 화폐 단위를 설정하고, window.payments.setSupportedCurrencies() 함수를 호출하여 Payments API에 화폐 단위 설정을 전달합니다.

결제 요청 처리

이제 웹 앱에서 결제 요청을 처리하는 방법을 알아보겠습니다.

const paymentRequest = window.payments.createPaymentRequest({
  supportedNetworks: ['visa', 'mastercard'],
  supportedTypes: ['credit', 'debit'],
  country: 'KR',
  currency: 'KRW',
  total: {
    label: 'Total amount',
    amount: {
      currency: 'KRW',
      value: '100000'
    }
  }
});

paymentRequest.show().then(paymentResponse => {
  // 결제 확인 및 후속 작업 처리
}).catch(error => {
  // 결제 실패 처리
});

위의 코드에서는 window.payments.createPaymentRequest() 함수를 호출하여 결제 요청 객체를 생성합니다. 이때, supportedNetworks와 supportedTypes을 통해 결제 수단을 설정하고, country와 currency를 통해 원하는 국가와 화폐를 설정합니다. 또한, total을 통해 결제할 총액을 설정합니다.

결제 요청 객체를 생성한 후에는 paymentRequest.show() 함수를 호출하여 결제 화면을 표시합니다. 사용자가 결제를 완료하면 Promise가 이행되고 paymentResponse 객체를 반환하여 결제 확인 및 후속 작업을 처리할 수 있습니다. 결제 도중에 오류가 발생하면 catch 블록에서 오류 처리를 할 수 있습니다.

결론

이렇게 Payments API를 활용하여 자바스크립트 웹 앱에서 다국가 화폐를 지원하는 결제 기능을 구현할 수 있습니다. Payments API는 간편한 결제 처리를 위한 강력한 도구이므로, 전자상거래 웹 앱 개발에 유용하게 활용할 수 있습니다.

참고 자료

Payments API 공식 문서