Skip to main content


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 (
<CartShopPayButton />


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.