Payment Request API 작동 방식

Payment Request 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가 포함됩니다. 이 매개변수는 원하는 경우 구매한 상품을 나열할 수도 있습니다.

아래 예에서는 선택적 구매 항목 목록 (이 경우 항목 1개)과 필요한 총 결제 금액이 표시됩니다. 두 경우 모두 통화 단위는 각 개별 금액으로 지정됩니다.

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

다음 단계

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