diff --git a/.changeset/modern-drinks-think.md b/.changeset/modern-drinks-think.md
new file mode 100644
index 00000000..b7533173
--- /dev/null
+++ b/.changeset/modern-drinks-think.md
@@ -0,0 +1,5 @@
+---
+"@paypal/paypal-js": minor
+---
+
+Adding test for card-fields.test.ts
diff --git a/packages/paypal-js/types/components/card-fields.d.ts b/packages/paypal-js/types/components/card-fields.d.ts
index 2280e6b7..a4860e6f 100644
--- a/packages/paypal-js/types/components/card-fields.d.ts
+++ b/packages/paypal-js/types/components/card-fields.d.ts
@@ -127,15 +127,30 @@ export interface PayPalCardFieldsIndividualField {
     close: () => Promise<void>;
 }
 
-export interface PayPalCardFieldsComponentOptions {
-    createOrder: () => Promise<string>;
+export interface PayPalCardFieldsComponentBasics {
     onApprove: (data: CardFieldsOnApproveData) => void;
     onError: (err: Record<string, unknown>) => void;
-    createVaultSetupToken?: () => Promise<string>;
+    onCancel?: () => Promise<void> | void;
     inputEvents?: PayPalCardFieldsInputEvents;
     style?: Record<string, PayPalCardFieldsStyleOptions>;
 }
 
+export interface PayPalCardFieldsComponentCreateOrder
+    extends PayPalCardFieldsComponentBasics {
+    createOrder: () => Promise<string>;
+    createVaultSetupToken?: never;
+}
+
+export interface PayPalCardFieldsComponentCreateVaultSetupToken
+    extends PayPalCardFieldsComponentBasics {
+    createOrder?: never;
+    createVaultSetupToken: () => Promise<string>;
+}
+
+export type PayPalCardFieldsComponentOptions =
+    | PayPalCardFieldsComponentCreateOrder
+    | PayPalCardFieldsComponentCreateVaultSetupToken;
+
 export interface PayPalCardFieldsComponent {
     getState: () => Promise<PayPalCardFieldsStateObject>;
     isEligible: () => boolean;
diff --git a/packages/paypal-js/types/tests/card-fields.test.ts b/packages/paypal-js/types/tests/card-fields.test.ts
new file mode 100644
index 00000000..ce6faa6e
--- /dev/null
+++ b/packages/paypal-js/types/tests/card-fields.test.ts
@@ -0,0 +1,48 @@
+import { test, vi, describe, expect } from "vitest";
+
+import { PayPalCardFieldsComponentOptions } from "../components/card-fields";
+
+describe.only("testing createOrder and createVaultToken types", () => {
+    test("only creatOrder", () => {
+        const createOrderCallback: PayPalCardFieldsComponentOptions = {
+            createOrder: vi.fn(),
+            onApprove: vi.fn(),
+            onError: vi.fn(),
+        };
+
+        expect(createOrderCallback.createVaultSetupToken).toBeUndefined();
+    });
+
+    test("only createVaultSetupToken", () => {
+        const createVaultSetupTokenCallback: PayPalCardFieldsComponentOptions =
+            {
+                createVaultSetupToken: vi.fn(),
+                onApprove: vi.fn(),
+                onError: vi.fn(),
+            };
+
+        expect(createVaultSetupTokenCallback.createOrder).toBeUndefined();
+    });
+
+    test.skip("Can't have both createOrdre and createVaultSetupToken", () => {
+        // @ts-expect-error : should throw error if both createOrder and createVaultSetupToken called
+        const callback: PayPalCardFieldsComponentOptions = {
+            createOrder: vi.fn(),
+            createVaultSetupToken: vi.fn(),
+            onApprove: vi.fn(),
+            onError: vi.fn(),
+        };
+
+        expect(callback).toThrowError();
+    });
+
+    test.skip("Can't implement neither", () => {
+        // @ts-expect-error: should throw error if neither createOrder or createVaultSetuptoken called
+        const callback: PayPalCardFieldsComponentOptions = {
+            onApprove: vi.fn(),
+            onError: vi.fn(),
+        };
+
+        expect(callback).toThrowError();
+    });
+});