ShopPayButton
The ShopPayButton component renders a button that redirects to the Shop Pay checkout. You can customize this component using passthrough props.
Example code
Anchor link to section titled "Example code"
The variantIds and variantIdsAndQuantities props are mutually exclusive. You must pass either variantIds or variantIdsAndQuantities to the component - not both.
| Name | Type | Description |
|---|---|---|
| variantIds | { |
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 | { |
An array of variant IDs and quantities to purchase with Shop Pay. |
| className? | string |
A string of classes to apply to the div that wraps the Shop Pay button. |
| width? | string |
A string that's applied to the CSS custom property (variable) --shop-pay-button-width for the Buy with Shop Pay component. |
Component type
Anchor link to section titled "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.