@paypal/checkout-components 5.0.256 → 5.0.258

package/globals.js

@@ -1,38 +1,36 @@
 /* eslint import/no-commonjs: off, flowtype/require-valid-file-annotation: off, flowtype/require-return-type: off */
 
-const postRobotGlobals = require('@krakenjs/post-robot/globals');
-const zoidGlobals = require('@krakenjs/zoid/globals');
+const postRobotGlobals = require("@krakenjs/post-robot/globals");
+const zoidGlobals = require("@krakenjs/zoid/globals");
 
 module.exports = {
+  __ZOID__: {
+    ...zoidGlobals.__ZOID__,
+    __DEFAULT_CONTAINER__: true,
+    __DEFAULT_PRERENDER__: true,
+    __FRAMEWORK_SUPPORT__: true,
+    __SCRIPT_NAMESPACE__: true,
+  },
 
-    __ZOID__: {
-        ...zoidGlobals.__ZOID__,
-        __DEFAULT_CONTAINER__: true,
-        __DEFAULT_PRERENDER__: true,
-        __FRAMEWORK_SUPPORT__: true,
-        __SCRIPT_NAMESPACE__:  true
+  __POST_ROBOT__: {
+    ...postRobotGlobals.__POST_ROBOT__,
+    __IE_POPUP_SUPPORT__: false,
+    __SCRIPT_NAMESPACE__: true,
+  },
 
+  __PAYPAL_CHECKOUT__: {
+    __REMEMBERED_FUNDING__: [],
+    __URI__: {
+      __CHECKOUT__: "/checkoutnow",
+      __BUTTONS__: "/smart/buttons",
+      __MENU__: "/smart/menu",
+      __QRCODE__: "/smart/qrcode",
+      __INSTALLMENTS__: "/smart/installments",
+      __MODAL__: "/smart/modal",
+      __CARD_FIELDS__: "/smart/card-fields",
+      __CARD_FIELD__: "/smart/card-field",
+      __WALLET__: "/smart/wallet",
+      __PAYMENT_FIELDS__: "/altpayfields",
     },
-
-    __POST_ROBOT__: {
-        ...postRobotGlobals.__POST_ROBOT__,
-        __IE_POPUP_SUPPORT__: false,
-        __SCRIPT_NAMESPACE__: true
-    },
-
-    __PAYPAL_CHECKOUT__: {
-        __REMEMBERED_FUNDING__: [],
-        __URI__:                {
-            __CHECKOUT__:       '/checkoutnow',
-            __BUTTONS__:        '/smart/buttons',
-            __MENU__:           '/smart/menu',
-            __QRCODE__:         '/smart/qrcode',
-            __INSTALLMENTS__:   '/smart/installments',
-            __MODAL__:          '/smart/modal',
-            __CARD_FIELDS__:    '/smart/card-fields',
-            __CARD_FIELD__:     '/smart/card-field',
-            __WALLET__:         '/smart/wallet',
-            __PAYMENT_FIELDS__: '/altpayfields'
-        }
-    }
+  },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.256",
+  "version": "5.0.258",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -16,6 +16,8 @@
     "eslint-find-rules": "eslint-find-rules --current .eslintrc.js --unused --plugin",
     "flow": "flow",
     "flow-typed": "rm -rf flow-typed && flow-typed install && rm flow-typed/npm/puppeteer_*",
+    "format": "prettier --write --ignore-unknown .",
+    "format:check": "prettier --check .",
     "jest-e2e": "rm -f ./test/e2e/screenshots/*.png && jest test/e2e",
     "jest-screenshot": "jest test/screenshot --env=node --no-cache",
     "jest-ssr": "jest test/ssr --env=node --no-cache --collectCoverage --collectCoverageFrom='src/' --coverageDirectory='coverage/jest'",
@@ -26,7 +28,7 @@
     "reinstall": "rimraf flow-typed && rimraf node_modules && npm install && flow-typed install",
     "release": "./scripts/publish.sh",
     "start": "npm run webpack -- --progress --watch",
-    "test": "npm run test:unit && npm run jest-ssr && npm run karma && npm run jest-screenshot",
+    "test": "npm run format:check && npm run test:unit && npm run jest-ssr && npm run karma && npm run jest-screenshot",
     "test:unit": "vitest",
     "percy-screenshot": "babel-node ./test/percy/server/createButtonConfigs.js && percy exec -- playwright test --config=./test/percy/playwright.config.js --reporter=dot --pass-with-no-tests",
     "typecheck": "npm run flow-typed && npm run flow",
@@ -109,9 +111,9 @@
     "@paypal/funding-components": "^1.0.31",
     "@paypal/sdk-client": "^4.0.166",
     "@paypal/sdk-constants": "^1.0.128",
-    "@paypal/sdk-logos": "^2.2.3"
+    "@paypal/sdk-logos": "^2.2.6"
   },
   "lint-staged": {
-    "*.sh": "prettier --write"
+    "**/{src,test,scripts}/**/*.{js,jsx,json,sh}": "prettier --write"
   }
 }

package/src/constants/button.js

@@ -1,67 +1,68 @@
 /* @flow */
 
 export const BUTTON_LABEL = {
-    PAYPAL:      ('paypal' : 'paypal'),
-    CHECKOUT:    ('checkout' : 'checkout'),
-    BUYNOW:      ('buynow' : 'buynow'),
-    PAY:         ('pay' : 'pay'),
-    INSTALLMENT: ('installment' : 'installment'),
-    SUBSCRIBE:   ('subscribe' : 'subscribe'),
-    DONATE:      ('donate' : 'donate')
+  PAYPAL: ("paypal": "paypal"),
+  CHECKOUT: ("checkout": "checkout"),
+  BUYNOW: ("buynow": "buynow"),
+  PAY: ("pay": "pay"),
+  INSTALLMENT: ("installment": "installment"),
+  SUBSCRIBE: ("subscribe": "subscribe"),
+  DONATE: ("donate": "donate"),
 };
 
 export const BUTTON_COLOR = {
-    DEFAULT:     ('default' : 'default'),
-    GOLD:        ('gold' : 'gold'),
-    BLUE:        ('blue' : 'blue'),
-    SILVER:      ('silver' : 'silver'),
-    DARKBLUE:    ('darkblue' : 'darkblue'),
-    BLACK:       ('black' : 'black'),
-    WHITE:       ('white' : 'white'),
-    TRANSPARENT: ('transparent' : 'transparent')
+  DEFAULT: ("default": "default"),
+  GOLD: ("gold": "gold"),
+  BLUE: ("blue": "blue"),
+  SILVER: ("silver": "silver"),
+  DARKBLUE: ("darkblue": "darkblue"),
+  BLACK: ("black": "black"),
+  WHITE: ("white": "white"),
+  TRANSPARENT: ("transparent": "transparent"),
 };
 
 export const TEXT_COLOR = {
-    BLACK:   ('black' : 'black'),
-    WHITE:   ('white' : 'white'),
-    DEFAULT: ('default' : 'default')
+  BLACK: ("black": "black"),
+  WHITE: ("white": "white"),
+  DEFAULT: ("default": "default"),
 };
 
 export const BUTTON_SIZE = {
-    TINY:       ('tiny' : 'tiny'),
-    SMALL:      ('small' : 'small'),
-    MEDIUM:     ('medium' : 'medium'),
-    LARGE:      ('large' : 'large'),
-    HUGE:       ('huge' : 'huge'),
-    RESPONSIVE: ('responsive' : 'responsive')
+  TINY: ("tiny": "tiny"),
+  SMALL: ("small": "small"),
+  MEDIUM: ("medium": "medium"),
+  LARGE: ("large": "large"),
+  HUGE: ("huge": "huge"),
+  RESPONSIVE: ("responsive": "responsive"),
 };
 
 export const BUTTON_SHAPE = {
-    PILL: ('pill' : 'pill'),
-    RECT: ('rect' : 'rect')
+  PILL: ("pill": "pill"),
+  RECT: ("rect": "rect"),
 };
 
 export const BUTTON_LAYOUT = {
-    HORIZONTAL: ('horizontal' : 'horizontal'),
-    VERTICAL:   ('vertical' : 'vertical')
+  HORIZONTAL: ("horizontal": "horizontal"),
+  VERTICAL: ("vertical": "vertical"),
 };
 
 export const BUTTON_NUMBER = {
-    SINGLE:   ('single' : 'single'),
-    MULTIPLE: ('multiple' : 'multiple')
+  SINGLE: ("single": "single"),
+  MULTIPLE: ("multiple": "multiple"),
 };
 
 export const BUTTON_FLOW = {
-    PURCHASE:           ('purchase' : 'purchase'),
-    BILLING_SETUP:      ('billing_setup' : 'billing_setup'),
-    SUBSCRIPTION_SETUP: ('subscription_setup' : 'subscription_setup')
+  PURCHASE: ("purchase": "purchase"),
+  BILLING_SETUP: ("billing_setup": "billing_setup"),
+  SUBSCRIPTION_SETUP: ("subscription_setup": "subscription_setup"),
+  VAULT_WITHOUT_PURCHASE: ("vault_without_purchase": "vault_without_purchase"),
 };
 
 export const MENU_PLACEMENT = {
-    ABOVE:   ('above' : 'above'),
-    BELOW: ('below' : 'below')
+  ABOVE: ("above": "above"),
+  BELOW: ("below": "below"),
 };
 
 export const EXPERIENCE = {
-    INLINE: ('inline' : 'inline')
+  INLINE: ("inline": "inline"),
 };

package/src/constants/class.js

@@ -1,44 +1,46 @@
 /* @flow */
 
 export const CLASS = {
-    CONTAINER:    ('paypal-button-container' : 'paypal-button-container'),
-    BUTTON_ROW:   ('paypal-button-row' : 'paypal-button-row'),
-    BUTTON:       ('paypal-button' : 'paypal-button'),
-    BUTTON_LABEL: ('paypal-button-label-container' : 'paypal-button-label-container'),
-    LOGO_PP:      ('paypal-logo-pp' : 'paypal-logo-pp'),
+  CONTAINER: ("paypal-button-container": "paypal-button-container"),
+  BUTTON_ROW: ("paypal-button-row": "paypal-button-row"),
+  BUTTON: ("paypal-button": "paypal-button"),
+  BUTTON_LABEL:
+    ("paypal-button-label-container": "paypal-button-label-container"),
+  LOGO_PP: ("paypal-logo-pp": "paypal-logo-pp"),
 
-    LABEL:       ('paypal-button-label' : 'paypal-button-label'),
-    COLOR:       ('paypal-button-color' : 'paypal-button-color'),
-    TEXT_COLOR:  ('paypal-button-text-color' : 'paypal-button-text-color'),
-    SHAPE:       ('paypal-button-shape' : 'paypal-button-shape'),
-    LAYOUT:      ('paypal-button-layout' : 'paypal-button-layout'),
-    NUMBER:      ('paypal-button-number' : 'paypal-button-number'),
-    ENV:         ('paypal-button-env' : 'paypal-button-env'),
-    WALLET:      ('paypal-button-wallet' : 'paypal-button-wallet'),
-    WALLET_MENU: ('paypal-button-wallet-menu' : 'paypal-button-wallet-menu'),
+  LABEL: ("paypal-button-label": "paypal-button-label"),
+  COLOR: ("paypal-button-color": "paypal-button-color"),
+  TEXT_COLOR: ("paypal-button-text-color": "paypal-button-text-color"),
+  SHAPE: ("paypal-button-shape": "paypal-button-shape"),
+  LAYOUT: ("paypal-button-layout": "paypal-button-layout"),
+  NUMBER: ("paypal-button-number": "paypal-button-number"),
+  ENV: ("paypal-button-env": "paypal-button-env"),
+  WALLET: ("paypal-button-wallet": "paypal-button-wallet"),
+  WALLET_MENU: ("paypal-button-wallet-menu": "paypal-button-wallet-menu"),
 
-    LOADING:    ('paypal-button-loading' : 'paypal-button-loading'),
-    SPINNER:    ('paypal-button-spinner' : 'paypal-button-spinner'),
+  LOADING: ("paypal-button-loading": "paypal-button-loading"),
+  SPINNER: ("paypal-button-spinner": "paypal-button-spinner"),
 
-    TAGLINE:    ('paypal-button-tagline' : 'paypal-button-tagline'),
-    POWERED_BY: ('paypal-powered-by' : 'paypal-powered-by'),
+  TAGLINE: ("paypal-button-tagline": "paypal-button-tagline"),
+  POWERED_BY: ("paypal-powered-by": "paypal-powered-by"),
 
-    TEXT:  ('paypal-button-text' : 'paypal-button-text'),
-    SPACE: ('paypal-button-space' : 'paypal-button-space'),
-    CARD:  ('paypal-button-card' : 'paypal-button-card'),
+  TEXT: ("paypal-button-text": "paypal-button-text"),
+  SPACE: ("paypal-button-space": "paypal-button-space"),
+  CARD: ("paypal-button-card": "paypal-button-card"),
 
-    PERSONALIZATION_TEXT: ('paypal-personalization-text' : 'paypal-personalization-text'),
-    
-    VAULT_LABEL:  ('paypal-vault-label' : 'paypal-vault-label'),
-    VAULT_HEADER: ('paypal-vault-header' : 'paypal-vault-header'),
+  PERSONALIZATION_TEXT:
+    ("paypal-personalization-text": "paypal-personalization-text"),
 
-    SEPARATOR: ('paypal-separator' : 'paypal-separator'),
+  VAULT_LABEL: ("paypal-vault-label": "paypal-vault-label"),
+  VAULT_HEADER: ("paypal-vault-header": "paypal-vault-header"),
 
-    DOM_READY: ('dom-ready' : 'dom-ready'),
+  SEPARATOR: ("paypal-separator": "paypal-separator"),
 
-    HIDDEN:  ('hidden' : 'hidden'),
+  DOM_READY: ("dom-ready": "dom-ready"),
 
-    IMMEDIATE: ('immediate' : 'immediate'),
+  HIDDEN: ("hidden": "hidden"),
 
-    CUSTOM: ('custom' : 'custom')
+  IMMEDIATE: ("immediate": "immediate"),
+
+  CUSTOM: ("custom": "custom"),
 };

package/src/constants/index.js

@@ -1,5 +1,5 @@
 /* @flow */
 
-export * from './button';
-export * from './misc';
-export * from './class';
+export * from "./button";
+export * from "./misc";
+export * from "./class";

package/src/constants/misc.js

@@ -1,17 +1,19 @@
 /* @flow */
 
 export const ATTRIBUTE = {
-    BUTTON:                    ('data-button' : 'data-button'),
-    FUNDING_SOURCE:            ('data-funding-source' : 'data-funding-source'),
-    PAYMENT_METHOD_ID:         ('data-payment-method-id' : 'data-payment-method-id'),
-    INSTRUMENT_ID:             ('data-instrument-id' : 'data-instrument-id'),
-    INSTRUMENT_TYPE:           ('data-instrument-type' : 'data-instrument-type'),
-    SECONDARY_INSTRUMENT_TYPE: ('data-secondary-instrument-type' : 'data-secondary-instrument-type'),
-    VERSION:                   ('data-paypal-smart-button-version' : 'data-paypal-smart-button-version'),
-    CARD:                      ('data-card' : 'data-card'),
-    MENU:                      ('data-menu' : 'data-menu'),
-    OPTIONAL:                  ('optional' : 'optional'),
-    PAY_NOW:                   ('data-pay-now' : 'data-pay-now')
+  BUTTON: ("data-button": "data-button"),
+  FUNDING_SOURCE: ("data-funding-source": "data-funding-source"),
+  PAYMENT_METHOD_ID: ("data-payment-method-id": "data-payment-method-id"),
+  INSTRUMENT_ID: ("data-instrument-id": "data-instrument-id"),
+  INSTRUMENT_TYPE: ("data-instrument-type": "data-instrument-type"),
+  SECONDARY_INSTRUMENT_TYPE:
+    ("data-secondary-instrument-type": "data-secondary-instrument-type"),
+  VERSION:
+    ("data-paypal-smart-button-version": "data-paypal-smart-button-version"),
+  CARD: ("data-card": "data-card"),
+  MENU: ("data-menu": "data-menu"),
+  OPTIONAL: ("optional": "optional"),
+  PAY_NOW: ("data-pay-now": "data-pay-now"),
 };
 
-export const DEFAULT = ('default' : 'default');
+export const DEFAULT = ("default": "default");

package/src/declarations.js

@@ -2,28 +2,28 @@
 /* eslint import/unambiguous: 0 */
 
 // $FlowFixMe[toplevel-library-import]
-import { FUNDING } from '@paypal/sdk-constants/src';
+import { FUNDING } from "@paypal/sdk-constants/src";
 
-declare var __PAYPAL_CHECKOUT__ : {|
-    __REMEMBERED_FUNDING__ : $ReadOnlyArray<$Values<typeof FUNDING>>,
-    __URI__ : {|
-        __BUTTONS__ : string,
-        __CHECKOUT__ : string,
-        __CARD_FIELDS__ : string,
-        __CARD_FIELD__ : string,
-        __MENU__ : string,
-        __INSTALLMENTS__ : string,
-        __MODAL__ : string,
-        __QRCODE__ : string,
-        __WALLET__ : string,
-        __PAYMENT_FIELDS__ : string,
-    |}
+declare var __PAYPAL_CHECKOUT__: {|
+  __REMEMBERED_FUNDING__: $ReadOnlyArray<$Values<typeof FUNDING>>,
+  __URI__: {|
+    __BUTTONS__: string,
+    __CHECKOUT__: string,
+    __CARD_FIELDS__: string,
+    __CARD_FIELD__: string,
+    __MENU__: string,
+    __INSTALLMENTS__: string,
+    __MODAL__: string,
+    __QRCODE__: string,
+    __WALLET__: string,
+    __PAYMENT_FIELDS__: string,
+  |},
 |};
 
-declare var __INLINE_CHECKOUT_ELIGIBILITY__ : {|
-    eligible : boolean,
-    ineligibilityReason : string
+declare var __INLINE_CHECKOUT_ELIGIBILITY__: {|
+  eligible: boolean,
+  ineligibilityReason: string,
 |};
 
 declare var __WEB__: boolean;
-declare var __TREE_SHAKE__: boolean;
+declare var __TREE_SHAKE__: boolean;

package/src/funding/applepay/config.jsx

@@ -1,54 +1,55 @@
 /* @flow */
 /** @jsx node */
 
-import { PLATFORM, FUNDING } from '@paypal/sdk-constants/src';
-import { ApplePayLogo, LOGO_COLOR } from '@paypal/sdk-logos/src';
-
-import { BUTTON_COLOR, BUTTON_LAYOUT } from '../../constants';
-import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
-
-import { Mark } from './template';
-
-export function getApplePayConfig() : FundingSourceConfig {
-    return {
-        ...DEFAULT_FUNDING_CONFIG,
-
-        requires: () => {
-            return {
-                applepay: true
-            };
-        },
-        eligible: ({components}) => {
-            /** If the JS SDK Script Includes Standalone ApplePay Component the Exclude the ApplePay Button From the Vertical Stack 
-             * https://paypal.atlassian.net/browse/DTALTPAY-1232
-            */
-           return !components?.includes(FUNDING.APPLEPAY);
-        },
-
-        platforms: [
-            PLATFORM.DESKTOP,
-            PLATFORM.MOBILE
-        ],
-
-        layouts: [
-            BUTTON_LAYOUT.HORIZONTAL,
-            BUTTON_LAYOUT.VERTICAL
-        ],
-
-        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(ApplePayLogo, { logoColor, optional }),
-        Mark: ({ ...props }) => Mark({ ...props }),
-
-        colors: [
-            BUTTON_COLOR.BLACK,
-            BUTTON_COLOR.WHITE
-        ],
-
-        logoColors:  {
-            [ BUTTON_COLOR.BLACK ]:  LOGO_COLOR.WHITE,
-            [ BUTTON_COLOR.WHITE ]:  LOGO_COLOR.BLACK
-        },
-
-        shippingChange: true
-    };
+import { PLATFORM, FUNDING } from "@paypal/sdk-constants/src";
+import {
+  ApplePayLogoExternalImage,
+  ApplePayLogoInlineSVG,
+  LOGO_COLOR,
+} from "@paypal/sdk-logos/src";
+
+import { BUTTON_COLOR, BUTTON_LAYOUT } from "../../constants";
+import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common";
+
+import { Mark } from "./template";
+
+export function getApplePayConfig(): FundingSourceConfig {
+  return {
+    ...DEFAULT_FUNDING_CONFIG,
+
+    requires: () => {
+      return {
+        applepay: true,
+      };
+    },
+    eligible: ({ components }) => {
+      /** If the JS SDK Script Includes Standalone ApplePay Component the Exclude the ApplePay Button From the Vertical Stack
+       * https://paypal.atlassian.net/browse/DTALTPAY-1232
+       */
+      return !components?.includes(FUNDING.APPLEPAY);
+    },
+
+    platforms: [PLATFORM.DESKTOP, PLATFORM.MOBILE],
+
+    layouts: [BUTTON_LAYOUT.HORIZONTAL, BUTTON_LAYOUT.VERTICAL],
+
+    Logo: ({ logoColor, optional }) => {
+      if (__WEB__) {
+        return ApplePayLogoExternalImage({ logoColor, optional });
+      }
+
+      return ApplePayLogoInlineSVG({ logoColor, optional });
+    },
+
+    Mark: ({ ...props }) => Mark({ ...props }),
+
+    colors: [BUTTON_COLOR.BLACK, BUTTON_COLOR.WHITE],
+
+    logoColors: {
+      [BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
+      [BUTTON_COLOR.WHITE]: LOGO_COLOR.BLACK,
+    },
+
+    shippingChange: true,
+  };
 }

package/src/funding/applepay/index.js

@@ -1,3 +1,3 @@
 /* @flow */
 
-export * from './config';
+export * from "./config";

package/src/funding/applepay/style.scoped.scss

@@ -1,3 +1,3 @@
 .paypal-mark .paypal-logo-applepay {
-    height: 30px;
+  height: 30px;
 }

package/src/funding/applepay/template.jsx

@@ -1,17 +1,22 @@
 /* @flow */
 /** @jsx node */
 
-import { node, Style, type ChildType } from '@krakenjs/jsx-pragmatic/src';
-import { ApplePayMark } from '@paypal/sdk-logos/src';
+import { node, Style, type ChildType } from "@krakenjs/jsx-pragmatic/src";
+import {
+  ApplePayMarkExternalImage,
+  ApplePayMarkInlineSVG,
+} from "@paypal/sdk-logos/src";
 
-import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
+import css from "./style.scoped.scss";
 
-import css from './style.scoped.scss';
-
-export function Mark({ ...props } : {||}) : ChildType {
-    return (
-        <Style css={ css }>
-            {enableLogoCDNExperiment(ApplePayMark,  props )}
-        </Style>
-    );
+export function Mark({ ...props }: {||}): ChildType {
+  return (
+    <Style css={css}>
+      {__WEB__ ? (
+        <ApplePayMarkExternalImage {...props} />
+      ) : (
+        <ApplePayMarkInlineSVG {...props} />
+      )}
+    </Style>
+  );
 }

package/src/funding/bancontact/config.jsx

@@ -1,41 +1,52 @@
 /* @flow */
 /** @jsx node */
 
-import { BancontactLogo } from '@paypal/sdk-logos/src';
-import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
-
-import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
-import { Text, Space } from '../../ui/text';
-import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
-
-export function getBancontactConfig() : FundingSourceConfig {
-    return {
-        ...DEFAULT_APM_FUNDING_CONFIG,
-        
-        shippingChange: false,
-    
-        layouts: [
-            BUTTON_LAYOUT.VERTICAL
-        ],
-
-        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(BancontactLogo, { logoColor, optional }),
-
-        Label: ({ logo, ...opts }) => {
-            if (__WEB__) {
-                return logo;
-            }
-
-            const apmLogo = (
-                <Fragment>
-                    { logo }<Space /><Text animate optional>Bancontact</Text>
-                </Fragment>
-            );
-
-            return (<BasicLabel
-                { ...opts }
-                logo={ apmLogo }
-            />);
-        }
-    };
+import {
+  BancontactLogoInlineSVG,
+  BancontactLogoExternalImage,
+} from "@paypal/sdk-logos/src";
+import { Fragment, node } from "@krakenjs/jsx-pragmatic/src";
+
+import { BUTTON_LAYOUT } from "../../constants";
+import {
+  DEFAULT_APM_FUNDING_CONFIG,
+  type FundingSourceConfig,
+  BasicLabel,
+} from "../common";
+import { Text, Space } from "../../ui/text";
+
+export function getBancontactConfig(): FundingSourceConfig {
+  return {
+    ...DEFAULT_APM_FUNDING_CONFIG,
+
+    shippingChange: false,
+
+    layouts: [BUTTON_LAYOUT.VERTICAL],
+
+    Logo: ({ logoColor, optional }) => {
+      if (__WEB__) {
+        return BancontactLogoExternalImage({ logoColor, optional });
+      }
+
+      return BancontactLogoInlineSVG({ logoColor, optional });
+    },
+
+    Label: ({ logo, ...opts }) => {
+      if (__WEB__) {
+        return logo;
+      }
+
+      const apmLogo = (
+        <Fragment>
+          {logo}
+          <Space />
+          <Text animate optional>
+            Bancontact
+          </Text>
+        </Fragment>
+      );
+
+      return <BasicLabel {...opts} logo={apmLogo} />;
+    },
+  };
 }