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를 닫을 수 있습니다.
다음 단계
웹 결제에 대해 자세히 알아보세요.