Choose a version:

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.

Anchor to propsProps

Anchor to children children ReactNode required: Any ReactNode elements.
Anchor to variantId variantId string required: The ID of the variant.
Anchor to as 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.
Anchor to attributes attributes { key: string; value: string; }[]: An array of cart line attributes that belong to the item being added to the cart.
Anchor to buttonRef buttonRef Ref<HTMLButtonElement>: A ref to the underlying button
Anchor to defaultOnClick defaultOnClick (event?: MouseEvent<HTMLButtonElement, MouseEvent>) => boolean | void: A default onClick behavior
Anchor to onClick onClick (event?: MouseEvent<HTMLButtonElement, MouseEvent>) => boolean | void: Click event handler. Default behaviour triggers unless prevented
Anchor to quantity quantity number: The item quantity. Defaults to 1.
Anchor to sellingPlanId sellingPlanId string: The selling plan ID of the subscription variant

Examples

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

}

Examples

Example code

Description

I am the default example

JavaScript

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

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

Was this page helpful?