Payments API를 활용한 자바스크립트 웹 앱 국제 결제 구현

07 Nov 2023

payments

소개

이번 포스트에서는 Payments API를 사용하여 자바스크립트 웹 앱에서 국제 결제를 구현하는 방법을 알아보겠습니다. 결제 API를 통해 사용자들은 웹에서 안전하고 편리한 결제 경험을 제공받을 수 있습니다. Payments API는 브라우저가 제공하는 내장 API이므로 추가적인 라이브러리 설치나 서버 측의 복잡한 설정 없이도 결제 기능을 구현할 수 있습니다.

선행 작업

웹 앱 개발을 위한 기본적인 HTML, CSS, JavaScript 지식
Payments API가 지원하는 브라우저 (Chrome, Firefox, Safari, Edge, Opera) 중 하나 설치

결제 요청

먼저, paymentRequest 객체를 생성합니다. 이 객체에는 결제에 필요한 정보들을 설정합니다.

const paymentRequest = new PaymentRequest(
  [{
    label: '상품명',
    amount: {
      currency: 'USD',
      value: '10.00'
    }
  }],
  {
    total: {
      label: '총 가격',
      amount: {
        currency: 'USD',
        value: '10.00'
      }
    }
  }
);

paymentRequest에는 결제할 상품의 목록과 총 가격 정보를 설정합니다.

결제가 성공할 경우의 처리를 위해 paymentRequest.onpaymentmethodchange 이벤트 핸들러를 등록합니다.

paymentRequest.onpaymentmethodchange = function(event) {
  // 결제 수단이 변경될 때의 동작
};

사용자가 결제 수단을 변경할 때마다 이벤트가 발생하며, 이를 통해 추가적인 동작을 수행할 수 있습니다.

결제를 진행하기 위해 show 메소드를 실행합니다.

paymentRequest.show()
  .then(function(paymentResponse) {
    // 결제가 성공적으로 완료될 경우의 동작
  })
  .catch(function(error) {
    // 결제 중 오류가 발생한 경우의 동작
  });

show 메소드는 결제 창을 브라우저에서 띄우고, 사용자가 결제를 완료하면 paymentResponse 객체를 반환합니다.

결제 응답 처리

paymentResponse 객체로부터 결제에 대한 정보를 얻을 수 있습니다.

console.log(paymentResponse.methodName); // 결제 수단 ('basic-card', 'https://bobpay.com/pay', 등)
console.log(paymentResponse.payerEmail); // 결제자 이메일
console.log(paymentResponse.shippingAddress); // 배송 주소
console.log(paymentResponse.shippingOption); // 선택한 배송 옵션

결제가 완료되면 paymentResponse.complete 메소드로 결제 완료를 알려줍니다.

paymentResponse.complete('success')
  .then(function() {
    // 결제 완료 후의 동작
  })
  .catch(function(error) {
    // 결제 완료 처리 중 오류가 발생한 경우의 동작
  });

complete 메소드에는 결제 상태(‘success’, ‘fail’)를 인자로 전달합니다.

결론

Payments API를 사용하면 자바스크립트 웹 앱에서 간편하게 국제 결제를 구현할 수 있습니다. paymentsRequest 객체를 통해 결제 요청을 생성하고, paymentResponse 객체를 통해 결제 완료 후의 처리를 할 수 있습니다. 이를 통해 사용자들은 편리하고 안전한 결제 경험을 제공받을 수 있습니다.

소개

선행 작업

결제 요청

결제 응답 처리

결론

참고 자료