paypal · sailaya99 · Sep 11, 2025
diff --git a/demo/flex.html b/demo/flex.html
@@ -4,7 +4,7 @@
         <title>Messaging.js Dev Sandbox</title>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-        <script src="//localhost.paypal.com:8080/messaging.js"></script>
+        <script src="//localhost.paypal.com:8080/sdk.js?cache=false&client-id=test"></script>
 
         <style>
             body {
@@ -142,7 +142,13 @@
                     wrapper.appendChild(sideContainer);
 
                     container.appendChild(wrapper);
-                    paypal.Messages(conf).render([mainContainer, sideContainer]);
+                    if (typeof paypal.Messages === 'function') {
+                        paypal.Messages(conf).render([mainContainer, sideContainer]);
+                    } else {
+                        console.error('paypal.Messages is not available. Using fallback...');
+                        mainContainer.innerHTML = '<div style="background-color: #f0f0f0; padding: 10px; border-radius: 5px;">Demo PayPal Message</div>';
+                        sideContainer.innerHTML = '<div style="background-color: #f0f0f0; padding: 10px; border-radius: 5px;">Demo PayPal Message</div>';
+                    }
                 });
             });
         </script>

diff --git a/demo/standalone.html b/demo/standalone.html
@@ -4,7 +4,7 @@
         <title>Messaging.js Dev Sandbox</title>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-        <script src="//localhost.paypal.com:8080/messaging.js" data-pp-account="DEV_US_MULTI"></script>
+        <script src="//localhost.paypal.com:8080/sdk.js?cache=false&client-id=test" data-pp-account="DEV_US_MULTI"></script>
     </head>
 
     <body>

diff --git a/scripts/generate-svg-module.js b/scripts/generate-svg-module.js
@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+
+/**
+ * This script reads SVG files from the demo/BrandingLogos folder and generates a JavaScript module
+ * with base64-encoded SVGs that can be imported directly in the browser without needing the fs module.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Path to the SVG logo files
+const LOGOS_DIR = path.resolve(__dirname, '../demo/BrandingLogos');
+// Output file path
+const OUTPUT_FILE = path.resolve(__dirname, '../src/utils/svgData.js');
+
+// Read all SVG files from the directory
+const svgFiles = fs.readdirSync(LOGOS_DIR).filter(file => file.endsWith('.svg'));
+
+// Generate the JavaScript module content
+let moduleContent = `/**
+ * Auto-generated file containing base64-encoded SVG logo data
+ * Generated from SVG files in demo/BrandingLogos
+ * DO NOT EDIT DIRECTLY
+ */
+
+export const svgData = {
+`;
+
+// Process each SVG file
+svgFiles.forEach(file => {
+    const filePath = path.join(LOGOS_DIR, file);
+    const svgContent = fs.readFileSync(filePath, 'utf8');
+    const base64Content = Buffer.from(svgContent).toString('base64');
+    const dataUri = `data:image/svg+xml;base64,${base64Content}`;
+
+    // Add the file to the module with its name as the key
+    moduleContent += `  '${file}': '${dataUri}',\n`;
+});
+
+// Close the module content
+moduleContent += `};
+
+/**
+ * Returns a data URI for the specified SVG file
+ * @param {string} filename - SVG filename in the demo/BrandingLogos folder
+ * @returns {string} - Base64 encoded SVG data URI
+ */
+export const getSvgDataUri = (filename) => {
+  if (!svgData[filename]) {
+    console.warn(\`SVG file not found: \${filename}\`);
+    return '';
+  }
+  return svgData[filename];
+};
+
+/**
+ * Creates a logo object with dimensions for the messaging component
+ * @param {string} filename - SVG filename in the demo/BrandingLogos folder
+ * @param {number[]} dimensions - Width and height of the logo [width, height]
+ * @returns {Object} - Logo object with src and dimensions
+ */
+export const createLogo = (filename, dimensions) => {
+  return {
+    src: getSvgDataUri(filename),
+    dimensions
+  };
+};
+`;
+
+// Write the module to the output file
+fs.writeFileSync(OUTPUT_FILE, moduleContent);
+
+console.log(`SVG module generated at ${OUTPUT_FILE}`);
diff --git a/src/server/locale/US/PAYPAL_CREDIT/logos.js b/src/server/locale/US/PAYPAL_CREDIT/logos.js
@@ -1,36 +1,43 @@
-const ROOT_URL = 'https://www.paypalobjects.com/upstream/assets/logos/US';
+import { createLogo } from '../../../../utils/svgData';
+
+
 const TYPES = ['COLOR', 'WHITE', 'BLACK', 'GRAYSCALE'];
-const TYPE_MAP = { COLOR: 'fc', WHITE: 'wh', BLACK: 'mono', GRAYSCALE: 'grayscale' };
-const getSvgSrc = svgFileName => `${ROOT_URL}/${svgFileName}.svg`;
+// These are the filename mappings for the SVG files
+const TYPE_MAP = { 
+    COLOR: { file: 'primary.svg', dims: [100, 100] }, 
+    WHITE: { file: 'WhiteMonogram.svg', dims: [100, 100] }, 
+    BLACK: { file: 'BlackMonogram.svg', dims: [100, 100] }, 
+    GRAYSCALE: { file: 'primary.svg', dims: [100, 100] } 
+};
 
 const STACKED = TYPES.reduce(
     (object, type) => ({
         ...object,
-        [type]: { dimensions: [453, 152], src: getSvgSrc(`ppc_${TYPE_MAP[type]}_pri`) }
+        [type]: createLogo(TYPE_MAP[type].file, TYPE_MAP[type].dims)
     }),
     {}
 );
 
 const SINGLE_LINE = TYPES.reduce(
     (object, type) => ({
         ...object,
-        [type]: { dimensions: [573, 80], src: getSvgSrc(`ppc_${TYPE_MAP[type]}_alt`) }
+        [type]: createLogo(TYPE_MAP[type].file, [100, 80])
     }),
     {}
 );
 
 const SINGLE_LINE_NO_PAYPAL = TYPES.reduce(
     (object, type) => ({
         ...object,
-        [type]: { dimensions: [401, 100], src: getSvgSrc(`ppc_${TYPE_MAP[type]}_alt_no_paypal`) }
+        [type]: createLogo('PPC Wordmark.svg', [100, 100])
     }),
     {}
 );
 
 const SINGLE_LINE_NO_PP = TYPES.reduce(
     (object, type) => ({
         ...object,
-        [type]: { dimensions: [477, 64], src: getSvgSrc(`ppc_${TYPE_MAP[type]}_alt_noPP`) }
+        [type]: createLogo('PPC Wordmark.svg', [100, 64])
     }),
     {}
 );

diff --git a/src/server/message/logoMutations.js b/src/server/message/logoMutations.js
@@ -2,21 +2,21 @@ import Logo from './logos';
 
 export const textLogoMutations = [
     ['text.color:white && logo.type:primary', { logo: Logo.PP_PAYPAL.WHITE }],
-    ['text.color:grayscale && logo.type:primary', { logo: Logo.PP_PAYPAL.GRAYSCALE }],
+    ['text.color:grayscale && logo.type:primary', { logo: Logo.PP_PAYPAL.MONOCHROME }],
     ['text.color:monochrome && logo.type:primary', { logo: Logo.PP_PAYPAL.MONOCHROME }],
 
     ['text.color:white && logo.type:alternative', { logo: Logo.PP_PAYPAL.WHITE[0] }],
-    ['text.color:grayscale && logo.type:alternative', { logo: Logo.PP_PAYPAL.GRAYSCALE[0] }],
+    ['text.color:grayscale && logo.type:alternative', { logo: Logo.PP_PAYPAL.MONOCHROME[0] }],
     ['text.color:monochrome && logo.type:alternative', { logo: Logo.PP_PAYPAL.MONOCHROME[0] }],
 
     ['text.color:white && logo.type:inline', { logo: Logo.NO_PP_MONOGRAM.WHITE }],
-    ['text.color:grayscale && logo.type:inline', { logo: Logo.NO_PP_MONOGRAM.GRAYSCALE }],
+    ['text.color:grayscale && logo.type:inline', { logo: Logo.NO_PP_MONOGRAM.MONOCHROME }],
     ['text.color:monochrome && logo.type:inline', { logo: Logo.NO_PP_MONOGRAM.MONOCHROME }]
 ];
 
 export const flexLogoMutations = [
     ['color:gray', { logo: Logo.PP_PAYPAL.COLOR }],
     ['color:white', { logo: Logo.PP_PAYPAL.COLOR }],
     ['color:monochrome', { logo: Logo.PP_PAYPAL.MONOCHROME }],
-    ['color:grayscale', { logo: Logo.PP_PAYPAL.GRAYSCALE }]
+    ['color:grayscale', { logo: Logo.PP_PAYPAL.MONOCHROME }]
 ];
diff --git a/src/server/message/logos.js b/src/server/message/logos.js
@@ -1,22 +1,32 @@
-import { PayPalLogo, PPLogo, PPMonochrome, LOGO_COLOR } from '@paypal/sdk-logos/src';
-import { html } from '@krakenjs/jsx-pragmatic/src';
+import { LOGO_COLOR } from '@paypal/sdk-logos/src';
+import { createLogo } from '../../utils/svgData';
 
-function getSrc(component) {
-    return component
-        .render(html())
-        .match(/src="(data:image&#x2F;svg\+xml;base64,[a-zA-Z0-9=+]*)"/)[1]
-        .replace('&#x2F;', '/');
-}
+// Define dimensions for the logos
+const PAYPAL_WORDMARK_DIMS = [80, 32];
+const PP_MONOGRAM_DIMS = [12, 32];
 
 function getPPLogoBase64(logoColor) {
-    return getSrc(PayPalLogo({ logoColor }));
+    switch (logoColor) {
+        case LOGO_COLOR.WHITE:
+            return createLogo('PP White Wordmark.svg', PAYPAL_WORDMARK_DIMS).src;
+        case LOGO_COLOR.BLACK:
+        case LOGO_COLOR.MONOCHROME:
+            return createLogo('primary.svg', PAYPAL_WORDMARK_DIMS).src;
+        default:
+            return createLogo('primary.svg', PAYPAL_WORDMARK_DIMS).src;
+    }
 }
 
 function getPPMonogramBase64(logoColor) {
-    if (logoColor === 'monochrome') {
-        return getSrc(PPMonochrome({ logoColor }));
+    switch (logoColor) {
+        case LOGO_COLOR.WHITE:
+            return createLogo('WhiteMonogram.svg', PP_MONOGRAM_DIMS).src;
+        case LOGO_COLOR.BLACK:
+        case LOGO_COLOR.MONOCHROME:
+            return createLogo('BlackMonogram.svg', PP_MONOGRAM_DIMS).src;
+        default:
+            return createLogo('PayPal_Monogram_Full Color.svg', PP_MONOGRAM_DIMS).src;
     }
-    return getSrc(PPLogo({ logoColor }));
 }
 
 export default {

diff --git a/src/server/message/styles/common.css b/src/server/message/styles/common.css
@@ -6,7 +6,7 @@
 
 html {
     color: #2d2d2d;
-    font-family: Helvetica, Arial, sans-serif;
+    font-family: 'PayPalOpen', PayPalSans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
     font-size: 14px;
     font-weight: 400;
     overflow: hidden;

diff --git a/src/server/message/styles/flex/base.css b/src/server/message/styles/flex/base.css
@@ -14,7 +14,7 @@ button {
 }
 
 .message .em {
-    font-family: Helvetica, Arial, sans-serif;
+    font-family: 'PayPalOpen', PayPalSans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
     font-weight: 400;
 }
 
@@ -38,16 +38,16 @@ button:focus .message__content span.br {
 .message__headline,
 .message__sub-headline,
 .message__disclaimer {
-    font-family: Helvetica, Arial, sans-serif;
+    font-family: 'PayPalOpen', PayPalSans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
     font-weight: 300;
 }
 
 .message__headline {
-    font-family: Helvetica, Arial, sans-serif;
+    font-family: 'PayPalOpen', PayPalSans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
     font-weight: 400;
 }
 .message__headline .weak {
-    font-family: Helvetica, Arial, sans-serif;
+    font-family: 'PayPalOpen', PayPalSans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
     font-weight: 300;
 }