---
title: BuyNowButton
description: "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.

  \  "
api_version: 2025-04
api_name: hydrogen-react
source_url:
  html: https://shopify.dev/docs/api/hydrogen-react/latest/components/buynowbutton
  md: https://shopify.dev/docs/api/hydrogen-react/latest/components/buynowbutton.md
---

# Buy​Now​Buttoncomponent

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.

## Props

* children

  ReactNode

  required

  Any ReactNode elements.

* variantId

  string

  required

  The ID of the variant.

* as

  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

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

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

* buttonRef

  Ref\<HTMLButtonElement>

  A `ref` to the underlying button

* defaultOnClick

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

  A default `onClick` behavior

* onClick

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

  Click event handler. Default behaviour triggers unless prevented

* quantity

  number

  The item quantity. Defaults to 1.

* sellingPlanId

  string

  The selling plan ID of the subscription variant

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

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

  ##### TypeScript

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