AW-104-express-checkout-edits

src/components/PaymentPage/methods/ExpressCheckoutStripe/index.tsx

@@ -10,6 +10,7 @@ import {
   AvailablePaymentMethods,
   StripeExpressCheckoutElementReadyEvent,
 } from "@stripe/stripe-js";
+import { checkExpressCheckoutStripeFormAvailable } from "@/data/paymentMethods";
 
 interface IExpressCheckoutStripeProps {
   clientSecret: string;
@@ -22,20 +23,6 @@ interface IExpressCheckoutStripeProps {
   onChangeLoading?: (isLoading: boolean) => void;
 }
 
-const checkFormAvailable = (
-  availablePaymentMethods: undefined | AvailablePaymentMethods
-) => {
-  if (!availablePaymentMethods) return false;
-  let result = false;
-  for (const key in availablePaymentMethods) {
-    if (availablePaymentMethods[key as keyof AvailablePaymentMethods]) {
-      result = true;
-      break;
-    }
-  }
-  return result;
-};
-
 function ExpressCheckoutStripe({
   clientSecret,
   returnUrl = "https://${window.location.host}/payment/result/",
@@ -95,7 +82,9 @@ function ExpressCheckoutStripe({
     };
 
   const onReady = (event: StripeExpressCheckoutElementReadyEvent) => {
-    const _isAvailable = checkFormAvailable(event.availablePaymentMethods);
+    const _isAvailable = checkExpressCheckoutStripeFormAvailable(
+      event.availablePaymentMethods
+    );
     setIsAvailable(_isAvailable);
     onAvailable && onAvailable(_isAvailable, event.availablePaymentMethods);
     onChangeLoading && onChangeLoading(false);
@@ -107,6 +96,13 @@ function ExpressCheckoutStripe({
         onReady={onReady}
         onLoadError={() => onChangeLoading && onChangeLoading(false)}
         onConfirm={onConfirm}
+        options={{
+          layout: {
+            maxColumns: 1,
+            overflow: "never",
+          },
+          paymentMethodOrder: ["apple_pay", "google_pay", "amazon_pay", "link"],
+        }}
       />
       {errorMessage && <p className={styles.error}>{errorMessage}</p>}
     </div>

src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/index.tsx

@@ -185,7 +185,7 @@ function PaymentModal({
           )}
         </div>
         <SecurityPayments />
-        <p className={styles.address}>500 N RAINBOW BLVD LAS VEGAS, NV 89107</p>
+        <p className={styles.address}>1123 Rimer Dr Moraga, California 94556</p>
       </div>
     </>
   );

src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/styles.module.css

@@ -37,6 +37,7 @@
 
 .address {
   margin-bottom: 24px;
+  text-transform: uppercase;
 }
 
 .payment-method {

src/components/pages/AdditionalPurchases/components/PaymentAddress/index.tsx

@@ -2,7 +2,7 @@ import styles from "./styles.module.css"
 
 function PaymentAddress() {
   return (
-    <p className={styles.address}>500 N RAINBOW BLVD LAS VEGAS, NV 89107</p>
+    <p className={styles.address}>1123 Rimer Dr Moraga, California 94556</p>
   )
 }
 

src/components/pages/AdditionalPurchases/components/PaymentAddress/styles.module.css

@@ -4,4 +4,5 @@
   text-align: center;
   margin-top: 9px;
   color: rgb(130, 130, 130);
+  text-transform: uppercase;
 }

src/components/pages/SinglePaymentPage/PaymentForm/index.tsx

@@ -34,7 +34,7 @@ function PaymentForm({
         )}
       </div>
       <SecurityPayments />
-      <p className={styles.address}>500 N RAINBOW BLVD LAS VEGAS, NV 89107</p>
+      <p className={styles.address}>1123 Rimer Dr Moraga, California 94556</p>
     </div>
   );
 }

src/components/pages/SinglePaymentPage/PaymentForm/styles.module.css

@@ -41,4 +41,5 @@
 .address {
   color: gray;
   font-size: 10px;
+  text-transform: uppercase;
 }

src/components/pages/TrialPayment/components/PaymentModal/index.tsx

@@ -190,7 +190,7 @@ function PaymentModal({
           )}
         </div>
         <SecurityPayments />
-        <p className={styles.address}>500 N RAINBOW BLVD LAS VEGAS, NV 89107</p>
+        <p className={styles.address}>1123 Rimer Dr Moraga, California 94556</p>
       </div>
     </>
   );

src/components/pages/TrialPayment/components/PaymentModal/styles.module.css

@@ -37,6 +37,7 @@
 
 .address {
   margin-bottom: 24px;
+  text-transform: uppercase;
 }
 
 .payment-method {

src/data/paymentMethods.tsx

@@ -1,6 +1,7 @@
 import { TCanMakePaymentResult } from "@/components/PaymentPage/methods/StripeButton";
 import CreditCard from "@/components/ui/PaymentMethodsButtons/CreditCard";
 import PaymentButtons from "@/components/ui/PaymentMethodsButtons/PaymentButtons";
+import { AvailablePaymentMethods } from "@stripe/stripe-js";
 
 export enum EPaymentMethod {
   CREDIT_CARD = "card",
@@ -23,6 +24,20 @@ export interface IPaymentMethod {
 //   },
 // ];
 
+export const checkExpressCheckoutStripeFormAvailable = (
+  availablePaymentMethods: undefined | AvailablePaymentMethods
+) => {
+  if (!availablePaymentMethods) return false;
+  let result = false;
+  for (const key in availablePaymentMethods) {
+    if (availablePaymentMethods[key as keyof AvailablePaymentMethods]) {
+      result = true;
+      break;
+    }
+  }
+  return result;
+};
+
 export function paymentMethods(
   availableMethods: TCanMakePaymentResult
 ): IPaymentMethod[] {
@@ -37,7 +52,12 @@ export function paymentMethods(
     },
   ];
 
-  if (!availableMethods) {
+  if (
+    !availableMethods ||
+    !checkExpressCheckoutStripeFormAvailable(
+      availableMethods as AvailablePaymentMethods
+    )
+  ) {
     methods = methods.filter(
       (method) => method.id !== EPaymentMethod.PAYMENT_BUTTONS
     );