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.");
}

basic-card のお支払い方法から languageCode を削除しました

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() は、更新された価格情報（税金の再計算など）を含む販売者レスポンスに解決される Promise を返します。

Chrome 76 では PaymentRequestEvent.changePaymentMethod() イベントと paymentmethodchange イベントの両方を使用できます。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 では、デベロッパーの生産性を向上させる 2 つの小さな改善が追加されています。ローカル開発環境で自己署名証明書を使用している場合は、--ignore-certificate-errors コマンドライン フラグを使用して、開発環境で Chrome の Web Payments API を許可できるようになりました。HTTPS をサポートしていないローカル ウェブサーバーを使用して開発する場合は、--unsafely-treat-insecure-origin-as-secure=<origin> フラグを使用して、Chrome で HTTP 生成元を HTTPS として扱うこともできます。