---
title: BuyerConsent
description: BuyerConsent is used for collecting the buyer's approval for a given policy.
api_name: checkout-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/buyerconsent
  md: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/buyerconsent.md
---

# BuyerConsent

BuyerConsent is used for collecting the buyer's approval for a given policy

***

### Example

![buyerconsent](https://shopify.dev/assets/assets/images/api/checkout-extensions/post-purchase/components/buyerconsent-BFEKnlkd.png)

##### JS

```ts
import {extend, BuyerConsent} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const button = root.createComponent(
    BuyerConsent,
    {
      // eslint-disable-next-line no-console
      onChange: (value) => console.log(value),
      policy: 'subscriptions',
      checked: false,
    },
  );

  root.appendChild(button);
});
```

##### React

```tsx
import {render, BuyerConsent} from '@shopify/post-purchase-ui-extensions-react';
import {useState} from 'react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  const [consent, setConsent] = useState(false)

  return (
    <BuyerConsent
      policy="subscriptions"
      checked={consent}
      onChange={setConsent}
    />
  );
}
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| checked | `boolean` | Whether the checkbox is active. |
| error? | `string` | An error label to present with the field. |
| policy | `"subscriptions"` | The policy the buyer has to approve |
| onChange | `(value: boolean) => void` | Callback when the value changes |

***