Web Payments API 업데이트

웹 결제의 새로운 소식을 놓치지 마세요.

Danyao Wang
Danyao Wang
Rouslan Solomakhin
Rouslan Solomakhin

웹 결제는 2016년부터 브라우저에서 공개적으로 사용할 수 있었습니다. 핵심 기능인 Payment Request API는 이제 Chrome, Safari, Edge, 곧 Firefox 등 여러 브라우저에서 사용할 수 있습니다. 웹 결제를 처음 사용하는 경우 '웹 결제 개요'를 참고하여 시작하세요.

Payment Request API와 Payment Handler API가 출시된 이후 각 사양에 상당히 많은 변경사항이 적용되었습니다. 이 변경사항으로 인해 작동하는 코드가 손상되지는 않지만 주의하는 것이 좋습니다. 이 게시물에서는 이러한 업데이트를 요약하고 이러한 API 변경사항을 계속 누적할 예정입니다.

이전 버전의 Payment Request API에서는 canMakePayment()가 사용자의 결제 수단이 있는지 확인하는 데 사용되었습니다. 최근 사양 업데이트에서 canMakePayment()는 기능을 변경하지 않고 hasEnrolledInstrument()로 대체되었습니다.

hasEnrolledInstrument() 메서드는 모든 주요 브라우저의 합의를 얻었습니다. Chrome은 버전 74에서 이를 구현했으며 WebkitGecko 모두 추적 버그가 있지만 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.");
}

languageCodebasic-card 결제 수단에서 삭제됨

PaymentAddress.languageCodebasic-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로 처리하도록 할 수도 있습니다.