Skip to main content

ShopPayButton

The ShopPayButton component renders a button that redirects to the Shop Pay checkout. You can customize this component using passthrough props.

Example code​

import {ShopPayButton} from '@shopify/hydrogen';

export function MyProduct({variantId}) {
  return <ShopPayButton variantIds={[variantId]} />;
}

Props​

The variantIds and variantIdsAndQuantities props are mutually exclusive. You must pass either variantIds or variantIdsAndQuantities to the component - not both.

NameTypeDescription
variantIds
{ 
 variantIds: string[]; 
 variantIdsAndQuantities?: never;
}
An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use variantIdsAndQuantities.
variantIdsAndQuantities
{ 
 variantIds: never; 
 variantIdsAndQuantities?: VariantIdAndQuantity[];
}
An array of variant IDs and quantities to purchase with Shop Pay.
className?stringA string of classes to apply to the div that wraps the Shop Pay button.
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 ShopPayButton component is a client component, which means that it renders on the client. For more information about component types, refer to React Server Components.

Used by​