Choose a version:

ShopPayButton
component

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.

ShopPayButtonProps

ShopPayButtonStyleProps & ShopPayDomainProps & ShopPayChannelAttribution & (ShopPayVariantIds | ShopPayVariantAndQuantities)

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
```

{
  /** A string of classes to apply to the `div` that wraps the Shop Pay button. */
  className?: string;
  /** 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). */
  width?: string;
}

ShopPayDomainProps

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

{
  /** The domain of your Shopify storefront URL (eg: `your-store.myshopify.com`). */
  storeDomain?: string;
}

ShopPayChannelAttribution

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

{
  /** A string that adds channel attribution to the order. Can be either `headless` or `hydrogen` */
  channel?: '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
```

{
  /** 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`. */
  variantIds: string[];
  /** An array of variant IDs and quantities to purchase with Shop Pay. */
  variantIdsAndQuantities?: 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;
  }>
```

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

Was this section helpful?

<ShopPayButton> without <ShopifyProvider>

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

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-react';

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-react';

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}
    />
  );
}

Anchor to examplesExamples

Anchor to example-<shoppaybutton>-with-<shopifyprovider><ShopPayButton> with <ShopifyProvider>

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

Was this section helpful?

<ShopPayButton> with <ShopifyProvider>

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

export default function App() {

return (

<ShopifyProvider

storeDomain="my-store"

storefrontToken="abc123"

storefrontApiVersion="2025-01"

countryIsoCode="CA"

languageIsoCode="EN"

</ShopifyProvider>

);

}

export function AddVariantQuantity1({variantId}) {

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

}

examples

<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-react';

export default function App() {
  return (
    <ShopifyProvider
      storeDomain="my-store"
      storefrontToken="abc123"
      storefrontApiVersion="2025-01"
      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-react';

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

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

ShopPayButtoncomponent

Anchor to propsProps

ShopPayButtonStyleProps

ShopPayChannelAttribution

ShopPayDomainProps

ShopPayVariantAndQuantities

ShopPayVariantIds

ShopPayButtonProps

ShopPayButtonStyleProps

ShopPayDomainProps

ShopPayChannelAttribution

ShopPayVariantIds

ShopPayVariantAndQuantities

examples

<ShopPayButton> without <ShopifyProvider>

description

JavaScript

TypeScript

Anchor to examplesExamples

examples

<ShopPayButton> with <ShopifyProvider>

description

JavaScript

TypeScript

ShopPayButton
component