Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix broken links in Payment API #31526

Merged
merged 21 commits into from
Jan 22, 2024
Merged
Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
8a9a044
updateWith method is defined on PaymentRequestUpdateEvent
skyclouds2001 Jan 4, 2024
9e5a453
PaymentInstrument is a non-standard dictionary
skyclouds2001 Jan 4, 2024
1f488a8
payerdetailchange event is on PaymentResponse
skyclouds2001 Jan 4, 2024
715eff6
PaymentShippingOption is a non-standard dictionary
skyclouds2001 Jan 4, 2024
2d6107c
PaymentDetailsModifier is a dictionary
skyclouds2001 Jan 4, 2024
b558a34
AddressErrors is a dictionary
skyclouds2001 Jan 4, 2024
c82c605
the two methods are on PaymentResponse
skyclouds2001 Jan 4, 2024
d791c10
remove links of payerdetailchange event
skyclouds2001 Jan 9, 2024
35fc71f
update details for PaymentDetailsModifier
skyclouds2001 Jan 9, 2024
5ccbb3a
add .
skyclouds2001 Jan 9, 2024
f15159f
remove mention of PaymentInstrument
skyclouds2001 Jan 9, 2024
eeee67d
add {{non-standard_inline}} for shippingAddressErrors & error param …
skyclouds2001 Jan 9, 2024
50886bd
add {{deprecated_inline}} & {{non-standard_inline}} to `shippingOptio…
skyclouds2001 Jan 9, 2024
3329e27
update example of PaymentRequest.paymentmethodchange_event
skyclouds2001 Jan 9, 2024
f2a9a90
fix lint error
skyclouds2001 Jan 10, 2024
4ad26ee
Update files/en-us/web/api/paymentrequestupdateevent/updatewith/index.md
skyclouds2001 Jan 10, 2024
64eb405
Update files/en-us/web/api/paymentrequest/show/index.md
skyclouds2001 Jan 10, 2024
fa38bc2
Apply suggestions from code review
skyclouds2001 Jan 21, 2024
096a2ac
Apply suggestions from code review
skyclouds2001 Jan 21, 2024
2d29b5f
Update files/en-us/web/api/paymentrequestevent/changepaymentmethod/in…
wbamberg Jan 22, 2024
a8107af
Update files/en-us/web/api/paymentrequestupdateevent/updatewith/index.md
wbamberg Jan 22, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,6 @@ For more information, see [Merchant validation](/en-US/docs/Web/API/Payment_Requ
- [Using the Payment Request API](/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API)
- `onmerchantvalidation` event handler property
- [Merchant validation](/en-US/docs/Web/API/Payment_Request_API/Concepts#merchant_validation)
- {{domxref("PaymentRequest")}}
- {{domxref("PaymentRequest.payerdetailchange_event", "payerdetailchange")}} event
- {{domxref("PaymentRequest.paymentmethodchange_event", "paymentmethodchange")}} event
- {{domxref("PaymentRequest.shippingaddresschange_event", "shippingaddresschange")}} event
- {{domxref("PaymentRequest.shippingoptionchange_event", "shippingoptionchange")}} event
Original file line number Diff line number Diff line change
Expand Up @@ -43,17 +43,12 @@ _In addition to the properties below, this interface includes properties inherit

Let's take a look at an example. This code creates a new {{domxref("PaymentRequest")}}, adds a handler for the `paymentmethodchange` event by calling the request's {{domxref("EventTarget.addEventListener", "addEventListener()")}}, then calls {{domxref("PaymentRequest.show", "show()")}} to present the payment interface to the user.

The code assumes the existence of a method `detailsForShipping()`, which returns an object containing the shipping options for the `ground` shipping method, in the form found in the {{domxref("PaymentShippingOption")}} dictionary. By doing so, the payment form defaults to the ground shipping method.
The code assumes the existence of a method `detailsForShipping()`, which will return an object provides information about the requested transaction.
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved

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

const paymentRequest = new PaymentRequest(
paymentMethods,
detailsForShipping("ground"),
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved
options,
);

paymentRequest.addEventListener(
Expand Down Expand Up @@ -85,7 +80,7 @@ handlePaymentChange = (event) => {

This begins by looking at the event's {{domxref("PaymentMethodChangeEvent.methodName", "methodName")}} property; if that indicates that the user is trying to use Apple Pay, we pass the {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} into a function called `calculateServiceFee()`, which we might create to take the information about the transaction, such as the underlying credit card being used to service the Apple Pay request, and compute and return an object that specifies changes to be applied to the {{domxref("PaymentRequest")}} in order to add any service fees that the payment method might require.

Before the event handler returns, it calls the event's {{domxref("PaymentMethodChangeEvent.updateWith()")}} method to integrate the changes into the request.
Before the event handler returns, it calls the event's {{domxref("PaymentRequestUpdateEvent.updateWith()", "updateWith()")}} method to integrate the changes into the request.

## Specifications

Expand All @@ -100,6 +95,5 @@ Before the event handler returns, it calls the event's {{domxref("PaymentMethodC
- [Payment Request API](/en-US/docs/Web/API/Payment_Request_API)
- [Using the Payment Request API](/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API)
- {{domxref("PaymentRequest.merchantvalidation_event", "merchantvalidation")}} event
- {{domxref("PaymentRequest.payerdetailchange_event", "payerdetailchange")}} event
- {{domxref("PaymentRequest.shippingaddresschange_event", "shippingaddresschange")}} event
- {{domxref("PaymentRequest.shippingoptionchange_event", "shippingoptionchange")}} event
33 changes: 24 additions & 9 deletions files/en-us/web/api/paymentrequest/show/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,14 +69,29 @@ show(detailsPromise)
- `pending`
- : A Boolean value which is `true` if the specified `amount` has not yet been finalized. This can be used to show items such as shipping or tax amounts that depend upon the selection of shipping address, shipping option, or so forth. The user agent may show this information but is not required to do so.

- `error` {{optional_inline}} {{deprecated_inline}}
- : A string specifying an error message to present to the user*.* When calling {{domxref("PaymentRequestUpdateEvent.updateWith", "updateWith()")}}, including `error` in the updated data causes the {{Glossary("user agent")}} to display the text as a general error message. For address field specific errors, use `shippingAddressErrors`.
- `error` {{optional_inline}} {{deprecated_inline}} {{non-standard_inline}}

- : A string specifying an error message to present to the user*.* When calling {{domxref("PaymentRequestUpdateEvent.updateWith", "updateWith()")}}, including `error` in the updated data causes the {{Glossary("user agent")}} to display the text as a general error message. For address-field specific errors, use the `shippingAddressErrors` field.

- `modifiers` {{optional_inline}}
- : An array of {{domxref("PaymentDetailsModifier")}} objects, each describing a modifier for particular payment method identifiers. For example, you can use one to adjust the total payment amount based on the selected payment method ("5% cash discount!").
- `shippingAddressErrors` {{optional_inline}} {{deprecated_inline}}
- : An {{domxref("AddressErrors")}} object which includes an error message for each property of the shipping address that could not be validated.
- `shippingOptions` {{optional_inline}}
- : An array of {{domxref("PaymentShippingOption")}} objects, each describing one available shipping option from which the user may choose.

- : An array of objects, each describing a modifier for particular payment method identifiers, each with the following properties:

- `supportedMethods`
- : A string that represents the payment method identifier. The payment method identifier only applies if the user selects this payment method.
- `total` {{optional_inline}}
- : An object that overrides the `total` property of the `detailsPromise` parameter if this payment method is selected by the user. The property takes the same input with the `total` property of the `detailsPromise` parameter.
- `additionalDisplayItems` {{optional_inline}}
- : An {{jsxref("Array")}} of objects provide additional display items that are appended to the `displayItems` property of the `detailsPromise` parameter if this payment method is selected by the user. This property is commonly used to add a discount or surcharge line item indicating the reason for the different total amount for the selected payment method that the user agent may display. The property takes the same input with the `displayItems` property of the `detailsPromise` parameter.
- `data` {{optional_inline}}
- : A serializable object that provides optional information that might be needed by the supported payment methods.

For example, you can use one to adjust the total payment amount based on the selected payment method ("5% cash discount!").

- `shippingAddressErrors` {{optional_inline}} {{deprecated_inline}} {{non-standard_inline}}
- : An object which includes an error message for each property of the shipping address that could not be validated.
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved
- `shippingOptions` {{optional_inline}} {{deprecated_inline}} {{non-standard_inline}}
- : An array of objects, each describing one available shipping option from which the user may choose.
- `total` {{optional_inline}}
- : An object with the same properties as the objects in `displayItems` providing an updated total for the payment. Make sure this equals the sum of all of the items in `displayItems`. _This is not calculated automatically_. You must update this value yourself anytime the total amount due changes. This lets you have flexibility for how to handle things like tax, discounts, and other adjustments to the total price charged.

Expand Down Expand Up @@ -316,6 +331,6 @@ document.getElementById("buyButton").onclick = requestPayment;
- [Payment Request API](/en-US/docs/Web/API/Payment_Request_API)
- [Using the Payment Request API](/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API)
- {{domxref('PaymentRequest.abort()')}}
- {{domxref("PaymentRequest.retry()")}}
- {{domxref("PaymentRequest.complete()")}}
- {{domxref("PaymentResponse")}}
- {{domxref("PaymentResponse.retry()")}}
- {{domxref("PaymentResponse.complete()")}}
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,18 @@ A {{jsxref("Promise")}} that resolves with a `PaymentRequestDetailsUpdate` objec
- `total`
- : An updated total based on the changed payment method. The total can change, for example, because the billing address of the payment method selected by the user changes the applicable sales tax.
- `modifiers`
- : An array of [`PaymentDetailsModifier`](https://www.w3.org/TR/payment-request/#paymentdetailsmodifier-dictionary) objects.

- : An {{jsxref("Array")}} of objects containing modifiers for payment details, each with the following properties:
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved

- `supportedMethods`
- : A string that represents the payment method identifier. The members of the object only apply to the payment if the user selects this payment method.
- `total` {{optional_inline}}
- : An object that overrides the `total` property of the `detailsPromise` parameter if this payment method is selected by the user. The property takes the same input with the `total` property of the `detailsPromise` parameter.
- `additionalDisplayItems` {{optional_inline}}
- : An {{jsxref("Array")}} of objects provide additional display items that are appended to the `displayItems` property of the `detailsPromise` parameter if this payment method is selected by the user. This property is commonly used to add a discount or surcharge line item indicating the reason for the different total amount for the selected payment method that the user agent may display. The property takes the same input with the `displayItems` property of the `detailsPromise` parameter.
- `data` {{optional_inline}}
- : A serializable object that provides optional information that might be needed by the supported payment methods.

skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved
- `paymentMethodErrors`
- : An object containing validation errors for the payment method, if any.

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/paymentrequestevent/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ The **`PaymentRequestEvent`** interface of the {{domxref("Payment Handler API",
## Instance properties

- {{domxref("PaymentRequestEvent.instrumentKey","instrumentKey")}} {{ReadOnlyInline}} {{Deprecated_Inline}} {{Non-standard_Inline}}
- : Returns a {{domxref("PaymentInstrument")}} object reflecting the payment instrument selected by the user or an empty string if the user has not registered or chosen a payment instrument.
- : Returns an object reflecting the payment instrument selected by the user or an empty string if the user has not registered or chosen a payment instrument.
- {{domxref("PaymentRequestEvent.methodData","methodData")}} {{ReadOnlyInline}} {{Experimental_Inline}}
- : Returns an array of objects containing payment method identifiers for the payment methods that the website accepts and any associated payment method specific data.
- {{domxref("PaymentRequestEvent.modifiers","modifiers")}} {{ReadOnlyInline}} {{Experimental_Inline}}
Expand Down
6 changes: 3 additions & 3 deletions files/en-us/web/api/paymentrequestevent/modifiers/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ browser-compat: api.PaymentRequestEvent.modifiers
{{SeeCompatTable}}{{APIRef("Payment Handler API")}}

The **`modifiers`** read-only property of the
{{domxref("PaymentRequestEvent")}} interface returns an array of `PaymentDetailsModifier` objects containing modifiers for payment details.
{{domxref("PaymentRequestEvent")}} interface returns an array of objects containing modifiers for payment details.
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved

## Value

An array of `PaymentDetailsModifier` objects containing modifiers for payment details. These objects contain the following properties:
An array of objects containing modifiers for payment details. These objects contain the following properties:

- `supportedMethods`
- : A payment method identifier. The members of the `PaymentDetailsModifier` object only apply to the payment if the user selects this payment method.
- : A payment method identifier. The members of the object only apply to the payment if the user selects this payment method.
- `total`
- : A `PaymentItem` object containing the following properties:
- `label`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ None.

### Return value

A new `PaymentRequestUpdateEvent`
A new `PaymentRequestUpdateEvent`.

## Specifications

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,29 @@ updateWith(details)
- `pending`
- : A Boolean value which is `true` if the specified `amount` has not yet been finalized. This can be used to show items such as shipping or tax amounts that depend upon the selection of shipping address, shipping option, or so forth. The user agent may show this information but is not required to do so.

- `error` {{optional_inline}} {{deprecated_inline}}
- : A string specifying an error message to present to the user*.* When calling `updateWith()`, including `error` in the updated data causes the {{Glossary("user agent")}} to display the text as a general error message. For address field specific errors, use `shippingAddressErrors`.
- `error` {{optional_inline}} {{deprecated_inline}} {{non-standard_inline}}

- : A string specifying an error message to present to the user*.* When calling `updateWith()`, including `error` in the updated data causes the {{Glossary("user agent")}} to display the text as a general error message. For address field-specific errors, use the `shippingAddressErrors` field.

- `modifiers` {{optional_inline}}
- : An array of {{domxref("PaymentDetailsModifier")}} objects, each describing a modifier for particular payment method identifiers. For example, you can use one to adjust the total payment amount based on the selected payment method ("5% cash discount!").
- `shippingAddressErrors` {{optional_inline}} {{deprecated_inline}}
- : An {{domxref("AddressErrors")}} object which includes an error message for each property of the shipping address that could not be validated.
- `shippingOptions` {{optional_inline}}
- : An array of {{domxref("PaymentShippingOption")}} objects, each describing one available shipping option from which the user may choose.

- : An array of objects, each describing a modifier for particular payment method identifiers, each with the following properties:
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved

- `supportedMethods`
- : A string that represents the payment method identifier. The payment method identifier only applies if the user selects this payment method.
- `total` {{optional_inline}}
- : An object that overrides the `total` property of the `detailsPromise` parameter if this payment method is selected by the user. The property takes the same input with the `total` property of the `detailsPromise` parameter.
- `additionalDisplayItems` {{optional_inline}}
- : An {{jsxref("Array")}} of objects provide additional display items that are appended to the `displayItems` property of the `detailsPromise` parameter if this payment method is selected by the user. This property is commonly used to add a discount or surcharge line item indicating the reason for the different total amount for the selected payment method that the user agent may display. The property takes the same input with the `displayItems` property of the `detailsPromise` parameter.
- `data` {{optional_inline}}
- : A serializable object that provides optional information that might be needed by the supported payment methods.
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved

For example, you can use one to adjust the total payment amount based on the selected payment method ("5% cash discount!").

- `shippingAddressErrors` {{optional_inline}} {{deprecated_inline}} {{non-standard_inline}}
- : An object which includes an error message for each property of the shipping address that could not be validated.
- `shippingOptions` {{optional_inline}} {{deprecated_inline}} {{non-standard_inline}}
- : An array of objects, each describing one available shipping option from which the user may choose.
- `total` {{optional_inline}}
- : An object with the same properties as the objects in `displayItems` providing an updated total for the payment. Make sure this equals the sum of all of the items in `displayItems`. _This is not calculated automatically_. You must update this value yourself anytime the total amount due changes. This lets you have flexibility for how to handle things like tax, discounts, and other adjustments to the total price charged.

Expand Down