diff --git a/src/views/catalog/views/page/purchase/CatalogPurchaseView.tsx b/src/views/catalog/views/page/purchase/CatalogPurchaseView.tsx
index 06b90343..e2275968 100644
--- a/src/views/catalog/views/page/purchase/CatalogPurchaseView.tsx
+++ b/src/views/catalog/views/page/purchase/CatalogPurchaseView.tsx
@@ -3,6 +3,7 @@ import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { CurrencyIcon } from '../../../../shared/currency-icon/CurrencyIcon';
 import { CatalogPurchaseViewProps } from './CatalogPurchaseView.types';
 import { CatalogPurchaseButtonView } from './purchase-button/CatalogPurchaseButtonView';
+import { CatalogPurchaseGiftButtonView } from './purchase-gift-button/CatalogPurchaseGiftButtonView';
 
 export const CatalogPurchaseView: FC<CatalogPurchaseViewProps> = props =>
 {
@@ -70,7 +71,7 @@ export const CatalogPurchaseView: FC<CatalogPurchaseViewProps> = props =>
             </div>
             <div className="d-flex flex-column mt-1">
                 <CatalogPurchaseButtonView className="btn-sm w-100" offer={ offer } pageId={ pageId } extra={ extraData } quantity={ quantity } />
-                { offer.giftable && <button type="button" className="btn btn-secondary btn-sm w-100 mt-1">{ LocalizeText('catalog.purchase_confirmation.gift') }</button> }
+                { offer.giftable && <CatalogPurchaseGiftButtonView className="btn-sm w-100 mt-1" offer={ offer } pageId={ pageId } extra={ extraData } quantity={ quantity } /> }
             </div>
         </div>
     );
diff --git a/src/views/catalog/views/page/purchase/purchase-gift-button/CatalogPurchaseGiftButtonView.tsx b/src/views/catalog/views/page/purchase/purchase-gift-button/CatalogPurchaseGiftButtonView.tsx
new file mode 100644
index 00000000..1874d530
--- /dev/null
+++ b/src/views/catalog/views/page/purchase/purchase-gift-button/CatalogPurchaseGiftButtonView.tsx
@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../../../../../utils/LocalizeText';
+import { CatalogPurchaseGiftButtonViewProps } from './CatalogPurchaseGiftButtonView.types';
+
+export const CatalogPurchaseGiftButtonView: FC<CatalogPurchaseGiftButtonViewProps> = props =>
+{
+    const { className = '', offer = null, pageId = -1, extra = null, quantity = 1, isPurchaseAllowed = true, beforePurchase = null } = props;
+    
+    return (
+        <button type="button" className={ 'btn btn-secondary ' + className }>{ LocalizeText('catalog.purchase_confirmation.gift') }</button>
+    );
+}
diff --git a/src/views/catalog/views/page/purchase/purchase-gift-button/CatalogPurchaseGiftButtonView.types.ts b/src/views/catalog/views/page/purchase/purchase-gift-button/CatalogPurchaseGiftButtonView.types.ts
new file mode 100644
index 00000000..8f04c0ac
--- /dev/null
+++ b/src/views/catalog/views/page/purchase/purchase-gift-button/CatalogPurchaseGiftButtonView.types.ts
@@ -0,0 +1,12 @@
+import { CatalogPageOfferData } from 'nitro-renderer';
+
+export interface CatalogPurchaseGiftButtonViewProps
+{
+    className?: string;
+    offer: CatalogPageOfferData;
+    pageId: number;
+    extra?: string;
+    quantity?: number;
+    isPurchaseAllowed?: boolean;
+    beforePurchase?: () => void;
+}