diff --git a/src/components/PaymentPage/methods/ExpressCheckoutStripe/index.tsx b/src/components/PaymentPage/methods/ExpressCheckoutStripe/index.tsx index ef717bf..f54297a 100644 --- a/src/components/PaymentPage/methods/ExpressCheckoutStripe/index.tsx +++ b/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 &&
{errorMessage}
} diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/index.tsx index 6d65711..bcddde0 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/index.tsx @@ -185,7 +185,7 @@ function PaymentModal({ )}500 N RAINBOW BLVD LAS VEGAS, NV 89107
+1123 Rimer Dr Moraga, California 94556
> ); diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/styles.module.css b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/styles.module.css index 113d87d..5bc386a 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/styles.module.css +++ b/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 { diff --git a/src/components/pages/AdditionalPurchases/components/PaymentAddress/index.tsx b/src/components/pages/AdditionalPurchases/components/PaymentAddress/index.tsx index 35a69b9..3a45bf6 100644 --- a/src/components/pages/AdditionalPurchases/components/PaymentAddress/index.tsx +++ b/src/components/pages/AdditionalPurchases/components/PaymentAddress/index.tsx @@ -2,7 +2,7 @@ import styles from "./styles.module.css" function PaymentAddress() { return ( -500 N RAINBOW BLVD LAS VEGAS, NV 89107
+1123 Rimer Dr Moraga, California 94556
) } diff --git a/src/components/pages/AdditionalPurchases/components/PaymentAddress/styles.module.css b/src/components/pages/AdditionalPurchases/components/PaymentAddress/styles.module.css index 4e8b4f9..c08a20b 100644 --- a/src/components/pages/AdditionalPurchases/components/PaymentAddress/styles.module.css +++ b/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; } diff --git a/src/components/pages/SinglePaymentPage/PaymentForm/index.tsx b/src/components/pages/SinglePaymentPage/PaymentForm/index.tsx index ecaf0d1..903e693 100644 --- a/src/components/pages/SinglePaymentPage/PaymentForm/index.tsx +++ b/src/components/pages/SinglePaymentPage/PaymentForm/index.tsx @@ -34,7 +34,7 @@ function PaymentForm({ )}500 N RAINBOW BLVD LAS VEGAS, NV 89107
+1123 Rimer Dr Moraga, California 94556
); } diff --git a/src/components/pages/SinglePaymentPage/PaymentForm/styles.module.css b/src/components/pages/SinglePaymentPage/PaymentForm/styles.module.css index ac07530..0e2cfb1 100644 --- a/src/components/pages/SinglePaymentPage/PaymentForm/styles.module.css +++ b/src/components/pages/SinglePaymentPage/PaymentForm/styles.module.css @@ -41,4 +41,5 @@ .address { color: gray; font-size: 10px; + text-transform: uppercase; } diff --git a/src/components/pages/TrialPayment/components/PaymentModal/index.tsx b/src/components/pages/TrialPayment/components/PaymentModal/index.tsx index c178efc..eb64b55 100644 --- a/src/components/pages/TrialPayment/components/PaymentModal/index.tsx +++ b/src/components/pages/TrialPayment/components/PaymentModal/index.tsx @@ -190,7 +190,7 @@ function PaymentModal({ )}500 N RAINBOW BLVD LAS VEGAS, NV 89107
+1123 Rimer Dr Moraga, California 94556
> ); diff --git a/src/components/pages/TrialPayment/components/PaymentModal/styles.module.css b/src/components/pages/TrialPayment/components/PaymentModal/styles.module.css index 113d87d..5bc386a 100644 --- a/src/components/pages/TrialPayment/components/PaymentModal/styles.module.css +++ b/src/components/pages/TrialPayment/components/PaymentModal/styles.module.css @@ -37,6 +37,7 @@ .address { margin-bottom: 24px; + text-transform: uppercase; } .payment-method { diff --git a/src/data/paymentMethods.tsx b/src/data/paymentMethods.tsx index f827a26..3f79077 100644 --- a/src/data/paymentMethods.tsx +++ b/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 );