자바스크립트 "Payment Handler API"
Payment Handler API는 웹 개발자가 자신의 웹사이트 또는 애플리케이션에 대한 사용자 정의 지불 핸들러를 생성할 수 있는 JavaScript API입니다. 웹 브라우저가 결제 앱 및 시스템과 통신할 수 있는 표준화된 방법을 제공하여 사용자가 안전하고 효율적으로 결제할 수 있도록 합니다.
Payment Handler API는 Payment Request API와 Payment Handler API의 두 가지 주요 구성 요소로 구성됩니다. Payment Request API는 웹 개발자가 결제 요청을 시작하는 데 사용하는 반면 Payment Handler API는 결제 앱에서 이러한 요청에 응답하고 결제를 처리하는 데 사용합니다.
다음은 Payment Handler API를 사용하는 방법의 예입니다.
// Register a payment handler
async function registerPaymentHandler() {
const registration = await navigator.paymentHandler.register({
name: 'My Payment Handler',
method: 'https://my-payment-handler.com/pay',
// Other payment handler details
});
// Handle registration success or failure
}
// Make a payment request
async function makePayment() {
const request = new PaymentRequest(
[{ supportedMethods: 'https://my-payment-handler.com/pay' }],
{
// Payment request details
}
);
// Show the payment UI
const response = await request.show();
// Process the payment with the registered payment handler
const paymentResponse = await response.complete('success');
// Handle payment success or failure
}
이 예제에서 `registerPaymentHandler()` 함수는 브라우저에 결제 처리기를 등록하여 결제 처리기의 이름 및 결제 요청을 보내야 하는 URL과 같은 세부 정보를 제공합니다. `makePayment()` 함수는 등록된 결제 핸들러의 URL을 지원되는 결제 수단으로 지정하여 결제 요청 API를 사용하여 결제 요청을 시작합니다. 사용자가 이 결제 수단을 선택하고 결제를 완료하면 결제 처리기가 호출되어 결제를 처리합니다.
결제 처리기 자체를 구현하려면 결제 요청을 수신하고 결제 세부 정보 및 처리 상태로 응답할 수 있는 서버 측 구성 요소를 만들어야 합니다. 다음은 Node.js 및 Express를 사용한 서버 측 구현의 예입니다.
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
// Handle payment requests
app.post('/pay', (req, res) => {
// Parse payment request data from the request body
const requestData = req.body;
// Process the payment and generate a payment response
const paymentResponse = {
methodName: 'https://my-payment-handler.com/pay',
details: {
// Payment details
},
// Other payment response data
};
// Send the payment response back to the browser
res.json(paymentResponse);
});
app.listen(3000, () => {
console.log('Payment handler server started on port 3000');
});
이 예에서는 이전 예에서 결제 수단으로 지정된 URL인 `/pay` 엔드포인트에 대한 POST 요청을 수신 대기하는 Express 앱을 생성합니다. 결제 요청이 수신되면 서버는 결제를 처리하고 결제 응답을 생성하여 JSON 개체로 브라우저에 다시 보냅니다.
지불 처리기 구현의 세부 사항은 사용 중인 특정 지불 시스템과 웹 애플리케이션 또는 웹 사이트의 요구 사항에 따라 달라집니다.