render messages via javascript

modules.local/ppcp-button/resources/js/button.js

@@ -6,11 +6,13 @@ import Renderer from './modules/Renderer/Renderer';
 import ErrorHandler from './modules/ErrorHandler';
 import CreditCardRenderer from "./modules/Renderer/CreditCardRenderer";
 import dataClientIdAttributeHandler from "./modules/DataClientIdAttributeHandler";
+import MessageRenderer from "./modules/Renderer/MessageRenderer";
 
 const bootstrap = () => {
     const errorHandler = new ErrorHandler(PayPalCommerceGateway.labels.error.generic);
     const creditCardRenderer = new CreditCardRenderer(PayPalCommerceGateway, errorHandler);
     const renderer = new Renderer(creditCardRenderer, PayPalCommerceGateway);
+    const messageRenderer = new MessageRenderer(PayPalCommerceGateway.messages);
     const context = PayPalCommerceGateway.context;
     if (context === 'mini-cart' || context === 'product') {
         const miniCartBootstrap = new MiniCartBootstap(
@@ -42,11 +44,14 @@ const bootstrap = () => {
     if (context === 'checkout') {
         const checkoutBootstap = new CheckoutBootstap(
             PayPalCommerceGateway,
-            renderer
+            renderer,
+            messageRenderer
         );
 
         checkoutBootstap.init();
     }
+
+    messageRenderer.render();
 };
 document.addEventListener(
     'DOMContentLoaded',

modules.local/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js

@@ -2,9 +2,10 @@ import ErrorHandler from '../ErrorHandler';
 import CheckoutActionHandler from '../ActionHandler/CheckoutActionHandler';
 
 class CheckoutBootstap {
-    constructor(gateway, renderer) {
+    constructor(gateway, renderer, messages) {
         this.gateway = gateway;
         this.renderer = renderer;
+        this.messages = messages
     }
 
     init() {
@@ -44,6 +45,7 @@ class CheckoutBootstap {
             this.gateway.hosted_fields.wrapper,
             actionHandler.configuration(),
         );
+        this.messages.render();
     }
 
     switchBetweenPayPalandOrderButton() {
@@ -52,6 +54,7 @@ class CheckoutBootstap {
 
         if (currentPaymentMethod !== 'ppcp-gateway' && currentPaymentMethod !== 'ppcp-credit-card-gateway') {
             this.renderer.hideButtons(this.gateway.button.wrapper);
+            this.renderer.hideButtons(this.gateway.messages.wrapper);
             this.renderer.hideButtons(this.gateway.hosted_fields.wrapper);
             jQuery('#place_order').show();
         }
@@ -59,10 +62,12 @@ class CheckoutBootstap {
             jQuery('#place_order').hide();
             if (currentPaymentMethod === 'ppcp-gateway') {
                 this.renderer.showButtons(this.gateway.button.wrapper);
+                this.renderer.showButtons(this.gateway.messages.wrapper);
                 this.renderer.hideButtons(this.gateway.hosted_fields.wrapper);
             }
             if (currentPaymentMethod === 'ppcp-credit-card-gateway') {
                 this.renderer.hideButtons(this.gateway.button.wrapper);
+                this.renderer.hideButtons(this.gateway.messages.wrapper);
                 this.renderer.showButtons(this.gateway.hosted_fields.wrapper);
             }
         }

modules.local/ppcp-button/resources/js/modules/Renderer/MessageRenderer.js

@@ -0,0 +1,22 @@
+class MessageRenderer {
+
+    constructor(config) {
+        this.config = config;
+    }
+
+    render() {
+        if (typeof paypal.Messages === 'undefined' || typeof this.config.wrapper === 'undefined' ) {
+            return;
+        }
+        if (! document.querySelector(this.config.wrapper)) {
+            return;
+        }
+
+        paypal.Messages({
+            amount: this.config.amount,
+            placement: this.config.placement,
+            style: this.config.style
+        }).render(this.config.wrapper);
+    }
+}
+export default MessageRenderer;

modules.local/ppcp-button/resources/js/modules/Renderer/Renderer.js

@@ -16,10 +16,11 @@ class Renderer {
         }
 
         const style = wrapper === this.defaultConfig.button.wrapper ? this.defaultConfig.button.style : this.defaultConfig.button.mini_cart_style;
-        paypal.Buttons({
+        const result = paypal.Buttons({
             style,
             ...contextConfig,
         }).render(wrapper);
+        console.log(result);
     }
 
     isAlreadyRendered(wrapper) {

modules.local/ppcp-button/src/Assets/SmartButton.php

@@ -186,21 +186,17 @@ class SmartButton implements SmartButtonInterface
             return;
         }
 
-        echo '<div id="ppc-button"></div>';
-        $this->renderMessage();
+        echo '<div id="ppc-button"></div><div id="ppcp-messages"></div>';
     }
 
-    //phpcs:disable Inpsyde.CodeQuality.FunctionLength.TooLong
-    private function renderMessage()
-    {
-        $markup = '<div
-                    data-pp-message
-                    data-pp-placement="%s"
-                    data-pp-amount="%s"
-                    data-pp-style-layout="%s"
-                   
-                ></div>';
+    private function messageValues() : array {
 
+        if (
+            $this->settings->has('disable_funding')
+            && in_array('credit', (array) $this->settings->get('disable_funding'), true)
+        ) {
+            return [];
+        }
         $placement = 'product';
         $product = wc_get_product();
         $amount = (is_a($product, \WC_Product::class)) ? wc_get_price_including_tax($product) : 0;
@@ -256,28 +252,28 @@ class SmartButton implements SmartButtonInterface
         }
 
         if (! $shouldShow) {
-            return;
-        }
-        $attributes = [
-            'data-pp-message' => '',
-            'data-pp-placement' => $placement,
-            'data-pp-amount' => $amount,
-            'data-pp-style-layout' => $layout,
-        ];
-        if ($layout === 'text') {
-            $attributes['data-pp-style-logo-type'] = $logoType;
-            $attributes['data-pp-style-logo-position'] = $logoPosition;
-            $attributes['data-pp-style-text-color'] = $textColor;
-        } elseif ($layout === 'flex') {
-            $attributes['data-pp-style-color'] = $styleColor;
-            $attributes['data-pp-style-ratio'] = $ratio;
+            return [];
         }
 
-        echo '<div ';
-        foreach ($attributes as $attribute => $value) {
-            echo esc_attr($attribute) . '="' . esc_attr($value) . '" ';
-        }
-        echo '></div>';
+        $values = [
+            'wrapper' => '#ppcp-messages',
+            'amount' => $amount,
+            'placement' => $placement,
+            'style' => [
+                'layout' => $layout,
+                'logo' => [
+                    'type' => $logoType,
+                    'position' => $logoPosition,
+                ],
+                'text' => [
+                    'color' => $textColor,
+                ],
+                'color' => $styleColor,
+                'ratio' => $ratio,
+            ],
+        ];
+
+        return $values;
     }
 
     public function dccRenderer()
@@ -417,6 +413,7 @@ class SmartButton implements SmartButtonInterface
                     ),
                 ],
             ],
+            'messages' => $this->messageValues(),
             'labels' => [
                 'error' => [
                     'generic' => __(
@@ -477,7 +474,7 @@ class SmartButton implements SmartButtonInterface
         if (! is_checkout()) {
             $disableFunding[] = 'card';
         }
-        $params['disable-funding'] = implode(',', $disableFunding);
+        $params['disable-funding'] = implode(',', array_unique($disableFunding));
         $smartButtonUrl = add_query_arg($params, 'https://www.paypal.com/sdk/js');
         return $smartButtonUrl;
     }