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.

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

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

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

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

buttonRef

A `ref` to the underlying button

children

Any ReactNode elements.

defaultOnClick

A default `onClick` behavior

onClick

Click event handler. Default behaviour triggers unless prevented

quantity

The item quantity. Defaults to 1.

sellingPlanId

The selling plan ID of the subscription variant

variantId

The ID of the variant.