# ShopPayButton
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.
### <ShopPayButton> without <ShopifyProvider>

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

export function AddVariantQuantity1({variantId, storeDomain}) {
  return &lt;ShopPayButton variantIds={[variantId]} storeDomain={storeDomain} /&gt;;
}

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

```

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

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

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

```


## Props

### ShopPayButtonProps

ShopPayButtonStyleProps & ShopPayDomainProps & (ShopPayVariantIds | ShopPayVariantAndQuantities)
### ShopPayButtonStyleProps

### className
A string of classes to apply to the `div` that wraps the Shop Pay button.
### 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).
### ShopPayDomainProps

### storeDomain
The domain of your Shopify storefront URL (eg: `your-store.myshopify.com`).
### 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`.
### variantIdsAndQuantities
An array of variant IDs and quantities to purchase with Shop Pay.
### 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`.
### variantIdsAndQuantities
An array of variant IDs and quantities to purchase with Shop Pay.
## Examples
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.
### 
If `<ShopifyProvider>` context provider is used in your app, you can use the `<ShopPayButton>` without supplying a `storeDomain` prop
### <ShopPayButton> with <ShopifyProvider>

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

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

export function AddVariantQuantity1({variantId}) {
  return &lt;ShopPayButton variantIds={[variantId]} /&gt;;
}

```

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

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

export function AddVariantQuantity1({variantId}: {variantId: string}) {
  return &lt;ShopPayButton variantIds={[variantId]} /&gt;;
}

```