recursal/MDN huggingface dataset:
HIDDevice.productId
===================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`HIDDevice` インターフェイスの読み取り専用プロパティ **`productId`** は、接続された HID デバイスのプロダクト ID を返します。

値
-

整数です。デバイスにプロダクト ID が無いか、プロダクト ID にアクセスできないときは、`0` を返します。

例
-

この例では、`HID.getDevices()` でデバイスを取得し、`productId` の値をコンソールに出力します。


```js
document.addEventListener("DOMContentLoaded", async () => {
  let devices = await navigator.hid.getDevices();
  devices.forEach((device) => {
    console.log(`HID: ${device.productId}`);
  });
});
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hiddevice-productid |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RTCPeerConnectionIceEvent()
===========================

**`RTCPeerConnectionIceEvent()`** コンストラクターは、新しい `RTCPeerConnectionIceEvent` オブジェクトを作成します。

構文
--


```js
new RTCPeerConnectionIceEvent(type, options)
```

### 引数

`type`

 文字列で、このイベントの名前です。
 大文字小文字を区別し、ブラウザーは常に `icecandidate` に設定します。


`options` 省略可

オブジェクトで、*`Event()` で定義されているプロパティに加えて*、以下のプロパティがあります。

`candidate`

`RTCIceCandidate` (en-US) で、そのイベントが関係する ICE の候補を表します。
 もし `null` ならば、そのイベントは候補の収集の終わりを示します。


`url`

 文字列で、候補を収集するために使用された STUN または TURN サーバーの URL を保持します。
 もし候補が STUN または TURN サーバーによって収集されていない場合、この値は `null` でなければならず、またこれは既定値です。



### 返値

提供されたオプションを指定して構成された、新しい `RTCPeerConnectionIceEvent` オブジェクト。

仕様書
---

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnectioniceevent-constructor |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebRTC
* このイベントの通常ターゲット: `RTCPeerConnection`
RTCPeerConnectionIceEvent.candidate
===================================

**`candidate`** は `RTCPeerConnectionIceEvent` インターフェイスの読み取り専用のプロパティで、そのイベントに関連付けられた `RTCIceCandidate` (en-US) を返します。

値
-

受信した ICE の候補を表す `RTCIceCandidate` (en-US) オブジェクト、 またはこのネゴシエーションセッションの候補がないことを表す `null` です。

例
-


```js
pc.onicecandidate = (ev) => {
  alert(
    `The ICE candidate (transport address: '${ev.candidate.candidate}') has been added to this connection.`,
  );
};
```

仕様書
---

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnectioniceevent-candidate |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `icecandidate` (en-US)
* `RTCPeerConnection`
CSSKeywordValue: value プロパティ
============================

**`value`** は `CSSKeywordValue` インターフェイスのプロパティで、 `CSSKeywordValue` の値を取得または設定します。

値
-

文字列です。

### 例外

`TypeError`

設定時に `value` プロパティが空文字列になった場合。

例
-

次の例では、CSS の `display` プロパティを既定値へリセットします。


```js
let indicator = document.getElementById("indicator");
indicator.attributeStyleMap.set("display", new CSSKeywordValue("initial"));
indicator.attributeStyleMap.get("display").value; // 'initial'
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-csskeywordvalue-value |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSKeywordValue: CSSKeywordValue() コンストラクター
===========================================

**`CSSKeywordValue()`** コンストラクターは、新しい `CSSKeywordValue` オブジェクトを生成します。これは CSS のキーワードおよびその他の識別子を表します。

構文
--


```js
new CSSKeywordValue(val)
```

### 引数

`value`

新しい `CSSKeywordValue` の値に設定または返却します。

### 例外

`TypeError`

`value` 引数が指定されていなかったり、文字列型ではなかったりした場合。

例
-

次の例は、CSS の `display` プロパティを既定値にリセットするために、インラインの `style` 属性を `style="display: initial"` に設定します。これは開発者ツールインスペクターで見られます。
```

#myElement {
  display: flex;
}
```


```
<div id="myElement">
  開発者ツールでコンソールのログを確認し、この div の style
  属性を調べてみてください。
</div>
```



```js
const keyword = new CSSKeywordValue("initial");
const myElement = document.getElementById("myElement").attributeStyleMap;
myElement.set("display", keyword);

console.log(myElement.get("display").value); // 'initial'
console.dir(keyword);
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-csskeywordvalue-csskeywordvalue |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Worker: message イベント
====================

`message` イベントは `Worker` オブジェクトで、ワーカーの親がワーカーからメッセージを受け取ったとき（すなわち、ワーカーが `DedicatedWorkerGlobalScope.postMessage()` を用いてメッセージを送信したとき）に発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("message", (event) => {});

onmessage = (event) => {};
```

イベント型
-----

`MessageEvent` です。 `Event` を継承しています。

Event

MessageEventイベントプロパティ
---------

*このインターフェイスには、親である `Event` から継承したプロパティもあります。*

`MessageEvent.data` 読取専用 

メッセージ送信者から送信されたデータです。

`MessageEvent.origin` 読取専用 

文字列で、メッセージ送信者のオリジンを表します。

`MessageEvent.lastEventId` 読取専用 

文字列で、このイベントの固有の ID を表します。

`MessageEvent.source` 読取専用 

`MessageEventSource` （`WindowProxy`, `MessagePort`, `ServiceWorker` の何れかのオブジェクトがなれる）で、メッセージ送信者を表します。

`MessageEvent.ports` 読取専用 

`MessagePort` オブジェクトの配列で、メッセージが送信されるチャネルに関連するポートを表します（チャネルメッセージングや共有ワーカーにメッセージを送信する場合など、必要に応じて）。

例
-

このコードでは、新しいワーカーを生成して、 `addEventListener()` を用いてメッセージを待ち受けします。


```js
const worker = new Worker("static/scripts/worker.js");

worker.addEventListener("message", (event) => {
  console.log(`Received message from worker: ${event.data}`);
});
```


他にも、 `onmessage` イベントハンドラープロパティを使用して待ち受けすることもできます。


```js
const worker = new Worker("static/scripts/worker.js");

worker.onmessage = (event) => {
  console.log(`Received message from worker: ${event.data}`);
};
```


ワーカーは `self.postMessage()` を使用してメッセージを送信します。


```js
// static/scripts/worker.js

self.postMessage("I'm alive!");
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-message |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 関連イベント: `messageerror`.
* `DedicatedWorkerGlobalScope.postMessage()`.
Worker()
========

**`Worker()`** コンストラクターは、指定された URL で指定されたスクリプトを実行する `Worker` オブジェクトを作成します。このスクリプトは 同一オリジンポリシーに従わなければいけません。

**メモ:** data URL が 同一オリジンであるかどうかについては、ブラウザーベンダーの間で合意されていません。 Firefox 10 以降のリリースでは data URL を受け入れますが、すべてのブラウザーでそうなるとは限りません。

構文
--


```js
new Worker(aURL);
new Worker(aURL, options);
```

### 引数

`aURL`

文字列で、ワーカーが実行するスクリプトの URL を表します。同一オリジンポリシーに従っていなければいけません。

`options` 省略可

オブジェクトを作成するときに設定できるオプションプロパティを持つオブジェクトです。以下のプロパティが使用できます。

`type`

文字列で、作成するワーカーの種類を指定します。使用できる値は `classic` または `module` です。指定しない場合の既定値は `classic` です。

`credentials`

文字列で、ワーカーで使用する資格情報の種類を指定します。使用できる値は `omit`、`same-origin`、`include` です。指定しない場合、または type が `classic` である場合、既定値は `omit` （資格情報は不要）です。

`name`

文字列で、ワーカーのスコープを表す `DedicatedWorkerGlobalScope` を識別する名前を指定します。これは主に、デバッグで役に立ちます。


### 例外

`SecurityError` `DOMException`

文書がワーカーを起動することが許可されていない場合、例えば、 URL が不正な構文であったり、同一オリジンポリシーに違反していたりした場合に発生します。

`NetworkError` `DOMException`

ワーカースクリプトの MIME タイプが不正な場合に発生します。これは常に `text/javascript` であるべきです（経緯上、他の JavaScript の MIME タイプも受け入れられる場合があります）。

`SyntaxError` `DOMException`

*aURL* が解釈できなかった場合に発生します。

例
-

次のコードスニペットは `Worker()` コンストラクターを使って `Worker` オブジェクトを作成し、続いてそのオブジェクトの使い方を表しています。


```js
const myWorker = new Worker("worker.js");

first.onchange = () => {
  myWorker.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};
```


完全な例を見るには、基本的な専用ワーカーの例（専用ワーカーを実行）を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-worker-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

所属する `Worker` インターフェイス。
Worker.terminate()
==================

**`terminate()`** は `Worker` インターフェイスのメソッドで、このワーカーを即座に停止させます。これはワーカーに対してその動作を終了する機会を提供するものではありません。即時に停止させます。

構文
--


```js
terminate();
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

次のコードでは `Worker` オブジェクトを `Worker()` コンストラクターで作成したあと、すぐに停止させます。


```js
const myWorker = new Worker("worker.js");

myWorker.terminate();
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-worker-terminate-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

所属先の `Worker` インターフェイス。
Worker: messageerror イベント
=========================

`messageerror` イベントは、 `Worker` オブジェクトに、解読 (deserialize) できないメッセージを受け取ったときに発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("messageerror", (event) => {});

onmessageerror = (event) => {};
```

イベント型
-----

`MessageEvent` です。 `Event` を継承しています。

Event

MessageEventイベントプロパティ
---------

*このインターフェイスには、親である `Event` から継承したプロパティもあります。*

`MessageEvent.data` 読取専用 

メッセージ送信者から送信されたデータです。

`MessageEvent.origin` 読取専用 

文字列で、メッセージ送信者のオリジンを表します。

`MessageEvent.lastEventId` 読取専用 

文字列で、このイベントの固有の ID を表します。

`MessageEvent.source` 読取専用 

`MessageEventSource` （`WindowProxy`, `MessagePort`, `ServiceWorker` の何れかのオブジェクトがなれる）で、メッセージ送信者を表します。

`MessageEvent.ports` 読取専用 

`MessagePort` オブジェクトの配列で、メッセージが送信されるチャネルに関連するポートを表します（チャネルメッセージングや共有ワーカーにメッセージを送信する場合など、必要に応じて）。

例
-

ワーカーを作成し、 `message` および `messageerror` イベントを `addEventListener()` で待ち受けします。


```js
// main.js

const worker = new Worker("static/scripts/worker.js");

worker.addEventListener("message", (event) => {
  console.error(`Received message from worker: ${event}`);
});

worker.addEventListener("messageerror", (event) => {
  console.error(`Error receiving message from worker: ${event}`);
});
```


同じですが、 `onmessageerror` イベントハンドラープロパティを使用した例です。


```js
// main.js

const worker = new Worker("static/scripts/worker.js");

worker.onmessage = (event) => {
  console.error(`Received message from worker: ${event}`);
};

worker.onmessageerror = (event) => {
  console.error(`Error receiving message from worker: ${event}`);
};
```

仕様
--

| Specification |
| --- |
| HTML Standard # event-messageerror |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連項目
----

* `Worker.postMessage()`
* 関連イベント: `message`
Worker: error イベント
==================

**`error`** は `Worker` インターフェイスのイベントで、ワーカーでエラーが発生したときに発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("error", (event) => {});

onerror = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

以下の例では `Worker` オブジェクトを `Worker()` コンストラクターを使用して生成し、結果のオブジェクトに `onerror` ハンドラーを設定しています。


```js
const myWorker = new Worker("worker.js");

myWorker.onerror = (event) => {
  console.log("There is an error with your worker!");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # handler-abstractworker-onerror |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
getBBox()
=========

**`SVGGraphicsElement.getBBox()`** で、オブジェクトが収まる最小の矩形の座標を特定することができます。返される座標は、現在の SVG 空間、すなわち対象の要素に含まれる位置に関する属性すべてを適用した後の空間に従います。

メモ: `getBBox` は要素がまだレンダリングされていない場合でも、メソッドが呼び出されたときに実際の境界ボックスを返します。また、要素またはその親に適用される変換は無視します。

**メモ:** `getBBox` は `getBoundingClientRect()` とは異なる値を返します。後者はビューポートからの相対値を返します。

構文
--
```

let bboxRect = object.getBBox();
```

### 返値

返値は `SVGRect` オブジェクトで、境界ボックスを定義します。この値はその要素や親要素に適用された変形属性を無視したものです。

例
-

### HTML


```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <g id="group\_text\_1">
    <text x="5" y="16" transform="scale(2, 2)">Hello World!</text>
    <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">
      Hello World Again!
    </text>
  </g>
  <!-- Shows BBox in green -->
  <rect id="rect\_1" stroke="#00ff00" stroke-width="3" fill="none"></rect>
  <!-- Shows BoundingClientRect in red -->
  <rect id="rect\_2" stroke="#ff0000" stroke-width="3" fill="none"></rect>
</svg>
```

### JavaScript


```js
var rectBBox = document.querySelector("#rect\_1");
var rectBoundingClientRect = document.querySelector("#rect\_2");
var groupElement = document.querySelector("#group\_text\_1");

var bboxGroup = groupElement.getBBox();
rectBBox.setAttribute("x", bboxGroup.x);
rectBBox.setAttribute("y", bboxGroup.y);
rectBBox.setAttribute("width", bboxGroup.width);
rectBBox.setAttribute("height", bboxGroup.height);

var boundingClientRectGroup = groupElement.getBoundingClientRect();
rectBoundingClientRect.setAttribute("x", boundingClientRectGroup.x);
rectBoundingClientRect.setAttribute("y", boundingClientRectGroup.y);
rectBoundingClientRect.setAttribute("width", boundingClientRectGroup.width);
rectBoundingClientRect.setAttribute("height", boundingClientRectGroup.height);
```

仕様書
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGGraphicsElement\_\_getBBox |

関連情報
----

* getBBox in SVG Primer
PaymentRequest: paymentmethodchange イベント
========================================

**`paymentmethodchange`** は決済リクエスト API のイベントで、ユーザーが指定された決済ハンドラーで決済手段を変更したときに `PaymentRequest` オブジェクトに配信されます。

例えば、ユーザーが Apple Pay のアカウントでクレジットカードを別のものに切り替えた場合、その変更を知らせるために `paymentmethodchange` イベントが発行されます。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("paymentmethodchange", (event) => {});

onpaymentmethodchange = (event) => {};
```

イベント型
-----

`PaymentMethodChangeEvent` です。`Event` から継承しています。

Event

PaymentRequestUpdateEvent

PaymentMethodChangeEventイベントプロパティ
---------

*以下のプロパティに加えて、このインターフェイスは `PaymentRequestUpdateEvent` からプロパティを継承しています。*

`methodDetails` (en-US) 読取専用  安全なコンテキスト用

決済方法の変更を処理する際に有益な、決済方法固有のデータを含むオブジェクト。そのような情報が利用できない場合、この値は `null` となります。

`methodName` (en-US) 読取専用  安全なコンテキスト用

決済手段識別子を格納した文字列で、具体的な決済手段を一意に識別するための文字列です。この識別子は通常、決済プロセスで使用する URL ですが、`basic-card` のような標準的な非 URL 文字列であってもかまいません。既定値は空文字列の `""` です。

例
-

例をみていきましょう。このコードでは、新しい `PaymentRequest` を作成し、リクエストの `addEventListener()` を呼び出して `paymentmethodchange` イベントのハンドラーを追加し、次に `show` を呼び出してユーザーに決済インターフェイスを表示します。

このコードは、`detailsForShipping()` というメソッドが存在し、`ground` という配送方法の配送オプションを `PaymentShippingOption` 辞書に得られる形式で格納したオブジェクトを返すことを想定しています。このようにすることで、決済フォームでは ground 配送手段が既定値となります。


```js
const options = {
  requestShipping: true,
};

const paymentRequest = new PaymentRequest(
  paymentMethods,
  detailsForShipping("ground"),
  options,
);

paymentRequest.addEventListener(
  "paymentmethodchange",
  handlePaymentChange,
  false,
);

paymentRequest
  .show()
  .then((response) => response.complete("success"))
  .catch((err) => console.error(`Error handling payment request: ${err}`));
```


イベントハンドラー関数そのものである `handlePaymentChange()` は、次のようなものです。


```js
handlePaymentChange = (event) => {
  const detailsUpdate = {};

  if (event.methodName === "https://apple.com/apple-pay") {
    const serviceFeeInfo = calculateServiceFee(event.methodDetails);
    Object.assign(detailsUpdate, serviceFeeInfo);
  }

  event.updateWith(detailsUpdate);
};
```


まず、イベントの `methodName` (en-US) プロパティを見ます。ユーザーが Apple Pay を使用しようとしていることが示された場合、 `methodDetails` (en-US) を `calculateServiceFee()` という関数に渡します。これは、Apple Pay リクエストをサービスするために用いられているクレジットカードなどの取引に関する情報を受け取るために作成される可能性があります。そして、決済手段が必要とするサービス料を追加するために `PaymentRequest` に適用する変更を指定するオブジェクトを計算し、返します。

イベントハンドラーが返す前に、イベントの `PaymentMethodChangeEvent.updateWith()` メソッドを呼び出して、リクエストに変更を統合します。

仕様書
---

| Specification |
| --- |
| Payment Request API 1.1 # dfn-paymentmethodchange |
| Payment Request API 1.1 # onpaymentmethodchange-attribute |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 決済リクエスト API
* 決済リクエスト API の使用
* `merchantvalidation` イベント
* `payerdetailchange` イベント
* `shippingaddresschange` イベント
* `shippingoptionchange` イベント
PaymentRequest: canMakePayment() メソッド
=====================================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`PaymentRequest` の **`canMakePayment()`** メソッドは、ユーザーエージェントが対応している少なくとも一つの決済手段に対応した方法でリクエストが構成されているかどうかを判断します。

これを `show()` を呼び出す前に呼び出すと、ユーザーのブラウザーが受け入れる決済手段を処理できないときに、効率的なユーザー操作を提供することができます。

例えば、`canMakePayment()` を呼び出して、ブラウザーが決済リクエスト API を使ってユーザーに決済させるかどうかを判断し、もしそうでなければ、別の決済手段で代替するか、決済リクエスト API で処理しない方法のリストを提供する（あるいは、郵便や電話で支払う指示を出す）ことができるかもしれません。

構文
--


```js
canMakePayment()
```

### 引数

なし。

### 返値

`PaymentRequest` コンストラクターを使用してリクエストをインスタンス化する際に、ユーザーエージェントが提供した決済手段のいずれかに対応していれば `true` に解決する `Promise` を論理値に変換します．決済を処理できない場合、プロミスは `false` の値を受け取ります。

**メモ:** これを何度も呼び出すと、ブラウザーは返されるプロミスを `DOMException` で拒否するかもしれません。

例
-

次の例では、Apple Pay と Example Pay の両方に対応した `PaymentRequest` オブジェクトを非同期に構築する デモからの抜粋 があります。canMakePayment()`の呼び出しを機能検出でラップし、`Promise`の解像度に応じて適切なコールバックを呼び出しています。


```js
async function initPaymentRequest() {
  const details = {
    total: {
      label: "Total",
      amount: {
        currency: "USD",
        value: "0.00",
      },
    },
  };

  const supportsApplePay = new PaymentRequest(
    [{ supportedMethods: "https://apple.com/apple-pay" }],
    details,
  ).canMakePayment();

  // Supports Apple Pay?
  if (await supportsApplePay) {
    // show Apple Pay logo, for instance
    return;
  }

  // Otherwise, let's see if we can use Example Pay
  const supportsExamplePay = await new PaymentRequest(
    [{ supportedMethods: "https://example.com/pay" }],
    details,
  ).canMakePayment();

  if (supportsExamplePay) {
    // show Example Pay support
    return;
  }

  // Otherwise, make payments using HTML form element
}
```

仕様書
---

| Specification |
| --- |
| Payment Request API 1.1 # dom-paymentrequest-canmakepayment |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `PaymentRequest.show()`
PaymentRequest: shippingoptionchange イベント
=========================================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

配送情報を要求し、配送オプションが提供されている決済リクエストでは、ユーザーが利用できるオプションのリストから配送オプションを選ぶと、**`shippingoptionchange`** イベントが `PaymentRequest` に送られます。

現在選択されている配送オプションを特定する文字列は、`shippingOption`プロパティで得ることができます。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("shippingoptionchange", (event) => {});

onshippingoptionchange = (event) => {};
```

イベント型
-----

`PaymentRequestUpdateEvent` です。`Event` から継承しています。

Event

PaymentRequestUpdateEventイベントプロパティ
---------

*`Event` から継承したプロパティのみを提供しています。*

例
-

このコードでは、`shippingoptionchange` イベントに対するハンドラーを設定します。このコードは、選択された配送オプションに基づいて決済の合計料金を再計算します。例えば、3 つのオプション（"Free ground shipping", "2-day air", "Next day" など）がある場合、ユーザーがそれらのオプションを選ぶたびに、このイベントハンドラーが呼ばれて、変更された配送オプションに基づいて合計金額が再計算されます。


```js
paymentRequest.addEventListener(
  "shippingoptionchange",
  (event) => {
    const value = calculateNewTotal(paymentRequest.shippingOption);
    const total = {
      currency: "EUR",
      label: "Total due",
      value,
    };
    event.updateWith({ total });
  },
  false,
);
```


カスタム関数 `calculateNewTotal()` を呼び出して、`shippingOption` で指定した新しく選択された配送オプションに基づいて更新後の合計を算出した後。イベントの `updateWith()` メソッドを呼び出すことにより、改訂後の合計が決済リクエストに返されます。

`shippingoptionchange` のイベントハンドラーは、対応するイベントハンドラープロパティである `onshippingoptionchange` を使用して作成することもできます。


```js
paymentRequest.onshippingoptionchange = (event) => {
  const value = calculateNewTotal(paymentRequest.shippingOption);
  const total = {
    currency: "EUR",
    label: "Total due",
    value,
  };
  event.updateWith({ total });
};
```

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PaymentRequest: shippingOption プロパティ
====================================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`shippingOption`** は `PaymentRequest` インターフェイスの読み取り専用プロパティで、これは、選択された配送オプションの id、null（選択する配送オプションが設定されていない場合）、またはユーザーによって選択された配送オプションのいずれかを返します。「選択された」配送オプションが提供されていない場合、最初は `null` です。

この属性は、コンストラクターが `requestShipping` フラグを `true` に設定して呼び出された場合にのみ設定されます。`requestShipping` が `false` である（または見つからない）場合、たとえ開発者が選択した配送オプションを提供したとしても、 `shippingOption` は `null` を返します。

値
-

例
-

下記の例では、`shippingaddresschange` および `shippingoptionchange` イベントが配信されます。それぞれが `updateDetails()` が呼び出し、1 つはプロミスを用いており、もう 1 つはプレーンな JS オブジェクトを用いています。これは、決済シートの同期と非同期の更新を示すものです。


```js
const request = new PaymentRequest(methodData, details, options);
// Async update to details
request.onshippingaddresschange = (ev) => {
  ev.updateWith(checkShipping(request));
};
// Sync update to the total
request.onshippingoptionchange = (ev) => {
  const shippingOption = shippingOptions.find(
    (option) => option.id === request.id,
  );
  const newTotal = {
    currency: "USD",
    label: "Total due",
    value: calculateNewTotal(shippingOption),
  };
  ev.updateWith({ ...details, total: newTotal });
};
async function checkShipping(request) {
  try {
    const json = request.shippingAddress.toJSON();

    await ensureCanShipTo(json);
    const { shippingOptions, total } = await calculateShipping(json);

    return { ...details, shippingOptions, total };
  } catch (err) {
    return { ...details, error: `Sorry! we can't ship to your address.` };
  }
}
```

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PaymentRequest: abort() メソッド
============================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`PaymentRequest.abort()` は `PaymentRequest` インターフェイスのメソッドで、ユーザーエージェントに決済リクエストを終了させ、ユーザーインターフェイスが表示された場合は消去します。

構文
--


```js
abort()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

次の例では、放棄または放置された可能性のある決済リクエストをクリアするためのタイムアウトを設定しています。


```js
const request = new PaymentRequest(supportedInstruments, details, options);

const paymentTimeout = setTimeout(
  () => {
    clearTimeout(paymentTimeout);
    request
      .abort()
      .then(() => {
        print("Payment timed out after 20 minutes.");
      })
      .catch(() => {
        print(
          "Unable to abort, because the user is currently in the process " +
            "of paying.",
        );
      });
  },
  20 \* 60 \* 1000,
); /\* 20 minutes \*/
```

仕様書
---

| Specification |
| --- |
| Payment Request API 1.1 # dom-paymentrequest-abort |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `PaymentRequest.abort()`
PaymentRequest: shippingType プロパティ
==================================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`shippingType`** は `PaymentRequest` インターフェイスの読み取り専用プロパティで、`"shipping"`、`"delivery"`、`"pickup"` の何れか、またはコンストラクターで提供されていなかった場合は `null` を返します。

値
-

`"shipping"`、`"delivery"`、`"pickup"`、`null` の何れかです。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.