Payment Request API 작동 방식

Payment Request API가 어떻게 작동하는지 개략적으로 알아보세요.

Eiji Kitamura

결제 요청 API

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

기본 구조

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

const request = new PaymentRequest(paymentMethods, paymentDetails);

각 매개변수의 빌드 및 사용 방식을 살펴보겠습니다.

결제 수단

첫 번째 매개변수인 paymentMethods는 배열 변수에서 지원되는 결제 수단의 목록입니다. 배열의 각 요소는 supportedMethods 및 data(선택사항)의 두 구성요소로 이루어집니다.

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' }
  }
};

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

Chrome은 PaymentRequest 객체를 구성하는 동안 사용자와 환경이 결제할 준비가 되었는지 확인합니다.

사용자 및 환경이 결제할 준비가 되었는지 확인하려면 결제 절차를 호출하기 전에 canMakePayment()를 호출합니다. 브라우저가 객체에 지정된 결제 수단을 하나 이상 지원하는 경우 canMakePayment()를 호출하면 true가 반환됩니다.

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를 닫을 수 있습니다.

다음 단계

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