PPI-293 - Move Storefront script loading to npm

.gitignore

@@ -6,3 +6,4 @@ src/Resources/public/administration/swag-pay-pal.*.hot-update.js
 phpstan.neon
 var/
 composer.lock
+node_modules

.gitlab-ci.yml

@@ -45,6 +45,7 @@ Check built JS files:
         - php bin/console plugin:install --activate SwagPayPal
         - ./psh.phar storefront:install-dependencies
         - ./psh.phar administration:build
+        - npm --prefix custom/plugins/SwagPayPal/src/Resources/app/storefront/ clean-install
         - ./psh.phar storefront:build
         - cd $CI_PROJECT_DIR/development/custom/plugins/SwagPayPal
         - >
@@ -88,6 +89,7 @@ Static validation:
                 cd $CI_PROJECT_DIR/development
                 ./psh.phar administration:init --APP_ENV="dev"
                 cd $CI_PROJECT_DIR/development/custom/plugins/SwagPayPal
+                npm --prefix src/Resources/app/storefront/ clean-install
                 make administration-lint
                 make storefront-lint
             fi

CHANGELOG.md

@@ -1,6 +1,7 @@
 # REPLACE_GLOBALLY_WITH_NEXT_VERSION
 - PPI-5 - Implement Set PayPal as default pamyent method in First Run Wizard
 - PPI-77 - Replaced snippets in administration by `global.defaults`
+- PPI-293 - Improved PayPal script loading in Storefront
 - PPI-330 - Improve Zettle decimal precision behavior
 
 # 3.4.0

CHANGELOG_de-DE.md

@@ -1,6 +1,7 @@
 # REPLACE_GLOBALLY_WITH_NEXT_VERSION
 - PPI-5 - Setzen von PayPal als Standardzahlungsart im Ersteinrichtungs-Assistent implementiert
 - PPI-77 - Ersetzt Snippets in der Administration durch `global.defaults`
+- PPI-293 - Skript-Ladevorgang in der Storefront verbessert
 - PPI-330 - Verbessert Nachkommastellen-Verhalten der Zettle-Synchronisation
 
 # 3.4.0

src/Resources/app/storefront/build/webpack.config.js

@@ -0,0 +1,13 @@
+const { join, resolve } = require('path');
+
+module.exports = () => {
+    return {
+        resolve: {
+            alias: {
+                '@paypal': resolve(
+                    join(__dirname, '..', 'node_modules', '@paypal'),
+                ),
+            },
+        },
+    };
+};

src/Resources/app/storefront/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "swag-paypal-storefront",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Shopware Storefront PayPal",
+  "license": "MIT",
+  "dependencies": {
+    "@paypal/paypal-js": "~4.0.6"
+  }
+}

src/Resources/app/storefront/src/swag-paypal.abstract-buttons.js

@@ -2,6 +2,7 @@
 
 import Plugin from 'src/plugin-system/plugin.class';
 import DomAccess from 'src/helper/dom-access.helper';
+import { loadScript } from '@paypal/paypal-js';
 import SwagPayPalScriptLoading from './swag-paypal.script-loading';
 
 const availableAPMs = [
@@ -35,14 +36,8 @@ export default class SwagPaypalAbstractButtons extends Plugin {
         }
 
         this.constructor.scriptLoading.loadingScript = true;
-        const scriptOptions = this.getScriptUrlOptions();
-        const payPalScriptUrl = `https://www.paypal.com/sdk/js?client-id=${this.options.clientId}${scriptOptions}`;
-        const payPalScript = document.createElement('script');
-        payPalScript.type = 'text/javascript';
-        payPalScript.src = payPalScriptUrl;
-
-        payPalScript.addEventListener('load', this.callCallbacks.bind(this), false);
-        document.head.appendChild(payPalScript);
+
+        loadScript(this.getScriptOptions()).then(this.callCallbacks.bind(this));
     }
 
     callCallbacks() {
@@ -57,6 +52,30 @@ export default class SwagPaypalAbstractButtons extends Plugin {
     }
 
     /**
+     * @return {Object}
+     */
+    getScriptOptions() {
+        const config = {
+            components: 'marks,buttons,messages',
+            'client-id': this.options.clientId,
+            commit: !!this.options.commit,
+            locale: this.options.languageIso,
+            currency: this.options.currency,
+            intent: this.options.intent,
+        };
+
+        if (this.options.useAlternativePaymentMethods === false) {
+            config['disable-funding'] = availableAPMs.join(',');
+        } else if (Array.isArray(this.options.disabledAlternativePaymentMethods)) {
+            config['disable-funding'] = this.options.disabledAlternativePaymentMethods.join(',');
+        }
+
+        return config;
+    }
+
+    /**
+     * @deprecated tag:v4.0.0 - will be removed, use getScriptOptions instead
+     *
      * @return {string}
      */
     getScriptUrlOptions() {