Banner

Use banners to communicate important messages to customers in a prominent way.

import {render, Banner} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => );

function Extension() {
  return (
    
  );
}

import {extend, Banner} from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::Render', (root) => {
  const banner = root.createComponent(Banner, {
    status: 'critical',
    title:
      'Your payment details couldn’t be verified. Check your card details and try again.',
  });

  root.appendChild(banner);
});

BannerProps

BannerProps

title

Banners have an optional title. Use a title to grab the buyer’s attention with a short, concise message. Banners with no title should have child elements to convey the banner’s purpose to the buyer.

status

Sets the status of the banner.

collapsible

Makes the content collapsible. A collapsible banner will conceal child elements initially, but allow the user to expand the banner to see them.

onDismiss

Callback when banner is dismissed. This component is [controlled](https://reactjs.org/docs/forms.html#controlled-components), so you must manage the visibility of the banner in state by using the onDismiss callback.

id

A unique identifier for the component.

Status

'info' | 'success' | 'warning' | 'critical'