# BuyNowButton

The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout.

Must be a child of a `CartProvider` component.
  

```jsx
import {BuyNowButton} from '@shopify/hydrogen-react';

export default function ProductBuyNowButton({product}) {
  const variantId = product.variants[0].id;

  if (!variantId) {
    return null;
  }

  return <BuyNowButton variantId={variantId} />;
}

```

```tsx
import {BuyNowButton} from '@shopify/hydrogen-react';
import type {Product} from '@shopify/hydrogen-react/storefront-api-types';

export default function ProductBuyNowButton({product}: {product: Product}) {
  const variantId = product.variants[0].id;

  if (!variantId) {
    return null;
  }

  return <BuyNowButton variantId={variantId} />;
}

```

## Props

### BuyNowButtonPropsForDocs

### as

value: `AsType`

Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button.

### attributes

value: `{ key: string; value: string; }[]`

An array of cart line attributes that belong to the item being added to the cart.

### buttonRef

value: `Ref<HTMLButtonElement>`

A `ref` to the underlying button

### children

value: `ReactNode`

Any ReactNode elements.

### defaultOnClick

value: `(event?: MouseEvent<HTMLButtonElement, MouseEvent>) => boolean | void`

A default `onClick` behavior

### onClick

value: `(event?: MouseEvent<HTMLButtonElement, MouseEvent>) => boolean | void`

Click event handler. Default behaviour triggers unless prevented

### quantity

value: `number`

The item quantity. Defaults to 1.

### sellingPlanId

value: `string`

The selling plan ID of the subscription variant

### variantId

value: `string`

The ID of the variant.