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,6 +160,7 @@ function PaymentModal({
         )}
         <div className={styles["payment-method-container"]}>
           {stripePromise && clientSecret && (
+            <>
               <Elements stripe={stripePromise} options={{ clientSecret }}>
                 <ExpressCheckoutStripe
                   clientSecret={clientSecret}
@@ -174,14 +175,16 @@ function PaymentModal({
                     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>
+            </>
           )}
         </div>
         <SecurityPayments />

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

@@ -165,6 +165,7 @@ function PaymentModal({
         )}
         <div className={styles["payment-method-container"]}>
           {stripePromise && clientSecret && (
+            <>
               <Elements stripe={stripePromise} options={{ clientSecret }}>
                 <ExpressCheckoutStripe
                   clientSecret={clientSecret}
@@ -179,14 +180,16 @@ function PaymentModal({
                     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>
+            </>
           )}
         </div>
         <SecurityPayments />