---
title: PaymentResponse.onpayerdetailchange
slug: Web/API/PaymentResponse/onpayerdetailchange
tags:
  - API
  - Event Handler
  - Payer
  - Payer Details
  - Payment Request
  - Payment Request API
  - PaymentResponse
  - Property
  - Reference
  - Web
  - onpayerdetailchange
  - payment
  - validate
browser-compat: api.PaymentResponse.onpayerdetailchange
---
{{securecontext_header}}{{APIRef("Payment Request API")}}{{Deprecated_header}}{{Non-standard_header}}

The {{domxref("PaymentResponse")}} object's
**`onpayerdetailchange`** property is an event handler which
is called to handle the {{event("payerdetailchange")}} event, which is sent to the
`PaymentResponse` when the user makes changes to their personal information
while filling out a payment request form.

## Syntax

```js
paymentResponse.onpayerdetailchange = eventHandlerFunction;
```

### Value

An event handler function which is called to handle the {{event("payerdetailchange")}}
event when the user makes changes to their personal information while editing a payment
request form.

## Examples

In the example below, `onpayerdetailchange` is used to set up a listener for
the {{event("payerdetailchange")}} event in order to validate the information entered by
the user, requesting that any mistakes be corrected

```js
// Options for PaymentRequest(), indicating that shipping address,
// payer email address, name, and phone number all be collected.

const options = {
  requestShipping: true,
  requestPayerEmail: true,
  requestPayerName: true,
  requestPayerPhone: true,
};
const request = new PaymentRequest(methods, details, options);
const response = request.show();

// Get the data from the response

let {
  payerName: oldPayerName,
  payerEmail: oldPayerEmail,
  payerPhone: oldPayerPhone,
} = response;

// Set up a handler for payerdetailchange events, to
// request corrections as needed.

response.onpayerdetailchange = async ev => {
  const promisesToValidate = [];
  const { payerName, payerEmail, payerPhone } = response;

  // Validate each value which changed by calling a function
  // that validates each type of data, returning a promise which
  // resolves if the data is valid.

  if (oldPayerName !== payerName) {
    promisesToValidate.push(validateName(payerName));
    oldPayerName = payerName;
  }
  if (oldPayerEmail !== payerEmail) {
    promisesToValidate.push(validateEmail(payerEmail));
    oldPayerEmail = payerEmail;
  }
  if (oldPayerPhone !== payerPhone) {
    promisesToValidate.push(validatePhone(payerPhone));
    oldPayerPhone = payerPhone;
  }

  // As each validation promise resolves, add the results of the
  // validation to the errors list

  const errors = await Promise.all(promisesToValidate).then(results =>
    results.reduce((errors, result), Object.assign(errors, result))
  );

  // If we found any errors, wait for them to be corrected

  if (Object.getOwnPropertyNames(errors).length) {
    await response.retry(errors);
  } else {
    // We have a good payment; send the data to the server
    await fetch("/pay-for-things/", { method: "POST", body: response.json() });
    response.complete("success");
  }
};

await response.retry({
  payer: {
    email: "invalid domain.",
    phone: "invalid number.",
  },
});
```

## Browser compatibility

{{Compat}}
