Choose a version:

ShopPayButton

The ShopPayButton component renders a button that redirects to the Shop Pay checkout. It renders a <shop-pay-button> custom element, for which it will lazy-load the source code automatically.

Anchor to propsProps

ShopPayButtonStyleProps & ShopPayDomainProps & ShopPayChannelAttribution & (ShopPayVariantIds | ShopPayVariantAndQuantities)

Anchor to ShopPayButtonStyleProps

ShopPayButtonStyleProps

Anchor to className className string: A string of classes to apply to the div that wraps the Shop Pay button.
Anchor to width width string: A string that's applied to the CSS custom property (variable) --shop-pay-button-width for the Buy with Shop Pay component.

Anchor to ShopPayChannelAttribution

ShopPayChannelAttribution

Anchor to channel channel 'headless' | 'hydrogen': A string that adds channel attribution to the order. Can be either headless or hydrogen

Anchor to ShopPayDomainProps

ShopPayDomainProps

Anchor to storeDomain storeDomain string: The domain of your Shopify storefront URL (eg: your-store.myshopify.com).

Anchor to ShopPayVariantAndQuantities

ShopPayVariantAndQuantities

Anchor to variantIdsAndQuantities variantIdsAndQuantities Array<{ id: string; quantity: number; }> required: An array of variant IDs and quantities to purchase with Shop Pay.
Anchor to variantIds variantIds 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.

Anchor to ShopPayVariantIds

ShopPayVariantIds

Anchor to variantIds variantIds string[] required: 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.
Anchor to variantIdsAndQuantities variantIdsAndQuantities never: An array of variant IDs and quantities to purchase with Shop Pay.

ShopPayButtonStyleProps

className
A string of classes to apply to the `div` that wraps the Shop Pay button.
```
string
```
width
A string that's applied to the [CSS custom property (variable)](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) `--shop-pay-button-width` for the [Buy with Shop Pay component](https://shopify.dev/custom-storefronts/tools/web-components#buy-with-shop-pay-component).
```
string
```

ShopPayDomainProps

storeDomain
The domain of your Shopify storefront URL (eg: `your-store.myshopify.com`).
```
string
```

ShopPayChannelAttribution

channel
A string that adds channel attribution to the order. Can be either `headless` or `hydrogen`
```
'headless' | 'hydrogen'
```

ShopPayVariantIds

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`.
```
string[]
```
variantIdsAndQuantities
An array of variant IDs and quantities to purchase with Shop Pay.
```
never
```

ShopPayVariantAndQuantities

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`.
```
never
```
variantIdsAndQuantities
An array of variant IDs and quantities to purchase with Shop Pay.
```
Array<{
    id: string;
    quantity: number;
  }>
```

Examples

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

export function AddVariantQuantity1({variantId, storeDomain}) {

return <ShopPayButton variantIds={[variantId]} storeDomain={storeDomain} />;

}

export function AddVariantQuantityMultiple({variantId, quantity, storeDomain}) {

return (

<ShopPayButton

variantIdsAndQuantities={[{id: variantId, quantity}]}

storeDomain={storeDomain}

);

}

export function ChannelAttribution({channel, variantId, storeDomain}) {

return (

<ShopPayButton

channel={channel}

variantIds={[variantId]}

storeDomain={storeDomain}

);

}

Examples

<ShopPayButton> without <ShopifyProvider>

Description

\<ShopPayButton> without \<ShopifyProvider>

JavaScript

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

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

export function AddVariantQuantityMultiple({variantId, quantity, storeDomain}) {
  return (
    <ShopPayButton
      variantIdsAndQuantities={[{id: variantId, quantity}]}
      storeDomain={storeDomain}
    />
  );
}

export function ChannelAttribution({channel, variantId, storeDomain}) {
  return (
    <ShopPayButton
      channel={channel}
      variantIds={[variantId]}
      storeDomain={storeDomain}
    />
  );
}

TypeScript

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

export function AddVariantQuantity1({
  variantId,
  storeDomain,
}: {
  variantId: string;
  storeDomain: string;
}) {
  return <ShopPayButton variantIds={[variantId]} storeDomain={storeDomain} />;
}

export function AddVariantQuantityMultiple({
  variantId,
  quantity,
  storeDomain,
}: {
  variantId: string;
  quantity: number;
  storeDomain: string;
}) {
  return (
    <ShopPayButton
      variantIdsAndQuantities={[{id: variantId, quantity}]}
      storeDomain={storeDomain}
    />
  );
}

export function ChannelAttribution({
  channel,
  variantId,
  storeDomain,
}: {
  channel: 'headless' | 'hydrogen';
  variantId: string;
  storeDomain: string;
}) {
  return (
    <ShopPayButton
      channel={channel}
      variantIds={[variantId]}
      storeDomain={storeDomain}
    />
  );
}

<ShopPayButton> with <ShopifyProvider>

Description

If \<ShopifyProvider> context provider is used in your app, you can use the \<ShopPayButton> without supplying a `storeDomain` prop

JavaScript

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

export default function App() {
  return (
    <ShopifyProvider
      storeDomain="my-store"
      storefrontToken="abc123"
      storefrontApiVersion="2025-10"
      countryIsoCode="CA"
      languageIsoCode="EN"
    >
      <AddVariantQuantity1 variantId="gid://shopify/ProductVariant/1" />
    </ShopifyProvider>
  );
}

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

TypeScript

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

export default function App() {
  return (
    <ShopifyProvider
      storeDomain="my-store"
      storefrontToken="abc123"
      storefrontApiVersion="2026-01"
      countryIsoCode="CA"
      languageIsoCode="EN"
    >
      <AddVariantQuantity1 variantId="gid://shopify/ProductVariant/1" />
    </ShopifyProvider>
  );
}

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

Was this page helpful?