init hosted fields functionality

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

@@ -1,11 +1,13 @@
-import MiniCartBootstap from './modules/MiniCartBootstap';
-import SingleProductBootstap from './modules/SingleProductBootstap';
-import CartBootstrap from './modules/CartBootstap';
-import CheckoutBootstap from './modules/CheckoutBootstap';
-import Renderer from './modules/Renderer';
+import MiniCartBootstap from './modules/ContextBootstrap/MiniCartBootstap';
+import SingleProductBootstap from './modules/ContextBootstrap/SingleProductBootstap';
+import CartBootstrap from './modules/ContextBootstrap/CartBootstap';
+import CheckoutBootstap from './modules/ContextBootstrap/CheckoutBootstap';
+import Renderer from './modules/Renderer/Renderer';
+import CreditCardRenderer from "./modules/Renderer/CreditCardRenderer";
 
 const bootstrap = () => {
-    const renderer = new Renderer(PayPalCommerceGateway);
+    const creditCardRenderer = new CreditCardRenderer(PayPalCommerceGateway);
+    const renderer = new Renderer(creditCardRenderer, PayPalCommerceGateway);
     const context = PayPalCommerceGateway.context;
 
     if (context === 'mini-cart' || context === 'product') {
@@ -55,6 +57,11 @@ document.addEventListener(
         const script = document.createElement('script');
 
         script.setAttribute('src', PayPalCommerceGateway.button.url);
+        Object.entries(PayPalCommerceGateway.script_attributes).forEach(
+            (keyValue) => {
+                script.setAttribute(keyValue[0], keyValue[1]);
+            }
+        );
         script.addEventListener('load', (event) => {
             bootstrap();
         });

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

@@ -1,5 +1,5 @@
-import onApprove from './onApproveForContinue.js';
-import {payerData} from "./Payer";
+import onApprove from '../OnApproveHandler/onApproveForContinue.js';
+import {payerData} from "../Helper/PayerData";
 
 class CartActionHandler {
 

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

@@ -1,5 +1,5 @@
-import onApprove from './onApproveForPayNow.js';
-import {payerData} from "./Payer";
+import onApprove from '../OnApproveHandler/onApproveForPayNow.js';
+import {payerData} from "../Helper/PayerData";
 
 class CheckoutActionHandler {
 

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

@@ -1,7 +1,7 @@
-import ButtonsToggleListener from './ButtonsToggleListener';
-import Product from './Product';
-import onApprove from './onApproveForContinue';
-import {payerData} from "./Payer";
+import ButtonsToggleListener from '../Helper/ButtonsToggleListener';
+import Product from '../Entity/Product';
+import onApprove from '../OnApproveHandler/onApproveForContinue';
+import {payerData} from "../Helper/PayerData";
 
 class SingleProductActionHandler {
 

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

@@ -1,5 +1,5 @@
-import CartActionHandler from './CartActionHandler';
-import ErrorHandler from './ErrorHandler';
+import CartActionHandler from '../ActionHandler/CartActionHandler';
+import ErrorHandler from '../ErrorHandler';
 
 class CartBootstrap {
     constructor(gateway, renderer) {
@@ -31,6 +31,7 @@ class CartBootstrap {
 
         this.renderer.render(
             this.gateway.button.wrapper,
+            this.gateway.hosted_fields.wrapper,
             actionHandler.configuration(),
         );
     }

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

@@ -1,5 +1,5 @@
-import ErrorHandler from './ErrorHandler';
-import CheckoutActionHandler from './CheckoutActionHandler';
+import ErrorHandler from '../ErrorHandler';
+import CheckoutActionHandler from '../ActionHandler/CheckoutActionHandler';
 
 class CheckoutBootstap {
     constructor(gateway, renderer) {
@@ -22,6 +22,7 @@ class CheckoutBootstap {
             on('updated_checkout payment_method_selected', () => {
                 this.switchBetweenPayPalandOrderButton();
             });
+        this.switchBetweenPayPalandOrderButton();
     }
 
     shouldRender() {
@@ -40,6 +41,7 @@ class CheckoutBootstap {
 
         this.renderer.render(
             this.gateway.button.wrapper,
+            this.gateway.hosted_fields.wrapper,
             actionHandler.configuration(),
         );
     }
@@ -50,10 +52,12 @@ class CheckoutBootstap {
 
         if (currentPaymentMethod !== 'ppcp-gateway') {
             this.renderer.hideButtons(this.gateway.button.wrapper);
+            this.renderer.hideButtons(this.gateway.hosted_fields.wrapper);
             jQuery('#place_order').show();
         }
         else {
             this.renderer.showButtons(this.gateway.button.wrapper);
+            this.renderer.showButtons(this.gateway.hosted_fields.wrapper);
             jQuery('#place_order').hide();
         }
     }

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

@@ -1,5 +1,5 @@
-import ErrorHandler from './ErrorHandler';
-import CartActionHandler from './CartActionHandler';
+import ErrorHandler from '../ErrorHandler';
+import CartActionHandler from '../ActionHandler/CartActionHandler';
 
 class MiniCartBootstap {
     constructor(gateway, renderer) {
@@ -32,6 +32,7 @@ class MiniCartBootstap {
 
         this.renderer.render(
             this.gateway.button.mini_cart_wrapper,
+            null,
             actionHandler.configuration()
         );
     }

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

@@ -1,6 +1,6 @@
-import ErrorHandler from './ErrorHandler';
-import UpdateCart from './UpdateCart';
-import SingleProductActionHandler from './SingleProductActionHandler';
+import ErrorHandler from '../ErrorHandler';
+import UpdateCart from "../Helper/UpdateCart";
+import SingleProductActionHandler from "../ActionHandler/SingleProductActionHandler";
 
 class SingleProductBootstap {
     constructor(gateway, renderer) {
@@ -43,6 +43,7 @@ class SingleProductBootstap {
 
         this.renderer.render(
             this.gateway.button.wrapper,
+            this.gateway.hosted_fields.wrapper,
             actionHandler.configuration(),
         );
     }

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

@@ -1,4 +1,4 @@
-import Product from "./Product";
+import Product from "../Entity/Product";
 class UpdateCart {
 
     constructor(endpoint, nonce)

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

@@ -0,0 +1,49 @@
+class CreditCardRenderer {
+
+    constructor(defaultConfig) {
+        this.defaultConfig = defaultConfig;
+    }
+
+    render(wrapper, contextConfig) {
+
+        if (
+            wrapper === null
+            || typeof paypal.HostedFields === 'undefined'
+            || ! paypal.HostedFields.isEligible()
+            || document.querySelector(wrapper) === null
+        ) {
+            return;
+        }
+
+        //ToDo: Styles
+        paypal.HostedFields.render({
+            createOrder: contextConfig.createOrder,
+            fields: {
+                number: {
+                    selector: '#ppcp-credit-card',
+                    placeholder: this.defaultConfig.hosted_fields.labels.credit_card_number,
+                },
+                cvv: {
+                    selector: '#ppcp-cvv',
+                    placeholder: this.defaultConfig.hosted_fields.labels.cvv,
+                },
+                expirationDate: {
+                    selector: '#ppcp-expiration-date',
+                    placeholder: this.defaultConfig.hosted_fields.labels.mm_yyyy,
+                }
+            }
+        }).then(hostedFields => {
+            document.querySelector(wrapper).addEventListener(
+                'submit',
+                event => {
+                    event.preventDefault();
+                    hostedFields.submit().then(payload => {
+                        payload.orderID = payload.orderId;
+                        return contextConfig.onApprove(payload);
+                    });
+                }
+            );
+        });
+    }
+}
+export default CreditCardRenderer;

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

@@ -1,9 +1,10 @@
 class Renderer {
-    constructor(defaultConfig) {
+    constructor(creditCardRenderer, defaultConfig) {
         this.defaultConfig = defaultConfig;
+        this.creditCardRenderer = creditCardRenderer;
     }
 
-    render(wrapper, contextConfig) {
+    render(wrapper, hostedFieldsWrapper, contextConfig) {
         if (this.isAlreadyRendered(wrapper)) {
             return;
         }
@@ -13,7 +14,9 @@ class Renderer {
             style,
             ...contextConfig,
         }).render(wrapper);
-    }
+
+        this.creditCardRenderer.render(hostedFieldsWrapper, contextConfig);
+}
 
     isAlreadyRendered(wrapper) {
         return document.querySelector(wrapper).hasChildNodes();