Include branded in HCF eligibility check

src/zoid/card-fields/component.jsx

@@ -475,7 +475,10 @@ export const getCardFieldsComponent: () => CardFieldsComponent = memoize(
 
       eligible: () => {
         const fundingEligibility = getRefinedFundingEligibility();
-        if (fundingEligibility?.card?.eligible) {
+        if (
+          fundingEligibility?.card?.eligible &&
+          !fundingEligibility.card.branded
+        ) {
           return {
             eligible: true,
           };

test/integration/tests/card-fields/eligibility.js

@@ -0,0 +1,55 @@
+/* @flow */
+
+import { FUNDING } from "@paypal/sdk-constants/src";
+
+import {
+  createTestContainer,
+  destroyTestContainer,
+  mockProp,
+  assert,
+} from "../common";
+
+describe.only(`paypal card fields component`, () => {
+  beforeEach(() => {
+    createTestContainer();
+  });
+
+  afterEach(() => {
+    destroyTestContainer();
+  });
+
+  it(`should not be eligible or render when branded is true`, (done) => {
+    const fundingSource = FUNDING.CARD;
+    mockProp(window.__TEST_FUNDING_ELIGIBILITY__, fundingSource, {
+      eligible: true,
+      branded: true,
+    });
+
+    const cardButton = window.paypal.Buttons({
+      fundingSource,
+    });
+
+    const cardFields = window.paypal.CardFields({});
+
+    assert.equal(cardFields.isEligible(), false);
+    done();
+  });
+
+  it(`should be eligible when branded is false`, (done) => {
+    const fundingSource = FUNDING.CARD;
+    mockProp(window.__TEST_FUNDING_ELIGIBILITY__, fundingSource, {
+      eligible: true,
+      branded: false,
+    });
+    window.__COMPONENTS__ = ["buttons", "card-fields"];
+
+    const cardButton = window.paypal.Buttons({
+      fundingSource,
+    });
+
+    const cardFields = window.paypal.CardFields({});
+
+    assert.equal(cardFields.isEligible(), true);
+    done();
+  });
+});

test/integration/tests/card-fields/index.js

@@ -0,0 +1,3 @@
+/* @flow */
+
+import "./eligibility";

test/integration/tests/index.js

@@ -10,3 +10,4 @@ import "./security";
 import "./funding/paylater";
 import "./funding/applepay";
 import "./funding/venmo";
+import "./card-fields";

test/paypal.js

@@ -7,6 +7,7 @@ import * as paypalWallet from "../src/interface/wallet"; // eslint-disable-line
 import * as paypalMarks from "../src/interface/marks"; // eslint-disable-line import/no-namespace
 import * as paypalFields from "../src/interface/fields"; // eslint-disable-line import/no-namespace
 import * as paypalPaymentFields from "../src/interface/payment-fields"; // eslint-disable-line import/no-namespace
+import * as paypalCardFields from "../src/interface/card-fields"; // eslint-disable-line import/no-namespace
 
 // the enable-funding=venmo flag is temporarily needed for the venmo experiment
 // the enable-funding=applepay flag is needed for applepay vertical stack and standalone buttons to render
@@ -34,4 +35,8 @@ setupSDK([
     name: "paypal-fields",
     requirer: () => ({ ...paypalFields, ...paypalPaymentFields }),
   },
+  {
+    name: "paypal-card-fields",
+    requirer: () => paypalCardFields,
+  },
 ]);