Skip to content

Adding a new Paypal Monogram #2626

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Vishala230531 wants to merge 14 commits into
base: main
Choose a base branch
from
Open

Adding a new Paypal Monogram #2626

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
fe8590d
BCDC Re-design Changes
Apr 8, 2026
e9cd218
changes
Apr 8, 2026
a5a4671
Merge branch 'main' into feature/6171
Apr 9, 2026
7bd0971
changes
Apr 16, 2026
761ce7a
Merge branch 'main' into feature/6244
Apr 20, 2026
da7c7b0
Adding a new paypal monogram
Apr 20, 2026
2490978
changes
Apr 20, 2026
85feae4
changes
Apr 21, 2026
0d19cf0
changes
Apr 23, 2026
e5047a4
Merge branch 'main' into feature/6244
Apr 23, 2026
de96a8f
lint issues
Apr 23, 2026
4464634
flow errors
Apr 24, 2026
b073653
changes
Apr 24, 2026
a868de2
lint error
Apr 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/constants/button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,3 +118,9 @@ export const MESSAGE_ALIGN = {
LEFT: ("left": "left"),
RIGHT: ("right": "right"),
};

// Alternative mark for the PayPal funding source (monogram icon).
// Not a real funding source - only used in rebrand marks rendering.
export const MARKS_FUNDING = {
PP: ("pp": "pp"),
};
15 changes: 15 additions & 0 deletions src/funding/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
import { FUNDING } from "@paypal/sdk-constants/src";
import { inlineMemoize } from "@krakenjs/belter/src";

import { MARKS_FUNDING } from "../constants";

import { type FundingSourceConfig } from "./common";
import { getPayPalConfig } from "./paypal";
import { getVenmoConfig } from "./venmo";
Expand All @@ -29,6 +31,7 @@ import { getMercadopagoConfig } from "./mercadopago";
import { getMultibancoConfig } from "./multibanco";
import { getSatispayConfig } from "./satispay";
import { getPaidyConfig } from "./paidy";
import { getPPConfig } from "./pp";

export function getFundingConfig(): {
[$Values<typeof FUNDING>]: ?FundingSourceConfig,
Expand Down Expand Up @@ -64,3 +67,15 @@ export function getFundingConfig(): {
};
});
}

export function getMarksFundingConfig(): {|
[$Values<typeof FUNDING>]: ?FundingSourceConfig,
|} {
// $FlowFixMe - intentionally adding MARKS_FUNDING.PP key beyond standard FUNDING enum keys
return inlineMemoize(getMarksFundingConfig, () => {
return {
...getFundingConfig(),
[MARKS_FUNDING.PP]: getPPConfig(),
};
});
}
15 changes: 15 additions & 0 deletions src/funding/pp/config.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/* @flow */
/** @jsx node */

import { node } from "@krakenjs/jsx-pragmatic/src";
import { PPRebrandLogoExternalImage } from "@paypal/sdk-logos/src";
import { LOGO_COLOR } from "@paypal/sdk-logos/src/constants";

import { type FundingSourceConfig } from "../common";

export function getPPConfig(): FundingSourceConfig {
Copy link
Copy Markdown
Contributor

@nikrom17 nikrom17 Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"pp" is only used to render an alternative mark for the PayPal funding source. It's not a real funding source, so it doesn't need DEFAULT_FUNDING_CONFIG, flows, layouts, colors, or the FundingSourceConfig return type. Those are all button rendering properties that have no effect here.

Strip this down to just the Mark component:

/* @flow */
/** @jsx node */

import { node, type ChildType } from "@krakenjs/jsx-pragmatic/src";
import {
  PPRebrandLogoExternalImage,
  PPRebrandLogoInlineSVG,
} from "@paypal/sdk-logos/src";
import { LOGO_COLOR } from "@paypal/sdk-logos/src/constants";

// Alternative mark for the PayPal funding source (monogram icon).
// Not a real funding source - only used in rebrand marks rendering.
function Mark(): ChildType {
  return __WEB__ ? (
    <PPRebrandLogoExternalImage logoColor={LOGO_COLOR.BLUE} />
  ) : (
    <PPRebrandLogoInlineSVG />
  );
}

export function getPPConfig() {
  return {
    Mark,
  };
}

The imports for BUTTON_COLOR, BUTTON_LAYOUT, BUTTON_FLOW, DEFAULT_FUNDING_CONFIG, and FundingSourceConfig can all be removed. I verified this locally - zero Flow errors and the template only hits the <MarkLogo> branch for "pp" since Mark is defined, so Logo is never called.

// $FlowFixMe - pp is a marks-only config, only needs Mark component
return {
Mark: () => <PPRebrandLogoExternalImage logoColor={LOGO_COLOR.BLUE} />,
};
}
3 changes: 3 additions & 0 deletions src/funding/pp/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
/* @flow */

export * from "./config";
9 changes: 6 additions & 3 deletions src/marks/component.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import type {
OnShippingAddressChange,
OnShippingOptionsChange,
} from "../ui/buttons/props";
import { BUTTON_LAYOUT, BUTTON_FLOW } from "../constants";
import { BUTTON_LAYOUT, BUTTON_FLOW, MARKS_FUNDING } from "../constants";
import { determineEligibleFunding, isFundingEligible } from "../funding";
import {
supportsVenmoPopups,
Expand Down Expand Up @@ -97,6 +97,7 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
const hasShippingCallback = Boolean(
onShippingChange || onShippingAddressChange || onShippingOptionsChange
);
const isRebrandEnabled = experiment?.isPaypalRebrandEnabled;
const fundingSources = determineEligibleFunding({
fundingSource,
fundingEligibility,
Expand Down Expand Up @@ -126,6 +127,10 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
return true;
}

if (fundingSource === MARKS_FUNDING.PP) {
return Boolean(isRebrandEnabled);
}

return isFundingEligible(fundingSource, {
layout,
platform,
Expand Down Expand Up @@ -154,8 +159,6 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
throw new Error(`${fundingSource || "marks"} not eligible`);
}

const isRebrandEnabled = experiment?.isPaypalRebrandEnabled;

getElement(container).appendChild(
(
<div>
Expand Down
4 changes: 2 additions & 2 deletions src/marks/templateRebrand.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { getLocale, type FundingEligibilityType } from "@paypal/sdk-client/src";
import { toPx } from "@krakenjs/belter/src";

import type { Experiment } from "../types";
import { getFundingConfig } from "../funding";
import { getMarksFundingConfig } from "../funding";
import { CLASS } from "../constants";

type MarkOptions = {|
Expand All @@ -27,7 +27,7 @@ function Mark({
experiment,
env,
}: MarkOptions): ChildNodeType {
const fundingConfig = getFundingConfig()[fundingSource];
const fundingConfig = getMarksFundingConfig()[fundingSource];

if (!fundingConfig) {
throw new Error(`Can not find funding config for ${fundingSource}`);
Expand Down
Loading