자바스크립트 "Payment Request API"

Payment Request API는 웹사이트 또는 웹 애플리케이션이 표준화되고 간소화된 사용자 인터페이스를 통해 사용자에게 지불 정보를 요청할 수 있도록 하는 JavaScript API입니다. 이 API를 통해 사용자는 양식을 작성하거나 별도의 결제 게이트웨이로 이동하는 것과 같은 기존 결제 방법보다 쉽고 효율적으로 결제 거래를 완료할 수 있습니다.

​

Payment Request API는 Chrome, Firefox, Edge 및 Safari를 포함한 대부분의 최신 웹 브라우저에서 지원됩니다. 다음은 Payment Request API를 사용하여 사용자에게 결제를 요청하는 방법의 예입니다.

​

// Define the payment details

const paymentDetails = {

total: {

label: 'Total cost',

amount: {

currency: 'USD',

value: '10.00'

}

}

};

​

// Define the payment options

const paymentOptions = {

requestPayerName: true,

requestPayerEmail: true,

requestPayerPhone: true,

requestShipping: true

};

​

// Create a new PaymentRequest instance

const paymentRequest = new PaymentRequest(

[ { supportedMethods: ['basic-card'] } ],

paymentDetails,

paymentOptions

);

​

// Show the payment sheet when the user clicks a button

document.getElementById('buyButton').addEventListener('click', () => {

paymentRequest.show()

.then(paymentResponse => {

// Send the payment information to your server for processing

fetch('/processPayment', {

method: 'POST',

body: JSON.stringify(paymentResponse.toJSON()),

headers: { 'Content-Type': 'application/json' }

})

.then(response => response.json())

.then(response => {

if (response.success) {

paymentResponse.complete('success');

} else {

paymentResponse.complete('fail');

}

});

})

.catch(error => {

console.error(error);

});

});

​

이 예제에서는 결제 세부 정보 및 옵션을 정의하고, 새 `PaymentRequest` 인스턴스를 생성하고, 사용자가 `id`가 `buyButton`인 버튼을 클릭할 때 결제 시트를 표시합니다. 사용자가 결제를 완료하면 처리를 위해 결제 정보가 서버로 전송되고 결제 응답은 성공 또는 실패 상태로 완료됩니다.

​

Payment Request API는 사용자로부터 지불 정보를 수집하는 표준화되고 사용자 친화적인 방법을 제공하여 웹 개발자가 자신의 웹사이트 또는 애플리케이션에서 지불 기능을 보다 쉽게 구현할 수 있도록 합니다.