diff --git a/modules/ppcp-button/resources/js/modules/Helper/Style.js b/modules/ppcp-button/resources/js/modules/Helper/Style.js new file mode 100644 index 000000000..a7672cc78 --- /dev/null +++ b/modules/ppcp-button/resources/js/modules/Helper/Style.js @@ -0,0 +1,20 @@ +export const normalizeStyleForFundingSource = (style, fundingSource) => { + const commonProps = {}; + ['shape', 'height'].forEach(prop => { + if (style[prop]) { + commonProps[prop] = style[prop]; + } + }); + + switch (fundingSource) { + case 'paypal': + return style; + case 'paylater': + return { + color: style.color, + ...commonProps + }; + default: + return commonProps; + } +} diff --git a/modules/ppcp-button/resources/js/modules/Renderer/Renderer.js b/modules/ppcp-button/resources/js/modules/Renderer/Renderer.js index c40fcc384..f01219467 100644 --- a/modules/ppcp-button/resources/js/modules/Renderer/Renderer.js +++ b/modules/ppcp-button/resources/js/modules/Renderer/Renderer.js @@ -2,6 +2,7 @@ import merge from "deepmerge"; import {loadScript} from "@paypal/paypal-js"; import {keysToCamelCase} from "../Helper/Utils"; import widgetBuilder from "./WidgetBuilder"; +import {normalizeStyleForFundingSource} from "../Helper/Style"; class Renderer { constructor(creditCardRenderer, defaultSettings, onSmartButtonClick, onSmartButtonsInit) { @@ -36,16 +37,7 @@ class Renderer { } else { // render each button separately for (const fundingSource of paypal.getFundingSources().filter(s => !(s in enabledSeparateGateways))) { - let style = settings.button.style; - if (fundingSource !== 'paypal') { - style = { - shape: style.shape, - color: style.color, - }; - if (fundingSource !== 'paylater') { - delete style.color; - } - } + const style = normalizeStyleForFundingSource(settings.button.style, fundingSource); this.renderButtons( settings.button.wrapper,