recursal/MDN huggingface dataset:
PaymentResponse: methodName property
====================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`methodName`** read-only
 property of the `PaymentResponse` interface returns a string uniquely
 identifying the payment handler selected by the user.

 This string may be either
 one of the standardized payment method identifiers or a URL used by the payment handler
 to process payments.

Value
-----

 A string uniquely identifying the payment handler being used to
 process the payment. This may be either a standardized identifier, or a URL used by the
 payment processor to handle payments. See
 how merchant validation works.

Examples
--------

 The following example extracts the method name from the `PaymentResponse`
 object to the promise returned from `PaymentRequest.show()`. In a
 real-world implementation this data would then be sent to a payment server.


```js
payment.show().then((paymentResponse) => {
  const paymentData = {
    // payment method string
    method: paymentResponse.methodName,
    // payment details as you requested
    details: paymentResponse.details,
    // shipping address information
    address: toDict(paymentResponse.shippingAddress),
  };
  // Send information to the server
});
```

Specifications
--------------

| Specification |
| --- |
| Payment Request API 1.1 # dom-paymentresponse-methodname |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PaymentRequest: payerName property
==================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The **`payerName`** read-only property of the
 `PaymentResponse` interface returns the name supplied by the user. This
 option is only present when the `requestPayerName` option is set to
 `true` in the options parameter of the
 `PaymentRequest()` constructor.

Value
-----

A string containing the payer name.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PaymentResponse: details property
=================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`details`** read-only property of the
 `PaymentResponse` interface returns a JSON-serializable object that
 provides a payment method specific message used by the merchant to process the
 transaction and determine a successful funds transfer.

This data is returned by the payment app that satisfies the payment request. Developers need to consult whomever controls the URL for the expected shape of the details object.

Value
-----

Examples
--------

 The following example extracts the details from the `PaymentResponse`
 object to the promise returned from `PaymentRequest.show()`. In a
 real-world implementation this data would then be sent to a payment server.


```js
payment.show().then((paymentResponse) => {
  const paymentData = {
    // payment method string
    method: paymentResponse.methodName,
    // payment details as you requested
    details: paymentResponse.details,
    // shipping address information
    address: toDict(paymentResponse.shippingAddress),
  };
  // Send information to the server
});
```

Specifications
--------------

| Specification |
| --- |
| Payment Request API 1.1 # dom-paymentresponse-details |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PaymentResponse: requestId property
===================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`requestId`** read-only property of the
 `PaymentResponse` interface returns the free-form identifier supplied by
 the `PaymentResponse()` constructor by details.id.

Value
-----

A string.

Specifications
--------------

| Specification |
| --- |
| Payment Request API 1.1 # dom-paymentresponse-requestid |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PaymentResponse: toJSON() method
================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`toJSON()`** method of the `PaymentResponse` interface is a serializer; it returns a JSON representation of the `PaymentResponse` object.

Syntax
------


```js
toJSON()
```

### Parameters

None.

### Return value

A `JSON` object that is the serialization of the `PaymentResponse` object.

Examples
--------

### Using the toJSON method

In this example, calling `paymentResponse.toJSON()` returns a JSON representation of the `PaymentResponse` object.


```js
payment.show().then((paymentResponse) => {
  console.log(paymentResponse.toJSON())
  };
});
```


To get a JSON string, you can use `JSON.stringify(paymentResponse)` directly; it will call `toJSON()` automatically.

Specifications
--------------

#### No specification found

No specification data found for `api.PaymentResponse.toJSON`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility
---------------------

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

See also
--------

* `JSON`
PayerResponse: payerPhone property
==================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The `payerPhone` read-only property of the `PaymentResponse`
 interface returns the phone number supplied by the user. This option is only present
 when the `requestPayerPhone` option is set to `true` in the
 `PaymentOptions` object passed to the
 `PaymentRequest` constructor.

Value
-----

A string.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PaymentResponse: shippingAddress property
=========================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The **`shippingAddress`** read-only property of
 the `PaymentRequest` interface returns a `PaymentAddress` object
 containing the shipping address provided by the user.

Value
-----

 A `PaymentAddress` object providing details comprising the shipping
 address provided by the user.

Examples
--------

 Generally, the user agent will fill the `shippingAddress` property for you.
 You can trigger this by
 setting `PaymentOptions.requestShipping` to `true` when calling
 the `PaymentRequest` constructor.

 In the example below, the cost of shipping varies by geography. When the
 `shippingaddresschange` event is
 fired and caught, `updateDetails()` is called to update the details of
 the `PaymentRequest`, using `shippingAddress` to set the correct
 shipping cost.


```js
// Initialization of PaymentRequest arguments are excerpted for brevity.

const payment = new PaymentRequest(supportedInstruments, details, options);

request.addEventListener("shippingaddresschange", (evt) => {
  evt.updateWith(
    new Promise((resolve) => {
      updateDetails(details, request.shippingAddress, resolve);
    }),
  );
});

payment
  .show()
  .then((paymentResponse) => {
    // Processing of paymentResponse excerpted for the same of brevity.
  })
  .catch((err) => {
    console.error("Uh oh, something bad happened", err.message);
  });

function updateDetails(details, shippingAddress, resolve) {
  if (shippingAddress.country === "US") {
    const shippingOption = {
      id: "",
      label: "",
      amount: { currency: "USD", value: "0.00" },
      selected: true,
    };
    if (shippingAddress.region === "MO") {
      shippingOption.id = "mo";
      shippingOption.label = "Free shipping in Missouri";
      details.total.amount.value = "55.00";
    } else {
      shippingOption.id = "us";
      shippingOption.label = "Standard shipping in US";
      shippingOption.amount.value = "5.00";
      details.total.amount.value = "60.00";
    }
    details.displayItems.splice(2, 1, shippingOption);
    details.shippingOptions = [shippingOption];
  } else {
    delete details.shippingOptions;
  }
  resolve(details);
}
```

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WEBGL\_draw\_buffers: drawBuffersWEBGL() method
===============================================

 The **`WEBGL_draw_buffers.drawBuffersWEBGL()`** method is part
 of the WebGL API and allows you to define
 the draw buffers to which all fragment colors are written.

This method is part of the `WEBGL_draw_buffers` extension.

**Note:** When using `WebGL2`,
 this method is available as `gl.drawBuffers()`
 by default and the constants are named `gl.COLOR_ATTACHMENT1` etc. without the "WEBGL" suffix.


Syntax
------


```js
drawBuffersWEBGL(buffers)
```

### Parameters

`buffers`

 An `Array` of `GLenum` constants defining drawing buffers.
 Possible values:


* `gl.NONE`: The fragment shader is not written to any color buffer.
* `gl.BACK`: The fragment shader is written to the back color buffer.
* `ext.COLOR_ATTACHMENT0_WEBGL` The fragment shader is written the
 n-th color attachment of the framebuffer.
* `ext.COLOR_ATTACHMENT1_WEBGL`
* `ext.COLOR_ATTACHMENT2_WEBGL`
* `ext.COLOR_ATTACHMENT3_WEBGL`
* `ext.COLOR_ATTACHMENT4_WEBGL`
* `ext.COLOR_ATTACHMENT5_WEBGL`
* `ext.COLOR_ATTACHMENT6_WEBGL`
* `ext.COLOR_ATTACHMENT7_WEBGL`
* `ext.COLOR_ATTACHMENT8_WEBGL`
* `ext.COLOR_ATTACHMENT9_WEBGL`
* `ext.COLOR_ATTACHMENT10_WEBGL`
* `ext.COLOR_ATTACHMENT11_WEBGL`
* `ext.COLOR_ATTACHMENT12_WEBGL`
* `ext.COLOR_ATTACHMENT13_WEBGL`
* `ext.COLOR_ATTACHMENT14_WEBGL`
* `ext.COLOR_ATTACHMENT15_WEBGL`

### Return value

None (`undefined`).

Examples
--------

See `WEBGL_draw_buffers` for more context with this example code.


```js
ext.drawBuffersWEBGL([
  ext.COLOR\_ATTACHMENT0\_WEBGL, // gl\_FragData[0]
  ext.COLOR\_ATTACHMENT1\_WEBGL, // gl\_FragData[1]
  ext.COLOR\_ATTACHMENT2\_WEBGL, // gl\_FragData[2]
  ext.COLOR\_ATTACHMENT3\_WEBGL, // gl\_FragData[3]
]);
```

Specifications
--------------

| Specification |
| --- |
| WebGL WEBGL\_draw\_buffers Khronos Ratified Extension Specification  |

Browser compatibility
---------------------

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

See also
--------

* `WEBGL_draw_buffers`
* `WebGLRenderingContext.getExtension()`
* `WebGLRenderingContext.framebufferRenderbuffer()`
* `WebGLRenderingContext.framebufferTexture2D()`
* `WebGLRenderingContext.getFramebufferAttachmentParameter()`
* `WebGLRenderingContext.getParameter()`
* WebGL deferred shading - Mozilla Hacks blog
RTCRtpScriptTransformer: sendKeyFrameRequest()
==============================================

The **`sendKeyFrameRequest()`** method of the `RTCRtpScriptTransformer` interface may be called by a WebRTC Encoded Transform that is processing incoming encoded video frames, in order to request a key frame from the sender.

 The method may only be called when receiving *video* (not audio) frames and if, for whatever reason, a recipient will not be able to decode the video without a new key frame.
 Note that the user agent can decide that the request for a key frame is not necessary, in which case the returned promise will fulfill even though the request was not actually sent.


**Note:** It might be called, for example, if a new user joins a WebRTC conference, in order to reduce the time before they receive a key frame and can hence start displaying video.
 For more information see Triggering a key frame in Using WebRTC Encoded Transforms.


Syntax
------


```js
sendKeyFrameRequest()
```

### Parameters

None

### Return value

A `Promise` that fulfills with `undefined` once the request is sent, or the user agent decides that it does not need to.

### Exceptions

`InvalidStateError`

The de-packetizer is not processing video packets, or is `undefined`.

Examples
--------

The example below shows how the main thread of a WebRTC application that is receiving encoded video might pass a decryption key to a receiver transform, and request the sender emit a key frame.

 Note that the main thread doesn't have direct access to the `RTCRtpScriptTransformer` object, so it needs to pass the key to the worker.
 Here we do that with a `MessageChannel`, transferring the second port to the transformer code running in the worker.
 The code assumes there is already a peer connection, and `videoReceiver` is an `RTCRtpReceiver`.


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

videoReceiver.transform = new RTCRtpScriptTransform(
  worker,
  { name: "receiverTransform", port: channel.port2 },
  [channel.port2],
);

// Post new key to the receiver
channel.port1.start();
channel.port1.postMessage({
  key: "93ae0927a4f8e527f1gce6d10bc6ab6c",
});
```


 The `rtctransform` event handler in the worker gets the port as `event.transformer.options.port`.
 The code snippet below shows how that is used to listen for `message` events on the channel.
 If an event is received the handler gets the `key`, and then calls `sendKeyFrameRequest()` on the transformer.


```js
event.transformer.options.port.onmessage = (event) => {
  const { key } = event.data;
  // key is used by the transformer to decrypt frames (not shown)

  // Request sender to emit a key frame.
  // Here 'rcevent' is the rtctransform event.
  rcevent.transformer.sendKeyFrameRequest();
};
```

Specifications
--------------

| Specification |
| --- |
| WebRTC Encoded Transform # dom-rtcrtpscripttransformer-sendkeyframerequest |

Browser compatibility
---------------------

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

See also
--------

* Using WebRTC Encoded Transforms
* `RTCRtpScriptTransformer`
RTCRtpScriptTransformer: readable property
==========================================

The **`readable`** read-only property of the `RTCRtpScriptTransformer` interface returns a `ReadableStream` instance is a source for encoded media frames.

 When the corresponding `RTCRtpScriptTransform` is inserted into the WebRTC sender and receiver pipelines, this stream may be enqueued with outgoing or incoming encoded media frames (`RTCEncodedVideoFrame` or `RTCEncodedAudioFrame`).
 A WebRTC encoded transform can read the frames, modify them as needed, and then send them back into the WebRTC pipeline by writing them to `RTCRtpScriptTransformer.writable`.
 A common way to perform this operation is to pipe the frames through a `TransformStream`.

Value
-----

A `ReadableStream`.

Examples
--------

The following example shows how `readable` is piped through a `TransformStream` to `RTCRtpScriptTransformer.writable`.


```js
addEventListener("rtctransform", (event) => {
  let transform;
  // Select a transform based on passed options
  if (event.transformer.options.name == "senderTransform")
    transform = createSenderTransform(); // A TransformStream
  else if (event.transformer.options.name == "receiverTransform")
    transform = createReceiverTransform(); // A TransformStream
  else return;

  // Pipe frames from the readable to writeable through TransformStream
  event.transformer.readable
    .pipeThrough(transform)
    .pipeTo(event.transformer.writable);
});
```


 The code implements a handler for the `rtctransform` event, which is fired at the global worker object on construction of the corresponding `RTCRtpScriptTransform`, and when new frames are enqueued for processing.
 `event.transformer` is the `RTCRtpScriptTransformer` that has a `readable` and `writable` property.

 An different `TransformStream` is created to process outgoing and incoming frames, using `createSenderTransform()` or `createReceiverTransform()`, respectively (implementations not shown).
 The event handler chooses the correct transform stream to use based on options passed through from the `RTCRtpScriptTransform` constructor and assigns it to `transform`.

The code calls `ReadableStream.pipeThrough()` on the `readable` to pipe encoded frames through the selected `TransformStream`, and then `ReadableStream.pipeTo()` to pipe them to the `RTCRtpScriptTransformer.writable`.

Specifications
--------------

| Specification |
| --- |
| WebRTC Encoded Transform # dom-rtcrtpscripttransformer-readable |

Browser compatibility
---------------------

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

See also
--------

* Using WebRTC Encoded Transforms
RTCRtpScriptTransformer: writable property
==========================================

The **`writable`** read-only property of the `RTCRtpScriptTransformer` interface returns a `WritableStream` instance that can be used as a sink for encoded media frames enqueued on the corresponding `RTCRtpScriptTransformer.readable`.

 When the corresponding `RTCRtpScriptTransform` is inserted into the WebRTC sender and receiver pipelines, encoded media frames (`RTCEncodedVideoFrame` or `RTCEncodedAudioFrame`) may be enqueued on the `RTCRtpScriptTransformer.readable`.
 A WebRTC encoded transform can read the frames from `readable`, modify them as needed, and then send them back into the WebRTC pipeline by sending them to this `writable`.
 A common way to perform this operation is to pipe the frames through a `TransformStream`.

Value
-----

A `WritableStream`.

Examples
--------

The following example shows how `RTCRtpScriptTransformer.readable` is piped through a `TransformStream` to `RTCRtpScriptTransformer.writable`.


```js
addEventListener("rtctransform", (event) => {
  let transform;
  // Select a transform based on passed options
  if (event.transformer.options.name == "senderTransform")
    transform = createSenderTransform(); // A TransformStream
  else if (event.transformer.options.name == "receiverTransform")
    transform = createReceiverTransform(); // A TransformStream
  else return;

  // Pipe frames from the readable to writeable through TransformStream
  event.transformer.readable
    .pipeThrough(transform)
    .pipeTo(event.transformer.writable);
});
```


 The code implements a handler for the `rtctransform` event, which is fired at the global worker object on construction of the corresponding `RTCRtpScriptTransform`, and when new frames are enqueued for processing.
 `event.transformer` is the `RTCRtpScriptTransformer` that has the `writable` and `readable` properties.

 An different `TransformStream` is created to process outgoing and incoming frames, using `createSenderTransform()` or `createReceiverTransform()`, respectively (implementations not shown).
 The event handler chooses the correct transform stream to use based on options passed through from the `RTCRtpScriptTransform` constructor and assigns it to `transform`.

The code calls `ReadableStream.pipeThrough()` on the `readable` to pipe encoded frames through the selected `TransformStream`, and then `ReadableStream.pipeTo()` to pipe them to the `RTCRtpScriptTransformer.writable`.

Specifications
--------------

| Specification |
| --- |
| WebRTC Encoded Transform # dom-rtcrtpscripttransformer-writable |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Report: type property
=====================

 The **`type`** read-only property of the `Report`
 interface returns the type of report generated, e.g. `deprecation` or
 `intervention`.

Value
-----

 A string representing the type of the report. Currently the available types are
 `deprecation`, `intervention`, and `crash`.

Examples
--------


```js
const options = {
  types: ["deprecation"],
  buffered: true,
};

const observer = new ReportingObserver(([firstReport], observer) => {
  // Log the first report's report type, i.e. "deprecation"
  console.log(firstReport.type);
}, options);
```

Specifications
--------------

| Specification |
| --- |
| Reporting API # dom-report-type |

Browser compatibility
---------------------

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

See also
--------

* Reporting API
Report: body property
=====================

 The **`body`** read-only property of the `Report`
 interface returns the body of the report, which is a `ReportBody` object
 containing the detailed report information.

Value
-----

 A `ReportBody` object containing the detailed report information. Depending
 on what `type` the `Report` is, the object returned will
 actually be a
 `DeprecationReportBody`, `InterventionReportBody`,
 `CSPViolationReportBody`, or `FeaturePolicyViolationReportBody`.
 These all inherit from the base `ReportBody` class — study their reference
 pages for more information on what the particular report body types contain.

Examples
--------


```js
const options = {
  types: ["deprecation"],
  buffered: true,
};

const observer = new ReportingObserver(([firstReport], observer) => {
  // Log the first report's report body, i.e. a DeprecationReportBody object
  console.log(firstReport.body);
}, options);
```

Specifications
--------------

| Specification |
| --- |
| Reporting API # dom-report-body |

Browser compatibility
---------------------

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

See also
--------

* Reporting API