Add Selling Plan ID to BuyNowButton (#2254)

Shopify · Jun 20, 2024 · 54c2f7a · 54c2f7a
1 parent 0924410
commit 54c2f7a
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 1 deletion.
diff --git a/.changeset/clean-planes-exist.md b/.changeset/clean-planes-exist.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen-react': minor
+---
+
+Add `sellingPlanId` support to `BuyNowButton`.
diff --git a/.changeset/red-apes-exercise.md b/.changeset/red-apes-exercise.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': minor
+---
+
+Add `sellingPlanId` support to `BuyNowButton`.
diff --git a/packages/hydrogen-react/src/BuyNowButton.test.tsx b/packages/hydrogen-react/src/BuyNowButton.test.tsx
@@ -57,6 +57,7 @@ describe('<BuyNowButton/>', () => {
           ]}
           quantity={4}
           variantId="SKU123"
+          sellingPlanId="1234"
         >
           Buy now
         </BuyNowButton>,
@@ -70,6 +71,7 @@ describe('<BuyNowButton/>', () => {
           {
             quantity: 4,
             merchandiseId: 'SKU123',
+            sellingPlanId: '1234',
             attributes: [
               {key: 'color', value: 'blue'},
               {key: 'size', value: 'large'},

diff --git a/packages/hydrogen-react/src/BuyNowButton.tsx b/packages/hydrogen-react/src/BuyNowButton.tsx
@@ -11,6 +11,8 @@ interface BuyNowButtonPropsBase {
   quantity?: number;
   /** The ID of the variant. */
   variantId: string;
+  /** The selling plan ID of the subscription variant */
+  sellingPlanId?: string;
   /** An array of cart line attributes that belong to the item being added to the cart. */
   attributes?: {
     key: string;
@@ -34,6 +36,7 @@ export function BuyNowButton<AsType extends React.ElementType = 'button'>(
   const {
     quantity,
     variantId,
+    sellingPlanId,
     onClick,
     attributes,
     children,
@@ -54,10 +57,11 @@ export function BuyNowButton<AsType extends React.ElementType = 'button'>(
           quantity: quantity ?? 1,
           merchandiseId: variantId,
           attributes,
+          sellingPlanId,
         },
       ],
     });
-  }, [cartCreate, quantity, variantId, attributes]);
+  }, [cartCreate, quantity, variantId, attributes, sellingPlanId]);
 
   return (
     <BaseButton