웹 결제의 새로운 기능을 알아보세요.
웹 결제는 2016년부터 브라우저에서 공개적으로 사용할 수 있게 되었습니다. 핵심 기능인 Payment Request API가 이제 Chrome, Safari, Edge, 곧 출시되는 Firefox 등 여러 브라우저에서 사용할 수 있습니다. 웹 결제를 처음 사용하는 경우 '웹 결제 개요'를 참조하여 시작하세요.
Payment Request API와 Payment Handler API가 출시된 이후 각 사양이 많이 변경되었습니다. 이러한 변경으로 인해 작동 코드가 손상되지는 않지만, 주목하는 것이 좋습니다. 이 게시물에서는 이러한 업데이트를 요약하고 API 변경사항을 계속 축적합니다.
새 메서드: hasEnrolledInstrument()
이전 버전의 Payment Request API에서는 사용자의 결제 수단이 있는지 확인하는 데 canMakePayment()
를 사용했습니다. 최근 사양 업데이트에서 canMakePayment()
는 기능을 변경하지 않고 hasEnrolledInstrument()
로 대체되었습니다.
hasEnrolledInstrument()
메서드는 모든 주요 브라우저에서 합의됩니다.
Chrome은 버전 74에서 이 기능을 구현했으며 Webkit와 Gecko 모두 버그 추적이 있지만 2019년 6월 현재로는 이 메서드를 구현하지 않았습니다.
새 hasEnrolledInstrument()
메서드를 사용하려면 다음과 같이 코드를 바꿉니다.
// Checking for instrument presence.
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
코드는 다음과 같습니다.
// Checking for instrument presence.
if (request.hasEnrolledInstrument) {
// hasEnrolledInstrument() is available.
request.hasEnrolledInstrument().then(handleInstrumentPresence).catch(handleError);
} else {
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
}
canMakePayment()
에서 더 이상 결제 수단이 있는지 확인하지 않습니다.
이제 hasEnrolledInstrument()
가 사용자의 결제 수단 확인을 처리하므로 canMakePayment()
가 결제 앱 사용 가능 여부만 확인하도록 업데이트되었습니다.
이러한 canMakePayment()
변경사항은 hasEnrolledInstrument()
구현에 바인딩됩니다. 2019년 6월부터 Chrome 74에서 구현되지만 다른 브라우저에서는 구현되지 않습니다. hasEnrolledInstrument()
메서드를 사용하기 전에 사용자의 브라우저에서 사용할 수 있는지 확인하세요.
// Checking for payment app availability without checking for instrument presence.
if (request.hasEnrolledInstrument) {
// `canMakePayment()` behavior change corresponds to
// `hasEnrolledInstrument()` availability.
request.canMakePayment().then(handlePaymentAppAvailable).catch(handleError);
} else {
console.log("Cannot check for payment app availability without checking for instrument presence.");
}
languageCode
이(가) 결제 수단 basic-card
개에서 삭제됨
basic-card
의 배송지 주소와 청구서 수신 주소에서 PaymentAddress.languageCode
가 삭제되었습니다. 다른 결제 수단 (예: Google Pay)의 청구서 수신 주소는 영향을 받지 않습니다.
이 변경사항은 Chrome 74, Firefox, Safari에 구현되었습니다.
이제 PaymentRequest.show()
가 선택적으로 detailsPromise
를 사용합니다.
PaymentRequest.show()
를
사용하면 최종 총액이 알려지기 전에 판매자가 결제 요청 UI를
표시할 수 있습니다. 판매자는 제한 시간 전에 10초 내에 detailsPromise
를 확인해야 합니다. 이 기능은 빠른 서버 측 왕복을 위한 것입니다.
이 기능은 Chrome 75 및 Safari에서 제공됩니다.
// Not implemented in Chrome 74 and older.
// There's no way to feature-detect this, so check a few
// older versions of Chrome that you're seeing hit your servers.
if (/Chrome\/((6[0-9])|(7[0-4]))/g.exec(navigator.userAgent) !== null) {
return;
}
// Supported in Chrome 75+.
request.show(new Promise(function(resolveDetailsPromise, rejectDetailsPromise) {
// Find out the exact total amount and call
// `resolveDetailsPromise(details)`.
// Use a 3 second timeout as an example.
window.setTimeout(function() {
resolveDetailsPromise(details);
}, 3000); // 3 seconds.
}))
.then(handleResponse)
.catch(handleError);
PaymentRequestEvent.changePaymentMethod()
Payment Handler API 기능 PaymentRequestEvent.changePaymentMethod()
을 사용하면 Google Pay)를 호출하여 onpaymentmethodchange
이벤트 핸들러를 트리거합니다. changePaymentMethod()
는 업데이트된 가격 정보 (예: 세금 재계산)와 함께 판매자 응답으로 확인되는 프로미스를 반환합니다.
PaymentRequestEvent.changePaymentMethod()
및 paymentmethodchange
이벤트는 모두 Chrome 76에서 사용할 수 있으며 Webkit의 기술 미리보기에서 paymentmethodchange
이벤트가 구현되었습니다.
// In service worker context, `self` is the global object.
self.addEventListener('paymentrequest', (evt) => {
evt.respondWith(new Promise((confirmPaymentFunction, rejectPaymentFunction) => {
if (evt.changePaymentMethod === undefined) {
// Not implemented in this version of Chrome.
return;
}
// Notify merchant that the user selected a different payment method.
evt.changePaymentMethod('https://paymentapp.com', {country: 'US'})
.then((responseFromMerchant) => {
if (responseFromMerchant === null) {
// Merchant ignored the 'paymentmethodchange' event.
return;
}
handleResponseFromMerchant(responseFromMerchant);
})
.catch((error) => {
handleError(error);
});
}));
});
판매자 예시:
if (request.onpaymentmethodchange === undefined) {
// Feature not available in this browser.
return;
}
request.addEventListener('paymentmethodchange', (evt) => {
evt.updateWith(updateDetailsBasedOnPaymentMethod(evt, paymentDetails));
});
로컬 개발 개선
Chrome 76에서는 개발자 생산성을 위해 두 가지 소규모 개선사항이 추가되었습니다. 로컬 개발 환경에서 자체 서명 인증서를 사용하는 경우 이제 --ignore-certificate-errors
명령줄 플래그를 사용하여 Chrome이 개발 환경에서 Web Payments API를 허용하도록 할 수 있습니다. HTTPS를 지원하지 않는 로컬 웹 서버를 사용하여 개발하는 경우 --unsafely-treat-insecure-origin-as-secure=<origin>
플래그를 사용하여 Chrome에서 HTTP 출처를 HTTPS로 취급하도록 할 수도 있습니다.