chore: adjust ui of express payment methods in dc

Author: jakubjasinsky

package.json

@@ -1,6 +1,6 @@
 {
   "name": "processout.js",
-  "version": "1.8.4",
+  "version": "1.8.5",
   "description": "ProcessOut.js is a JavaScript library for ProcessOut's payment processing API.",
   "scripts": {
     "build:processout": "tsc -p src/processout && uglifyjs --compress --keep-fnames --ie8 dist/processout.js -o dist/processout.js",

src/dynamic-checkout/clients/apple-pay.ts

@@ -18,7 +18,7 @@ module ProcessOut {
       const applePayScript = document.createElement("script")
       applePayScript.src = applePaySdkUrl
       applePayScript.onload = () => {
-        buttonContainer.innerHTML = `<apple-pay-button buttonstyle="black" type="plain" locale="en-US"></apple-pay-button>`
+        buttonContainer.innerHTML = `<apple-pay-button buttonstyle="white-outline" type="plain" locale="en-US"></apple-pay-button>`
         this.initializeApplePay(invoiceData, buttonContainer, getViewContainer)
       }
 
@@ -83,20 +83,19 @@ module ProcessOut {
             this.paymentConfig.invoiceId,
             this.paymentConfig.invoiceDetails.return_url || null,
           ),
-        (err) =>
+        err =>
           DynamicCheckoutEventsUtils.dispatchApplePaySessionError(
             this.paymentConfig.invoiceId,
             err,
             this.paymentConfig.invoiceDetails.return_url || null,
           ),
       )
 
-      session.onpaymentauthorizedPostprocess =
-        () =>
-          DynamicCheckoutEventsUtils.dispatchApplePayAuthorizedPostProcessEvent(
-            this.paymentConfig.invoiceId,
-            this.paymentConfig.invoiceDetails.return_url || null,
-          )
+      session.onpaymentauthorizedPostprocess = () =>
+        DynamicCheckoutEventsUtils.dispatchApplePayAuthorizedPostProcessEvent(
+          this.paymentConfig.invoiceId,
+          this.paymentConfig.invoiceDetails.return_url || null,
+        )
 
       return session
     }
@@ -197,7 +196,8 @@ module ProcessOut {
         invoiceId => {
           if (this.paymentConfig.showStatusMessage) {
             getViewContainer().appendChild(
-              new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig).element,
+              new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig)
+                .element,
             )
           }
 

src/dynamic-checkout/clients/google-pay.ts

@@ -93,7 +93,7 @@ module ProcessOut {
         .then(response => {
           if (response.result) {
             const button = this.googleClient.createButton({
-              buttonColor: "default",
+              buttonColor: "white",
               buttonType: "plain",
               buttonRadius: 4,
               buttonSizeMode: "fill",

src/dynamic-checkout/styles/default.ts

@@ -110,7 +110,7 @@ const defaultStyles = `
 
   apple-pay-button {
     --apple-pay-button-width: 100%;
-    --apple-pay-button-height: 40px;
+    --apple-pay-button-height: 48px;
     --apple-pay-button-border-radius: 4px;
     --apple-pay-button-padding: 5px;
     --apple-pay-button-box-sizing: border-box;
@@ -153,14 +153,14 @@ const defaultStyles = `
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 20px;
+    gap: 10px;
   }
 
   .dco-saved-payment-methods-wrapper {
     width: 100%;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 10px;
   }
 
   .dco-saved-payment-method-button {
@@ -169,19 +169,15 @@ const defaultStyles = `
     justify-content: center;
     gap: 10px;
     width: 100%;
-    padding: 12px 16px;
-    border: 1px solid #dde0e3;
+    height: 48px;
+    padding: 0 16px;
+    border: 1px solid #000;
     border-radius: 4px;
-    background-color: #fff;
+    background-color: transparent;
     cursor: pointer;
     font-weight: 500;
     font-size: 0.9rem;
     font-family: inherit;
-    transition: background-color 0.2s;
-  }
-
-  .dco-saved-payment-method-button:hover {
-    background-color: #F6F6F7;
   }
 
   .dco-saved-payment-method-button:disabled {
@@ -210,12 +206,28 @@ const defaultStyles = `
 
   .dco-wallet-checkout-wrapper {
     display: flex;
+    flex-direction: column;
     width: 100%;
     gap: 10px;
   }
 
   .dco-wallet-checkout-button {
-   flex: 1;
+   width: 100%;
+  }
+
+  #google-pay-button-container {
+    height: 48px;
+  }
+
+  #google-pay-button-container button {
+    border: 1px solid #000 !important;
+    border-radius: 4px !important;
+    outline: none !important;
+    background-color: #fff !important;
+  }
+
+  #google-pay-button-container button:hover {
+    background-color: #fff !important;
   }
 
   .dco-regular-express-checkout-wrapper {
@@ -238,7 +250,7 @@ const defaultStyles = `
     display: flex;
     flex-direction: column;
     border: 1px solid #dde0e3;
-    border-radius: 4px;
+    border-radius: 12px;
     overflow: hidden;
   }
 
@@ -472,8 +484,8 @@ const defaultStyles = `
   .dco-payment-method-button-pay-button-spinner {
     width: 18px;
     height: 18px;
-    border: 3px solid #f2f2f2;
-    border-bottom-color: #bfbfbf;
+    border: 3px solid #ccc;
+    border-bottom-color: #333;
     border-radius: 50%;
     display: inline-block;
     box-sizing: border-box;
@@ -592,6 +604,7 @@ const defaultStyles = `
     width: 100%;
     align-items: center;
     justify-content: space-between;
+    margin-bottom: 10px;
   }
 
   .modal-box {