웹 결제의 새로운 소식을 놓치지 마세요.
웹 결제는 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
결제 수단에서 삭제됨
PaymentAddress.languageCode
가 basic-card
의 배송지 주소 및 청구지 주소에서 삭제되었습니다. 다른 결제 수단 (예: Google Pay)의 청구서 수신 주소는 영향을 받지 않습니다.
이 변경사항은 Chrome 74, Firefox, Safari에서 구현되었습니다.
이제 PaymentRequest.show()
이 선택적 detailsPromise
를 사용합니다.
PaymentRequest.show()
를 사용하면 판매자가 최종 합계가 확인되기 전에 결제 요청 UI를 표시할 수 있습니다. 판매자는 제한 시간 전에 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이 개발 환경에서 웹 결제 API를 허용하도록 할 수 있습니다. HTTPS를 지원하지 않는 로컬 웹 서버를 사용하여 개발하는 경우 --unsafely-treat-insecure-origin-as-secure=<origin>
플래그를 사용하여 Chrome에서 HTTP 출처를 HTTPS로 처리하도록 할 수도 있습니다.