Payment Request API 작동 방식

Payment Request API가 어떻게 작동하는지 개략적으로 알아봅니다.

결제 요청 API

고객이 웹사이트에서 무언가를 구매하려고 하면 사이트는 고객에게 결제 정보 및 배송 환경설정과 같은 기타 정보(선택사항)를 제공해 달라고 요청해야 합니다. Payment Request API (PR API)를 사용하면 쉽고 빠르게 이 작업을 수행할 수 있습니다.

기본 구조

PaymentRequest 객체를 구성하려면 결제 수단결제 세부정보라는 두 매개변수가 필요합니다. 또한 세 번째 payment options 매개변수는 선택사항입니다. 기본 요청은 다음과 같이 작성할 수 있습니다.

const request = new PaymentRequest(paymentMethods, paymentDetails);

각 매개변수가 어떻게 빌드되고 사용되는지 살펴보겠습니다.

결제 수단

첫 번째 매개변수인 paymentMethods는 배열 변수의 지원되는 결제 수단 목록입니다. 배열의 각 요소는 supportedMethodsdata(선택사항)의 두 가지 구성요소로 구성됩니다.

supportedMethods의 경우 판매자는 https://bobbucks.dev/pay와 같은 결제 수단 식별자를 지정해야 합니다. data의 존재 여부와 콘텐츠는 supportedMethods의 콘텐츠와 결제 앱 제공업체의 설계에 따라 다릅니다.

두 정보 모두 결제 앱 제공업체가 제공해야 합니다.

// Supported payment methods
const paymentMethods = [{
  supportedMethods: 'https://bobbucks.dev/pay',
  data: {
    ... // Optional parameters defined by the payment app provider.
  }
}];

결제 세부정보

두 번째 매개변수인 paymentDetails는 객체로 전달되며 거래의 결제 세부정보를 지정합니다. 여기에는 고객이 지불해야 하는 총 금액을 지정하는 필수 값 total가 포함됩니다. 이 매개변수는 선택적으로 구매한 상품을 나열할 수도 있습니다.

아래 예에서는 필요한 총 결제 금액과 마찬가지로 선택사항인 구매 상품 목록 (이 경우 하나의 상품만)이 표시됩니다. 두 경우 모두 통화 단위는 개별 금액으로 지정됩니다.

const paymentDetails = {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
};

결제 수단을 사용할 수 있는지 확인

결제 절차를 호출하기 전에 판매자는 사용자와 환경이 결제할 준비가 되었는지 확인할 수 있습니다.

canMakePayment()를 호출하면 브라우저에서 객체에 지정된 결제 수단을 1개 이상 지원하는지 확인합니다.

request.canMakePayment().then(result => {
  if (result) {
    // This browser supports the specified payment method.
  } else {
    // This browser does NOT support the specified payment method.
  }
}).catch(e => {
  // An exception
});

MDN의 PaymentRequest.canMakePayment()에 대해 자세히 알아보기

show() 메서드

두 매개변수를 설정하고 위와 같이 request 객체를 만든 후 결제 앱 사용자 인터페이스를 표시하는 show() 메서드를 호출할 수 있습니다.

request.show().then(response => {
  // [process payment]
  // send to a PSP etc.
  response.complete('success');
});

결제 앱 사용자 인터페이스의 모습은 결제 앱 제공업체에 따라 다릅니다. 고객이 결제에 동의하면 송금에 필요한 모든 정보가 포함된 JSON 객체가 판매자에게 전달됩니다. 그러면 판매자는 이 금액을 PSP로 보내 결제를 처리할 수 있습니다.

마지막으로 PSP가 반환하는 결과에 따라 response.complete('success') 또는 response.complete('fail')로 프로세스를 완료하여 결제 요청 UI를 닫을 수 있습니다.

다음 단계

웹 결제에 대해 자세히 알아보세요.