BuyerConsent

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

Anchor to ExampleExample

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);

});

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}

);

}

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);
});

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}
    />
  );
}

Anchor to PropsProps

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

Was this page helpful?