Added card fields eligibility types

.changeset/public-ears-stay.md

@@ -0,0 +1,5 @@
+---
+"@paypal/paypal-js": minor
+---
+
+Added eligibility API typings for Card Fields and created card fields test file for its types

packages/paypal-js/src/utils.ts

@@ -1,7 +1,8 @@
 import type { PayPalScriptOptions } from "../types/script-options";
 
 interface PayPalScriptOptionsWithStringIndex
-    extends PayPalScriptOptions,
+    extends
+        PayPalScriptOptions,
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         Record<string, any> {}
 

packages/paypal-js/types/v6/components/find-eligible-methods.d.ts

@@ -13,6 +13,7 @@ export type EligiblePaymentMethods =
     | "paypal"
     | "venmo"
     | "apple_pay"
+    | "advanced_cards"
     | "google_pay";
 
 export type PaymentFlow =
@@ -33,6 +34,7 @@ export type FundingSource =
     | "paypal"
     | "venmo"
     | "card"
+    | "advanced_cards"
     | "applepay"
     | "googlepay";
 
@@ -49,6 +51,29 @@ type PayLaterEligiblePaymentMethodDetails = BaseEligiblePaymentMethodDetails & {
     productCode: PayLaterProductCodes;
 };
 
+type CardFieldsEligiblePaymentMethodDetails = {
+    supportsInstallments: boolean;
+    cobrandedEnabled: boolean;
+    vendors: CardFieldsEligibleVendorDetails[];
+};
+
+type CardFieldsCardNetwork =
+    | "AMEX"
+    | "CUP"
+    | "DINERS"
+    | "DISCOVER"
+    | "JCB"
+    | "MAESTRO"
+    | "MASTERCARD"
+    | "VISA";
+
+type CardFieldsEligibleVendorDetails = {
+    network: CardFieldsCardNetwork;
+    eligible: boolean;
+    canBeVaulted: boolean;
+    branded: boolean;
+};
+
 type ApplePayEligiblePaymentMethodDetails = BaseEligiblePaymentMethodDetails & {
     config: ApplePayConfig;
 };
@@ -65,9 +90,11 @@ export type FindEligibleMethodsGetDetails<T extends FundingSource> =
           ? PayLaterEligiblePaymentMethodDetails
           : T extends "applepay"
             ? ApplePayEligiblePaymentMethodDetails
-            : T extends "googlepay"
-              ? GooglePayEligiblePaymentMethodDetails
-              : BaseEligiblePaymentMethodDetails;
+            : T extends "advanced_cards"
+              ? CardFieldsEligiblePaymentMethodDetails
+              : T extends "googlepay"
+                ? GooglePayEligiblePaymentMethodDetails
+                : BaseEligiblePaymentMethodDetails;
 
 type EligiblePaymentMethodDetails = {
     can_be_vaulted?: boolean;

packages/paypal-js/types/v6/tests/card-fields.test.ts

@@ -0,0 +1,80 @@
+import { loadCoreSdkScript } from "../../../src/v6";
+import type { PayPalV6Namespace } from "../index";
+
+/**
+ * Type test for Card Fields integration
+ *
+ * @remarks
+ * This test verifies TypeScript compilation and type inference.
+ * The function is never executed — it's used for type-checking only.
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+async function main() {
+    let paypal: PayPalV6Namespace | null;
+
+    try {
+        paypal = await loadCoreSdkScript({
+            environment: "sandbox",
+            debug: true,
+        });
+    } catch (err) {
+        throw new Error(`Failed to load the paypal sdk script: ${err}`);
+    }
+
+    if (!paypal?.createInstance) {
+        throw new Error("Invalid paypal object for v6");
+    }
+
+    if (!paypal?.version) {
+        throw new Error("PayPal v6 namespace missing version property");
+    }
+
+    const sdkInstance = await paypal.createInstance({
+        clientToken: "fakeValue",
+        components: ["card-fields"],
+    });
+
+    const paymentMethods = await sdkInstance.findEligibleMethods({
+        currencyCode: "USD",
+    });
+
+    if (!paymentMethods.isEligible("advanced_cards")) {
+        return;
+    }
+
+    const details = paymentMethods.getDetails("advanced_cards");
+    details.supportsInstallments;
+    details.cobrandedEnabled;
+    details.vendors[0].network;
+    details.vendors[0].eligible;
+    details.vendors[0].canBeVaulted;
+    details.vendors[0].branded;
+
+    const paypalCardFieldsOneTimePaymentSession =
+        sdkInstance.createCardFieldsOneTimePaymentSession();
+    paypalCardFieldsOneTimePaymentSession.createCardFieldsComponent({
+        type: "number",
+        placeholder: "Enter a number:",
+    });
+    paypalCardFieldsOneTimePaymentSession.createCardFieldsComponent({
+        type: "cvv",
+        placeholder: "Enter CVV:",
+    });
+    paypalCardFieldsOneTimePaymentSession.createCardFieldsComponent({
+        type: "expiry",
+        placeholder: "Enter Expiry:",
+    });
+
+    const createOrder = () => Promise.resolve({ orderId: "ABC123" });
+
+    const submitButton = document.createElement("button");
+    submitButton.addEventListener("click", async () => {
+        try {
+            const { orderId } = await createOrder();
+            await paypalCardFieldsOneTimePaymentSession.submit(orderId);
+        } catch (error) {
+            console.error(error);
+        }
+    });
+}

packages/react-paypal-js/src/v6/utils.ts

@@ -209,7 +209,7 @@ export function deepEqual(
     }
 
     // Non-object primitives (number, string, boolean, function, symbol, bigint) that
-// Same typeof (verified above) but not ===, so unequal primitives 
+    // Same typeof (verified above) but not ===, so unequal primitives
     if (typeof obj1 !== "object") {
         return false;
     }