chore: adjust UI of express payment methods in dc

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

@@ -67,10 +67,17 @@ module ProcessOut {
       const googleClientScript = document.createElement("script")
       googleClientScript.src = googlePaySdkUrl
       googleClientScript.onload = () => {
+        const googlePayMethod = this.getGooglePayMethodData(invoiceData)
+        const merchantId =
+          googlePayMethod && googlePayMethod.googlepay
+            ? googlePayMethod.googlepay.gateway_merchant_id
+            : ""
+        const isSandbox = merchantId && merchantId.indexOf("test-") === 0
+
         this.googleClient =
           window.globalThis && window.globalThis.google
             ? new window.globalThis.google.payments.api.PaymentsClient({
-                environment: DEBUG ? "TEST" : "PRODUCTION",
+                environment: DEBUG || isSandbox ? "TEST" : "PRODUCTION",
               })
             : null
 
@@ -93,7 +100,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 {

src/dynamic-checkout/views/payment-methods.ts

@@ -120,8 +120,7 @@ module ProcessOut {
       const { walletPaymentMethods, expressPaymentMethods, regularPaymentMethods } =
         this.getPaymentMethodsElements()
 
-      const { expressCheckoutWrapper, walletCheckoutWrapper } =
-        this.getExpressCheckoutElements()
+      const { expressCheckoutWrapper, walletCheckoutWrapper } = this.getExpressCheckoutElements()
 
       const { regularPaymentMethodsSectionWrapper, regularPaymentMethodsList } =
         this.getRegularPaymentMethodsElements([...expressPaymentMethods, ...walletPaymentMethods])
@@ -405,7 +404,7 @@ module ProcessOut {
         "delete",
         `customers/${customerId}/tokens/${tokenId}`,
         {},
-        (data) => {
+        data => {
           if (resolveOutcome(data) === OUTCOME.Failed) {
             DynamicCheckoutEventsUtils.dispatchDeletePaymentMethodErrorEvent(
               this.paymentConfig.invoiceId,
@@ -473,8 +472,9 @@ module ProcessOut {
       this.createPaymentMethodsManager(expressCheckoutHeader)
 
       const nextFocusTarget =
-        (paymentManagerMethodsList.querySelector(".dco-delete-payment-method-button") as HTMLElement) ||
-        (document.querySelector(".close-modal-btn") as HTMLElement)
+        (paymentManagerMethodsList.querySelector(
+          ".dco-delete-payment-method-button",
+        ) as HTMLElement) || (document.querySelector(".close-modal-btn") as HTMLElement)
 
       if (nextFocusTarget) {
         nextFocusTarget.focus()