PP-11462 fix erroneous apple pay option

In some circumstances, when a user encountered an error during the Google Pay wallet journey they were returned to the card details page and could see Apple Pay as a payment option.

This was because a client-side script modified the DOM to show/hide wallet options. By wrapping all options in a parent div and applying conditional styling higher up the document tree, we no longer accidentally toggle the visibility of Apple Pay-specific DOM elements.

.vscode/launch.json

@@ -37,6 +37,14 @@
           ],
           "console": "integratedTerminal",
           "internalConsoleOptions": "neverOpen"
+    },
+    {
+        "type": "node",
+        "request": "attach",
+        "name": "Frontend: Attach debugger",
+        "processId": "${command:PickProcess}",
+        "restart": true,
+        "protocol": "inspector"
     }
   ]
 }

app/assets/javascripts/browsered/helpers.js

@@ -37,6 +37,8 @@ const toggleSubmitButtons = () => {
 
 const showSpinnerAndHideMainContent = () => {
   document.getElementById('card-details-wrap').classList.add('hidden')
+  document.getElementById('wallet-options').classList.add('hidden')
+
   const errorSummary = document.getElementById('error-summary')
   errorSummary.classList.add('hidden')
   errorSummary.setAttribute('aria-hidden', 'true')
@@ -46,21 +48,12 @@ const showSpinnerAndHideMainContent = () => {
     paymentDetailsHeader.style.display = 'none'
   }
 
-  var applePayContainer = document.querySelector('.apple-pay-container')
-  if (typeof applePayContainer !== 'undefined' && applePayContainer !== null) {
-    applePayContainer.style.display = 'none'
-  }
-
-  var googlePayContainer = document.querySelector('.google-pay-container')
-  if (typeof googlePayContainer !== 'undefined' && googlePayContainer !== null) {
-    googlePayContainer.style.display = 'none'
-  }
-
   document.getElementById('spinner').classList.remove('hidden')
 }
 
 const hideSpinnerAndShowMainContent = () => {
   document.getElementById('card-details-wrap').classList.remove('hidden')
+  document.getElementById('wallet-options').classList.remove('hidden')
 
   if (document.getElementsByClassName('govuk-error-summary__list')[0].childElementCount > 0) {
     const errorSummary = document.getElementById('error-summary')
@@ -73,16 +66,6 @@ const hideSpinnerAndShowMainContent = () => {
     paymentDetailsHeader.style.display = 'block'
   }
 
-  var applePayContainer = document.querySelector('.apple-pay-container')
-  if (typeof applePayContainer !== 'undefined' && applePayContainer !== null) {
-    applePayContainer.style.display = 'block'
-  }
-
-  var googlePayContainer = document.querySelector('.google-pay-container')
-  if (typeof googlePayContainer !== 'undefined' && googlePayContainer !== null) {
-    googlePayContainer.style.display = 'block'
-  }
-
   document.getElementById('spinner').classList.add('hidden')
 }
 

app/views/charge.njk

@@ -88,6 +88,7 @@
                 </ul>
               </div>
             </div>
+            <div id="wallet-options">
             {% if (allowApplePay or allowGooglePay) and not savePaymentInstrumentToAgreement %}
               <div class="web-payment-button-section govuk-!-margin-bottom-7">
                 <h1 class="govuk-heading-l">{{ __p("cardDetails.enterPaymentDetails") }}</h1>
@@ -142,6 +143,7 @@
                 </form>
               </div>
             {% endif %}
+            </div>
             <div id="spinner" class="hidden"><img src="/images/spinner.gif" alt="{{ __p("authorisation.spinnerAltText") }}"/></div>
 
             <div id="card-details-wrap">

package.json

@@ -40,7 +40,7 @@
     "compile": "grunt generate-assets",
     "clean": "grunt clean",
     "start": "node start.js",
-    "start:dev": "nodemon -e js,njk -r dotenv/config start-dev.js",
+    "start:dev": "nodemon -e js,njk -r dotenv/config --inspect start-dev.js",
     "watch": "chokidar app test *.js --initial -c 'npm run test'",
     "lint": "standard --fix",
     "lint-sass": "stylelint '**/*.scss'",