Develop

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

@@ -17,6 +17,7 @@ interface ICheckoutFormProps {
   subscriptionReceiptId?: string;
   returnUrl?: string;
   confirmType?: "payment" | "setup";
+  isHide?: boolean;
 }
 
 export default function CheckoutForm({
@@ -24,6 +25,7 @@ export default function CheckoutForm({
   subscriptionReceiptId,
   returnUrl,
   confirmType = "payment",
+  isHide = false,
 }: ICheckoutFormProps) {
   const stripe = useStripe();
   const elements = useElements();
@@ -70,13 +72,19 @@ export default function CheckoutForm({
 
   return (
     <form
-      className="payment-form-stripe"
+      className={`payment-form-stripe  ${isHide ? styles.hide : ""}`}
       id="payment-form"
       onSubmit={handleSubmit}
     >
       {children ? children : null}
       <PaymentElement
-        options={{ terms: { card: "never" } }}
+        options={{
+          terms: { card: "never" },
+          wallets: {
+            googlePay: "never",
+            applePay: "never",
+          },
+        }}
         onReady={() => setFormReady(true)}
       />
       <MainButton

src/components/PaymentPage/methods/CheckoutForm/styles.module.css

@@ -9,6 +9,11 @@
   gap: 16px;
 }
 
+.hide {
+  height: 0;
+  visibility: hidden;
+}
+
 .payment-loader {
   display: flex;
   justify-content: center;

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

@@ -94,7 +94,10 @@ function ExpressCheckoutStripe({
     <div className={`${styles.container} ${isHideForm ? styles.hide : ""}`}>
       <ExpressCheckoutElement
         onReady={onReady}
-        onLoadError={() => onChangeLoading && onChangeLoading(false)}
+        onLoadError={(e) => {
+          console.log("Error: ", e);
+          onChangeLoading && onChangeLoading(false);
+        }}
         onConfirm={onConfirm}
         options={{
           layout: {
@@ -102,6 +105,10 @@ function ExpressCheckoutStripe({
             overflow: "never",
           },
           paymentMethodOrder: ["apple_pay", "google_pay", "amazon_pay", "link"],
+          wallets: {
+            googlePay: "always",
+            applePay: "always",
+          },
         }}
       />
       {errorMessage && <p className={styles.error}>{errorMessage}</p>}

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

@@ -160,28 +160,31 @@ function PaymentModal({
         )}
         <div className={styles["payment-method-container"]}>
           {stripePromise && clientSecret && (
-            <Elements stripe={stripePromise} options={{ clientSecret }}>
+            <>
-              <ExpressCheckoutStripe
+              <Elements stripe={stripePromise} options={{ clientSecret }}>
-                clientSecret={clientSecret}
+                <ExpressCheckoutStripe
-                returnUrl={returnUrl}
+                  clientSecret={clientSecret}
-                isHide={
+                  returnUrl={returnUrl}
-                  selectedPaymentMethod !== EPaymentMethod.PAYMENT_BUTTONS
+                  isHide={
-                }
+                    selectedPaymentMethod !== EPaymentMethod.PAYMENT_BUTTONS
-                onAvailable={(_isAvailable, _availableMethods) =>
+                  }
-                  onAvailableExpressCheckout(_isAvailable, _availableMethods)
+                  onAvailable={(_isAvailable, _availableMethods) =>
-                }
+                    onAvailableExpressCheckout(_isAvailable, _availableMethods)
-                onChangeLoading={(isLoading) =>
+                  }
-                  setIsLoadingExpressCheckout(isLoading)
+                  onChangeLoading={(isLoading) =>
-                }
+                    setIsLoadingExpressCheckout(isLoading)
-              />
+                  }
-              {selectedPaymentMethod === EPaymentMethod.CREDIT_CARD && (
+                />
+              </Elements>
+              <Elements stripe={stripePromise} options={{ clientSecret }}>
                 <CheckoutForm
                   confirmType={paymentType}
                   subscriptionReceiptId={paymentIntentId}
                   returnUrl={returnUrl}
+                  isHide={selectedPaymentMethod !== EPaymentMethod.CREDIT_CARD}
                 />
-              )}
+              </Elements>
-            </Elements>
+            </>
           )}
         </div>
         <SecurityPayments />

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

@@ -165,28 +165,31 @@ function PaymentModal({
         )}
         <div className={styles["payment-method-container"]}>
           {stripePromise && clientSecret && (
-            <Elements stripe={stripePromise} options={{ clientSecret }}>
+            <>
-              <ExpressCheckoutStripe
+              <Elements stripe={stripePromise} options={{ clientSecret }}>
-                clientSecret={clientSecret}
+                <ExpressCheckoutStripe
-                returnUrl={returnUrl}
+                  clientSecret={clientSecret}
-                isHide={
+                  returnUrl={returnUrl}
-                  selectedPaymentMethod !== EPaymentMethod.PAYMENT_BUTTONS
+                  isHide={
-                }
+                    selectedPaymentMethod !== EPaymentMethod.PAYMENT_BUTTONS
-                onAvailable={(_isAvailable, _availableMethods) =>
+                  }
-                  onAvailableExpressCheckout(_isAvailable, _availableMethods)
+                  onAvailable={(_isAvailable, _availableMethods) =>
-                }
+                    onAvailableExpressCheckout(_isAvailable, _availableMethods)
-                onChangeLoading={(isLoading) =>
+                  }
-                  setIsLoadingExpressCheckout(isLoading)
+                  onChangeLoading={(isLoading) =>
-                }
+                    setIsLoadingExpressCheckout(isLoading)
-              />
+                  }
-              {selectedPaymentMethod === EPaymentMethod.CREDIT_CARD && (
+                />
+              </Elements>
+              <Elements stripe={stripePromise} options={{ clientSecret }}>
                 <CheckoutForm
                   confirmType={paymentType}
                   subscriptionReceiptId={paymentIntentId}
                   returnUrl={returnUrl}
+                  isHide={selectedPaymentMethod !== EPaymentMethod.CREDIT_CARD}
                 />
-              )}
+              </Elements>
-            </Elements>
+            </>
           )}
         </div>
         <SecurityPayments />