---
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: 2023-07
api_name: hydrogen
source_url:
  html: https://shopify.dev/docs/api/hydrogen/2023-07/components/shoppaybutton
  md: https://shopify.dev/docs/api/hydrogen/2023-07/components/shoppaybutton.md
---

# Shop​Pay​Buttoncomponent

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 & (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).

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

```ts
{
  /** 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\`).

  ```ts
  string
  ```

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

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

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

  ```ts
  never
  ```

* variantIdsAndQuantities

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

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

```ts
{
  /** 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;
  }>;
}
```

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

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

## Examples

\<ShopPayButton> with \<ShopifyProvider>

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

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

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

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

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