Payment Request API가 어떻게 작동하는지 개략적으로 알아봅니다.
결제 요청 API
고객이 웹사이트에서 무언가를 구매하려고 하면 사이트는 고객에게 결제 정보 및 배송 환경설정과 같은 기타 정보(선택사항)를 제공해 달라고 요청해야 합니다. Payment Request API (PR API)를 사용하면 쉽고 빠르게 이 작업을 수행할 수 있습니다.
기본 구조
PaymentRequest
객체를 구성하려면 결제 수단과 결제 세부정보라는 두 매개변수가 필요합니다. 또한 세 번째 payment options 매개변수는 선택사항입니다. 기본 요청은 다음과 같이 작성할 수 있습니다.
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' }
}
};
결제 수단을 사용할 수 있는지 확인
결제 절차를 호출하기 전에 판매자는 사용자와 환경이 결제할 준비가 되었는지 확인할 수 있습니다.
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를 닫을 수 있습니다.
다음 단계
웹 결제에 대해 자세히 알아보세요.