From 5a2247cad4d984c5b43284da5db8d8941f65964f Mon Sep 17 00:00:00 2001 From: Jamie Date: Fri, 13 Nov 2020 11:45:23 +0000 Subject: [PATCH 1/4] Defer beforeRegistration Hook if config value `addPaypalJsToHead` is false + Documentation to add JS to head --- CHANGELOG.md | 4 ++++ README.md | 22 ++++++++++++++++++++++ hooks/beforeRegistration.ts | 9 ++++----- 3 files changed, 30 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 700afae..a438029 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.1.6] - 13.11.2020 + +- Defer beforeRegistration Hook if config value `addPaypalJsToHead` is false + Documentation to add JS to head + ## [1.1.5] - 06.11.2020 - Pass telephone number parameter to PayPal diff --git a/README.md b/README.md index 7a50cb2..f8cbc12 100755 --- a/README.md +++ b/README.md @@ -23,6 +23,7 @@ $ git clone git@github.com:develodesign/vsf-payment-paypal.git ./vue-storefront/ ```json "paypal": { "clientId": "", + "addPaypalJsToHead": true, "endpoint": { "complete": "/api/ext/paypal/complete", "setExpressCheckout": "/api/ext/paypal/setExpressCheckout" @@ -30,6 +31,27 @@ $ git clone git@github.com:develodesign/vsf-payment-paypal.git ./vue-storefront/ } ``` +#### Add JS to Head +If you want to add the JS to head you can use `addPaypalJsToHead`. + +When set as `true` - This will defer the beforeRegistration hook and then you can add the below into the mounted lifecycle on your checkout component where you will import the Paypal button. + +```js +mounted () { + if (!isServer && window.paypalScriptLoaded === undefined) { + const storeView = currentStoreView() + const { currencyCode } = storeView.i18n + const clientId = config.paypal.clientId + const sdkUrl = `https://www.paypal.com/sdk/js?client-id=${clientId}¤cy=${currencyCode}&disable-funding=card,credit` + var script = document.createElement('script') + script.setAttribute('src', sdkUrl) + document.head.appendChild(script) + window.paypalScriptLoaded = true + } +} + +``` + ## Registration the Paypal module Let's edit `config/modules.ts` diff --git a/hooks/beforeRegistration.ts b/hooks/beforeRegistration.ts index f382822..8d6c25b 100755 --- a/hooks/beforeRegistration.ts +++ b/hooks/beforeRegistration.ts @@ -1,14 +1,13 @@ -import { isServer } from '@vue-storefront/core/helpers' import { currentStoreView } from '@vue-storefront/core/lib/multistore' -export function beforeRegistration(config, store) { +export function beforeRegistration({ Vue, config, store, isServer }) { const VSF_PAYPAL_CODE = 'paypal_express' - if (!isServer && config.hasOwnProperty('paypal')) { + if (!isServer && !config.paypal.addPaypalJsToHead) { const storeView = currentStoreView() const { currencyCode } = storeView.i18n - const clientId = config.paypal.hasOwnProperty('clientId') ? config.paypal.clientId : '' - const sdkUrl = `https://www.paypal.com/sdk/js?client-id=${clientId}¤cy=${currencyCode}&disable-funding=card,credit,mybank,sofort` + const clientId = config.paypal.clientId + const sdkUrl = `https://www.paypal.com/sdk/js?client-id=${clientId}¤cy=${currencyCode}&disable-funding=card,credit` var script = document.createElement('script') script.setAttribute('src', sdkUrl) document.head.appendChild(script) From 73e547ce7f0edfab16e85ec0a47af5d35db0c9e3 Mon Sep 17 00:00:00 2001 From: Jamie Date: Fri, 13 Nov 2020 11:54:56 +0000 Subject: [PATCH 2/4] Updated config value to false --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f8cbc12..865b357 100755 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ $ git clone git@github.com:develodesign/vsf-payment-paypal.git ./vue-storefront/ ```json "paypal": { "clientId": "", - "addPaypalJsToHead": true, + "addPaypalJsToHead": false, "endpoint": { "complete": "/api/ext/paypal/complete", "setExpressCheckout": "/api/ext/paypal/setExpressCheckout" From bbc8f020002969ae5e8476b6061802b7c355f8b1 Mon Sep 17 00:00:00 2001 From: Jamie Date: Fri, 13 Nov 2020 12:05:03 +0000 Subject: [PATCH 3/4] Including latest ver. with changes --- hooks/beforeRegistration.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/hooks/beforeRegistration.ts b/hooks/beforeRegistration.ts index 8d6c25b..055f9ce 100755 --- a/hooks/beforeRegistration.ts +++ b/hooks/beforeRegistration.ts @@ -1,13 +1,14 @@ +import { isServer } from '@vue-storefront/core/helpers' import { currentStoreView } from '@vue-storefront/core/lib/multistore' -export function beforeRegistration({ Vue, config, store, isServer }) { +export function beforeRegistration(config, store) { const VSF_PAYPAL_CODE = 'paypal_express' - if (!isServer && !config.paypal.addPaypalJsToHead) { + if (!isServer && config.hasOwnProperty('paypal') && !config.paypal.addPaypalJsToHead) { const storeView = currentStoreView() const { currencyCode } = storeView.i18n - const clientId = config.paypal.clientId - const sdkUrl = `https://www.paypal.com/sdk/js?client-id=${clientId}¤cy=${currencyCode}&disable-funding=card,credit` + const clientId = config.paypal.hasOwnProperty('clientId') ? config.paypal.clientId : '' + const sdkUrl = `https://www.paypal.com/sdk/js?client-id=${clientId}¤cy=${currencyCode}&disable-funding=card,credit,mybank,sofort` var script = document.createElement('script') script.setAttribute('src', sdkUrl) document.head.appendChild(script) From a44611e19e9b6df04c4bdad14e4007860283e512 Mon Sep 17 00:00:00 2001 From: Jamie Date: Fri, 13 Nov 2020 15:27:46 +0000 Subject: [PATCH 4/4] Reversed context and logic - beforeRegistration will check if the new config value is true to run (default) Otherwise user will need to add In relevant code (Also updated as per #155 fix) --- README.md | 22 +++++++++++----------- hooks/beforeRegistration.ts | 3 ++- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 865b357..083c8eb 100755 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ $ git clone git@github.com:develodesign/vsf-payment-paypal.git ./vue-storefront/ ```json "paypal": { "clientId": "", - "addPaypalJsToHead": false, + "addJsToGlobalHead": true, "endpoint": { "complete": "/api/ext/paypal/complete", "setExpressCheckout": "/api/ext/paypal/setExpressCheckout" @@ -32,21 +32,21 @@ $ git clone git@github.com:develodesign/vsf-payment-paypal.git ./vue-storefront/ ``` #### Add JS to Head -If you want to add the JS to head you can use `addPaypalJsToHead`. +If you want to defer adding the JS to head globally, you can set `addJsToGlobalHead` to `false` -When set as `true` - This will defer the beforeRegistration hook and then you can add the below into the mounted lifecycle on your checkout component where you will import the Paypal button. +This will defer the beforeRegistration hook and then you can add the below into the mounted lifecycle on your checkout component where you will import the Paypal button. ```js mounted () { if (!isServer && window.paypalScriptLoaded === undefined) { - const storeView = currentStoreView() - const { currencyCode } = storeView.i18n - const clientId = config.paypal.clientId - const sdkUrl = `https://www.paypal.com/sdk/js?client-id=${clientId}¤cy=${currencyCode}&disable-funding=card,credit` - var script = document.createElement('script') - script.setAttribute('src', sdkUrl) - document.head.appendChild(script) - window.paypalScriptLoaded = true + const storeView = currentStoreView() + const { currencyCode } = storeView.i18n + const clientId = config.paypal.hasOwnProperty('clientId') ? config.paypal.clientId : '' + const sdkUrl = `https://www.paypal.com/sdk/js?client-id=${clientId}¤cy=${currencyCode}&disable-funding=card,credit,mybank,sofort` + var script = document.createElement('script') + script.setAttribute('src', sdkUrl) + document.head.appendChild(script) + window.paypalScriptLoaded = true } } diff --git a/hooks/beforeRegistration.ts b/hooks/beforeRegistration.ts index 055f9ce..5954897 100755 --- a/hooks/beforeRegistration.ts +++ b/hooks/beforeRegistration.ts @@ -4,7 +4,7 @@ import { currentStoreView } from '@vue-storefront/core/lib/multistore' export function beforeRegistration(config, store) { const VSF_PAYPAL_CODE = 'paypal_express' - if (!isServer && config.hasOwnProperty('paypal') && !config.paypal.addPaypalJsToHead) { + if (!isServer && config.hasOwnProperty('paypal') && config.paypal.addJsToGlobalHead && window.paypalScriptLoaded === undefined) { const storeView = currentStoreView() const { currencyCode } = storeView.i18n const clientId = config.paypal.hasOwnProperty('clientId') ? config.paypal.clientId : '' @@ -12,5 +12,6 @@ export function beforeRegistration(config, store) { var script = document.createElement('script') script.setAttribute('src', sdkUrl) document.head.appendChild(script) + window.paypalScriptLoaded = true } }