Merge pull request #155 from develodesign/AddJStoHead

Defer beforeRegistration Hook if config value `addPaypalJsToHead` is …

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

README.md

@@ -23,13 +23,35 @@ $ git clone [email protected]:develodesign/vsf-payment-paypal.git ./vue-storefront/
 ```json
 "paypal": {
   "clientId": "",
+  "addJsToGlobalHead": true,
   "endpoint": {
     "complete": "/api/ext/paypal/complete",
     "setExpressCheckout": "/api/ext/paypal/setExpressCheckout"
   }
 }
 ```
 
+#### 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}&currency=${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`

hooks/beforeRegistration.ts

@@ -4,13 +4,14 @@ 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 : ''
     const sdkUrl = `https://www.paypal.com/sdk/js?client-id=${clientId}&currency=${currencyCode}&disable-funding=card,credit,mybank,sofort`
     var script = document.createElement('script')
     script.setAttribute('src', sdkUrl)
     document.head.appendChild(script)
+    window.paypalScriptLoaded = true
   }
 }