const msg = document.getElementById('msg');
function output(message) {
  msg.innerHTML = message;
  console.log(message);
}

const currency = document.getElementById('currency');
const value = document.getElementById('value');
function updateAmount(currencyUpdate, valueUpdate) {
  currency.innerHTML = currencyUpdate;
  value.innerHTML = valueUpdate;
}

const pleasewait = document.getElementById('pleasewait');
let paymentRequestEvent = null;
function init() {
  pleasewait.style.display = 'block';
  navigator.serviceWorker.getRegistration('app.js').then((registration) => {
    if (!registration) {
      output('Service worker not installed');
    } else if (!registration.paymentManager) {
      output('Payment manager not found');
    } else if (!registration.paymentManager.paymentRequestEvent) {
      output('paymentManager.paymentRequestEvent is not implemented yet');
    } else {
      registration.paymentManager.paymentRequestEvent.then((evt) => {
        if (evt) {
          output('Received the payment request event');
          paymentRequestEvent = evt;
        } else {
          output('Failed to retrieve the payment request event');
        }
        pleasewait.style.display = 'none';
      }).catch((error) => {
    output(error);
    pleasewait.style.display = 'none';
      });
    }
  }).catch((error) => {
    output(error);
    pleasewait.style.display = 'none';
  });
}
init();

const button = document.getElementById('confirm');
button.addEventListener('click', (evt) => {
  if (!paymentRequestEvent) {
    output('Payment request event not found');
    return;
  }
  button.style.display = 'none';
  pleasewait.style.display = 'block';
  paymentRequestEvent.respondWith({
    methodName: 'basic-card',
    details: {
        billingAddress: {
            addressLine: [
                '1875 Explorer St #1000',
            ],
            city: 'Reston',
            country: 'US',
            dependentLocality: '',
            languageCode: '',
            organization: 'Google',
            phone: '+15555555555',
            postalCode: '20190',
            recipient: 'Jon Doe',
            region: 'VA',
            sortingCode: ''
        },
        cardNumber: '4111111111111111',
        cardSecurityCode: '123',
        cardholderName: 'Jon Doe',
        expiryMonth: '01',
        expiryYear: '2020',
    },
  });
});

function firePaymentMethodChangeEvent(details) {
  if (!paymentRequestEvent) {
    output('Payment request event not found');
    return;
  }
  if (!paymentRequestEvent.changePaymentMethod) {
    output('No method change feature in the payment manager');
    return;
  }
  pleasewait.style.display = 'block';
  paymentRequestEvent.changePaymentMethod('basic-card', details).then((paymentHandlerUpdate) => {
    if (paymentHandlerUpdate.error) {
      output(error);
    }
    updateAmount(paymentHandlerUpdate.total.currency, paymentHandlerUpdate.total.value);
    pleasewait.style.display = 'none';
  }).catch((error) => {
    output(error);
    pleasewait.style.display = 'none';
  });
}

const billingAddress1 = document.getElementById('billing-address-1');
billingAddress1.addEventListener('click', (evt) => {
  firePaymentMethodChangeEvent({
    billingAddress: {
        city: 'Venice',
        country: 'US',
        postalCode: '20191',
        region: 'VA',
    },
    cardNumber: '****1111',
    cardNetwork: 'visa',
  });
});

const billingAddress2 = document.getElementById('billing-address-2');
billingAddress2.addEventListener('click', (evt) => {
  firePaymentMethodChangeEvent({
    billingAddress: {
        city: 'London',
        country: 'GB',
        postalCode: 'WC2H 8AG',
    },
    cardNumber: '****5454',
    cardNetwork: 'mastercard',
  });
});

@@ -1657,32 +1657,42 @@
 play = 'block';%0A
+  try %7B%0A  
   paymentRequest
@@ -1715,16 +1715,18 @@
 h(%7B%0A    
+ 
+ 
 methodNa
@@ -1743,16 +1743,18 @@
 -card',%0A
+  
     deta
@@ -1764,24 +1764,26 @@
 : %7B%0A        
+  
 billingAddre
@@ -1800,16 +1800,18 @@
         
+ 
+ 
 addressL
@@ -1817,16 +1817,18 @@
 Line: %5B%0A
+  
         
@@ -1857,24 +1857,26 @@
  St #1000',%0A
+  
             
@@ -1886,24 +1886,26 @@
             
+  
 city: 'Resto
@@ -1912,32 +1912,34 @@
 n',%0A            
+  
 country: 'US',%0A 
@@ -1929,32 +1929,34 @@
  country: 'US',%0A
+  
             depe
@@ -1986,16 +1986,18 @@
         
+  
 language
@@ -2002,24 +2002,26 @@
 geCode: '',%0A
+  
             
@@ -2056,16 +2056,18 @@
         
+ 
+ 
 phone: '
@@ -2081,16 +2081,18 @@
 55555',%0A
+  
         
@@ -2128,16 +2128,18 @@
         
+  
 recipien
@@ -2156,32 +2156,34 @@
 e',%0A            
+ 
+ 
 region: 'VA',%0A  
@@ -2176,24 +2176,26 @@
 gion: 'VA',%0A
+  
             
@@ -2210,16 +2210,18 @@
 ode: ''%0A
+  
         
@@ -2227,24 +2227,26 @@
  %7D,%0A        
+  
 cardNumber: 
@@ -2269,24 +2269,26 @@
 1',%0A        
+  
 cardSecurity
@@ -2300,16 +2300,18 @@
  '123',%0A
+  
         
@@ -2341,24 +2341,26 @@
 e',%0A        
+  
 expiryMonth:
@@ -2362,24 +2362,26 @@
 onth: '01',%0A
+  
         expi
@@ -2404,17 +2404,139 @@
     
+ 
+ 
 %7D,%0A
+  
   %7D);%0A
+  %7D catch (error) %7B%0A    output(error);%0A    button.style.display = 'block';%0A    pleasewait.style.display = 'none';%0A  %7D%0A
 %7D);%0A
@@ -2845,16 +2845,16 @@
 block';%0A
-
   paymen
@@ -2939,24 +2939,116 @@
 pdate) =%3E %7B%0A
+    pleasewait.style.display = 'none';%0A    if (!paymentHandlerUpdate) %7B%0A      return;%0A    %7D%0A
     if (paym

Handle response exception