Skip to main content

CartShopPayButton

The CartShopPayButton component renders a ShopPayButton for the items in the cart. It must be a descendent of a CartProvider component.

Example code​

import {CartShopPayButton, CartProvider} from '@shopify/hydrogen';

export default function MyComponent() {
  return (
    <CartProvider>
      <CartShopPayButton />
    </CartProvider>
  );
}

Props​

NameTypeDescription
className?Omit&#60;React.ComponentProps&#60;typeof ShopPayButton&#62;, 'variantIds'&#62;)A string of classes to apply to the div that wraps the shop-pay-button web component.
width?stringA string that's applied to the CSS custom property (variable) --shop-pay-button-width for the Buy with Shop Pay component.

Component type​

The CartShopPayButton component is a client component, which means that it renders on the client. For more information about component types, refer to React Server Components.