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 ea7935c..9c0826c 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": "", + "addJsToGlobalHead": 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 defer adding the JS to head globally, you can set `addJsToGlobalHead` to `false` + +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.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 + } +} + +``` + ## Registration the Paypal module Let's edit `config/modules.ts` diff --git a/hooks/beforeRegistration.ts b/hooks/beforeRegistration.ts index f382822..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')) { + 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 } }