ウェブ決済の最新情報をご確認ください。
ウェブ決済は 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 を表示できます。ビジネス オーナーは、タイムアウトになる前に 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 を返します。
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 では、デベロッパーの生産性を高めるための 2 つの小さな改善が追加されています。ローカル開発環境で自己署名証明書を使用している場合は、--ignore-certificate-errors
コマンドライン フラグを使用して、Chrome で開発環境の Web Payments API を許可できるようになりました。HTTPS をサポートしていないローカル ウェブサーバーを使用して開発する場合は、--unsafely-treat-insecure-origin-as-secure=<origin>
フラグを使用して、Chrome で HTTP 送信元を HTTPS として扱うこともできます。