---
title: ShopPayButton
description: >-
  The `ShopPayButton` component renders a button that redirects to the Shop Pay
  checkout. It renders a
  [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components)
  custom element, for which it will lazy-load the source code automatically.
api_version: 2025-01
api_name: hydrogen
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/2025-01/components/shoppaybutton'
  md: 'https://shopify.dev/docs/api/hydrogen/2025-01/components/shoppaybutton.md'
---

# Shop​Pay​Button

The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout. It renders a [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components) custom element, for which it will lazy-load the source code automatically.

## Props

**`ShopPayButtonStyleProps & ShopPayDomainProps & ShopPayChannelAttribution & (ShopPayVariantIds | ShopPayVariantAndQuantities)`**

### ShopPayButtonStyleProps

* **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)](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).

### ShopPayChannelAttribution

* **channel**

  **'headless' | 'hydrogen'**

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

### ShopPayDomainProps

* **storeDomain**

  **string**

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

### ShopPayVariantAndQuantities

* **variantIdsAndQuantities**

  **Array<{ id: string; quantity: number; }>**

  **required**

  An array of variant IDs and quantities to purchase with Shop Pay.

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

### ShopPayVariantIds

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

* **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.

  ```ts
  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).

  ```ts
  string
  ```

### ShopPayDomainProps

* storeDomain

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

  ```ts
  string
  ```

### ShopPayChannelAttribution

* channel

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

  ```ts
  '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\`.

  ```ts
  string[]
  ```

* variantIdsAndQuantities

  An array of variant IDs and quantities to purchase with Shop Pay.

  ```ts
  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\`.

  ```ts
  never
  ```

* variantIdsAndQuantities

  An array of variant IDs and quantities to purchase with Shop Pay.

  ```ts
  Array<{
      id: string;
      quantity: number;
    }>
  ```

Examples

### Examples

* #### \<ShopPayButton> without \<ShopifyProvider>

  ##### Description

  \<ShopPayButton> without \<ShopifyProvider>

  ##### JavaScript

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

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

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

  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

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

  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]} />;
  }
  ```