Skip to main content

BuyNowButton
component

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.

ReactNode
required

Any ReactNode elements.

string
required

The ID of the variant.

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.

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

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

Ref<HTMLButtonElement>

A ref to the underlying button

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

A default onClick behavior

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

Click event handler. Default behaviour triggers unless prevented

number

The item quantity. Defaults to 1.

string

The selling plan ID of the subscription variant

Was this section helpful?

Example code

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