Buy Now functionality in Product Page

[aswanth-updot]

Discussion

Through the above discussion I understand how to implement buy now functionality in product page, But I ended up in an issue.
If I click on buy now, it is taking me to checkout after adding the product in cart, The problem is, it is not only taking that product it takes all product which is already in cart to checkout. Does any one have a solution for this?

Thanks.

[aswanth-updot]

I fixed the issue by using BuyNowButton component from hydrogen-react package

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

 const handleCheckout = (
    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>,
  ) => {
    if (!isLoggedIn) {
      navigate(loginPath);
      event?.preventDefault();
    }
 };

<CartProvider>
          <BuyNowButton
            variantId={selectedVariant?.id}
            className="cursor-pointer min-h-[41px] font-semibold text-base font-arkibal w-full rounded-full bg-black text-white"
            aria-label="Buy Now"
            quantity={quantity}
            onClick={handleCheckout}
          >
            Buy Now
          </BuyNowButton>
 </CartProvider>

But still there is a problem. The quantity is not effecting properly in checkout, Some times it work some times it won't

[aswanth-updot]

This is achived, No need to use a package for this All I did is redirect to the cart.$lines route through form action

<form
          action={`/cart/${getVariantIdNumericPart(selectedVariant.id)}:${quantity}`}
        >
          <Button
            variant={'darken'}
            className="min-h-[41px] font-semibold text-base w-full"
            aria-label="Buy Now"
            type="submit"
          >
            Buy Now
          </Button>
        </form>

const getVariantIdNumericPart = (variantId: string) => {
  const variantIdSplit = variantId.split('/');
  return variantIdSplit[variantIdSplit.length - 1];
};

There is already a default route created for this purpose