How to implement BuyNowButton in Hydrogen v2?

[jgitt]

Hi, I'm wondering what's the correct way to implement the BuyNowButton in Hydrogen v2?

At the moment I've got it kinda working. What I've done is:

• Create a new Hello World project (using v2023.1.4)
• Create /app/routes/index.jsx file

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

export default function ProductHandle() {
    // variant of the "snowboard" item from the demo store
    const variantId = 'gid://shopify/ProductVariant/41007289630776';
    return (
        <BuyNowButton variantId={variantId} >BUY NOW</BuyNowButton>
    );
}

• Modify /app/root.jsx by wrapping the root html element with ShopifyProvider and CartProvider

Issues

1. I get the following warning on the server
   Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch betetween the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
2. When I click the button, it goes to the checkout, but if I press the browser back button, after going back to the previous page, there's a slight delay but proceeds to go back to the checkout again. (It seems to get stuck here, where when going back, or even opening a new tab with the same page, after a delay it'll go to the checkout again.)
3. Less important, though, there's also a delay when pressing the button and moving to checkout -- is this expected behaviour? What's the best way to handle the delay?

[RohitDeshwal]

did you fix the issue

[wizardlyhel]

The <BuyNowButton> only works if you are using the <CartProvider> and <ShopifyProvider> as well. It pushes the cart mutation query to the client side.

The bases of buy now button is that it creates a new cart with cart lines and redirects you to checkout once that is done. So, to implement this behaviour in H2, we just need to do exactly that.

We just recently release a new cart abstraction that helps with tasks like this. it is currently available on the next tag. You can play with it now by following these instructions #823 (comment)

With that set of instructions, you can set up an add to cart button that can behave like a buy now button. simply pass a form data to the cart action to tell it to redirect. For example, after step 4 from the instruction:

Step 5 - Create a BuyNowButton

import {CartForm} from '@shopify/hydrogen';

export default function BuyNowButton({lines}) {
  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.LinesAdd}
      inputs={
        {lines}
      }
    >
      <input type="hidden" name="redirectToCheckout" value="true" />
      <button>
        Add to cart
      </button>
    </CartForm>
  );
}

Step 6: Handle checkout redirect

import {CartForm} from '@shopify/hydrogen';
import invariant from 'tiny-invariant';

export async function action({request, context}) {
  const {cart} = context;

  const formData = await request.formData();
  const {action, inputs} = CartForm.getFormInput(formData);

  ...

  // The Cart ID might change after each mutation, so update it each time.
  const headers = cart.setCartId(result.cart.id);

  // Handle redirect
  if (inputs.redirectToCheckout === 'true' ) {
    headers.append('Location:', result.cart.checkoutUrl)
  }

  return json(
    result,
    {status: inputs.redirectToCheckout === 'true' ? 301 : 200, headers},
  );

[guifangwu]

hi, I got the same issue.And I use these code,It didn't work. It just added an item to cart.

[andrijaO]

same :/

[jamalsoueidan]

@wizardlyhel I just tried this again, since I wanted to add "buy now" or "add to cart".

result.cart.checkoutUrl

is returning undefined if the cart not empty, and if the cart is empty then it return checkouturl.

I had to do:

const check = await cart.get();
headers.set('Location', check?.checkoutUrl || '');

[wizardlyhel]

There's a couple mistakes in my code example:

Couple things to make sure:

1. In server.ts, make sure to override the cartMutateFragment so that it returns a checkout url. (In hindsight, we probably should make this a default field to return)

      const cart = createCartHandler({
        storefront,
        customerAccount,
        getCartId: cartGetIdDefault(request.headers),
        setCartId: cartSetIdDefault(),
        cartQueryFragment: CART_QUERY_FRAGMENT,
        cartMutateFragment: CART_MUTATE_FRAGMENT,
      });

const CART_MUTATE_FRAGMENT = `#graphql
  fragment CartApiMutation on Cart {
    id
    totalQuantity
    checkoutUrl
  }
` as const;

2. When adding a Buy now button, you can put the redirect inside the input prop

function AddToCartButton({
  analytics,
  children,
  disabled,
  lines,
  onClick,
}: {
  analytics?: unknown;
  children: React.ReactNode;
  disabled?: boolean;
  lines: Array<OptimisticCartLine>;
  onClick?: () => void;
}) {
  return (
    <>
      <CartForm route="/cart" inputs={{lines}} action={CartForm.ACTIONS.LinesAdd}>
        {(fetcher: FetcherWithComponents<any>) => (
          <>
            <input
              name="analytics"
              type="hidden"
              value={JSON.stringify(analytics)}
            />
            <button
              type="submit"
              onClick={onClick}
              disabled={disabled ?? fetcher.state !== 'idle'}
            >
              {children}
            </button>
          </>
        )}
      </CartForm>
      <CartForm
        route="/cart"
        action={CartForm.ACTIONS.LinesAdd}
        inputs={{
          lines,
+          redirectToCheckout: true,
        }}
      >
        <button>
+          Buy Now
        </button>
      </CartForm>
    </>
  );
}

3. In routes/cart.tsx, set Location header to the checkout url

  const {action, inputs} = CartForm.getFormInput(formData);

  ...
  // console.log(result.cart); // check that you do have a checkoutUrl from the result of a mutation query
  if (inputs.redirectToCheckout === true ) {
    status = 303;
    headers.set('Location', result.cart.checkoutUrl)
  }

I doubled check these code works on the skeleton template.

[jamalsoueidan]

Thank you