Web Payments API 업데이트

웹 결제의 새로운 기능을 알아보세요.

Eiji Kitamura
Danyao Wang
Danyao Wang
X
Rouslan Solomakhin
Rouslan Solomakhin
X

웹 결제는 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로 취급하도록 할 수도 있습니다.