diff --git a/jam-ui/src/components/page/JKPaymentMethod.js b/jam-ui/src/components/page/JKPaymentMethod.js
index f25880c3e..db1e7ad9d 100644
--- a/jam-ui/src/components/page/JKPaymentMethod.js
+++ b/jam-ui/src/components/page/JKPaymentMethod.js
@@ -16,7 +16,7 @@ import iconPaypalFull from '../../assets/img/icons/icon-paypal-full.png';
 import { toast } from 'react-toastify';
 import { updatePayment } from '../../helpers/rest';
 import { useAuth } from '../../context/UserAuth';
-import { getBillingInfo, updateBillingInfo, getUserDetail, getCountries } from '../../helpers/rest';
+import { getBillingInfo, getUserDetail, getCountries } from '../../helpers/rest';
 import { useForm, Controller } from 'react-hook-form';
 import Select from 'react-select';
 import { useResponsive } from '@farfetch/react-context-responsive';
@@ -30,7 +30,6 @@ const JKPaymentMethod = () => {
   const [countries, setCountries] = useState([]);
   const labelClassName = 'ls text-600 font-weight-semi-bold mb-0';
   const [submitting, setSubmitting] = useState(false);
-  const [billingDataLoaded, setBillingDataLoaded] = useState(false);
   const [isCardValid, setIsCardValid] = useState(false);
   const { greaterThan } = useResponsive();
 
@@ -74,7 +73,6 @@ const JKPaymentMethod = () => {
       if (userData.has_recurly_account) {
         setHasStoredCreditCard(userData['has_stored_credit_card?']);
         await populateBillingAddress();
-        setBillingDataLoaded(true);
       }
     } catch (error) {
       console.error('Failed to get user details:', error);
@@ -128,46 +126,36 @@ const JKPaymentMethod = () => {
     setValue('country', selectedOption.value);
   };
 
+  const recurlyContainerRef = useRef();
 
   useEffect(() => {
-    if (!window.recurly) return;
+    if (!recurlyContainerRef.current || !window.recurly || recurlyConfigured.current) return;
 
-    if (recurlyConfigured.current) return;
+    window.recurly.configure({ publicKey: process.env.REACT_APP_RECURLY_PUBLIC_API_KEY });
+    const elements = window.recurly.Elements();
+    const cardElement = elements.CardElement();
 
-    const interval = setInterval(() => {
-      const container = document.querySelector('#recurly-elements');
-      console.log('Checking for Recurly Elements container:', container);
-      if (container && window.recurly) {
-        console.log('Initializing Recurly Elements...');
-        window.recurly.configure({ publicKey: process.env.REACT_APP_RECURLY_PUBLIC_API_KEY });
-        const elements = window.recurly.Elements();
-        const cardElement = elements.CardElement();
-        cardElement.attach('#recurly-elements');
+    cardElement.attach(recurlyContainerRef.current);
 
-        cardElement.on('change', (event) => {
-          if (event.complete) {
-            setIsCardValid(true);
-          } else if (event.error) {
-            setIsCardValid(false);
-          } else {
-            setIsCardValid(false);
-          }
-        });
+    cardElement.on('change', (event) => {
+      setIsCardValid(event.complete && !event.error);
+    });
 
-        //then load paypal:
-        const paypalInst = window.recurly.PayPal({ braintree: { clientAuthorization: process.env.REACT_APP_BRAINTREE_TOKEN } })
-        paypal.current = paypalInst;
-        paypal.current.on('error', onPayPalError);
-        paypal.current.on('token', onPayPalToken);
+    //then load paypal:
+    const paypalInst = window.recurly.PayPal({ braintree: { clientAuthorization: process.env.REACT_APP_BRAINTREE_TOKEN } })
+    paypal.current = paypalInst;
+    paypal.current.on('error', onPayPalError);
+    paypal.current.on('token', onPayPalToken);
 
-        elementsRef.current = elements;
-        recurlyConfigured.current = true;
-        clearInterval(interval);
-      }
-    }, 100);
+    elementsRef.current = elements;
+    recurlyConfigured.current = true;
 
-    return () => clearInterval(interval);
-  }, []);
+    return () => {
+      // Optional cleanup if the component unmounts
+      recurlyContainerRef.current.innerHTML = '';
+      recurlyConfigured.current = false;
+    };
+  }, [recurlyContainerRef.current]);
 
   const onPayPalError = (error) => {
     console.error('PayPal Error:', error);
@@ -196,67 +184,9 @@ const JKPaymentMethod = () => {
     });
   };
 
-  // const onSubmit = async (data) => {
-  //   //first update billing address
-  //   setSubmitting(true);
-  //   const resp = await updateBillingInfo(data)
-  //   if (!resp.ok) {
-  //     setSubmitting(false);
-  //     const errorData = await resp.json();
-  //     console.error('Error updating billing info:', errorData);
-  //     toast.error(errorData.message || t('payment_method.alerts.billing_update_error'));
-  //     return;
-  //   }
-  //   if (paymentMethod === 'paypal') {
-  //     handoverToPaypal();
-  //     return;
-  //   } else {
-
-  //     if (!elementsRef.current) {
-  //       console.error('Recurly elementsRef.current is not ready');
-  //       setSubmitting(false);
-  //       return;
-  //     }
-  //     if (!formRef.current) {
-  //       console.error('formRef.current is not ready');
-  //       setSubmitting(false);
-  //       return;
-  //     }
-
-  //     // if (!isCardValid) {
-  //     //   console.error('Card is not valid');
-  //     //   toast.error(t('payment_method.validations.card.invalid'));
-  //     //   setSubmitting(false);
-  //     //   return;
-  //     // }
-
-  //     window.recurly.token(elementsRef.current, formRef.current, (err, token) => {
-  //       if (err) {
-  //         console.error('Recurly token error:', err);
-  //         toast.error(err.message || t('payment_method.alerts.card_processing_error'));
-  //         setSubmitting(false);
-  //       } else {
-  //         console.log('Recurly token:', token.id);
-  //         // send token.id to backend
-  //         handleUpdatePayment(token);
-  //       }
-  //     });
-  //   }
-    
-  // };
-
-   const onSubmit = async (data) => {
-    //first update billing address
+  const onSubmit = async (data) => {
     setSubmitting(true);
-    // const resp = await updateBillingInfo(data)
-    // if (!resp.ok) {
-    //   setSubmitting(false);
-    //   const errorData = await resp.json();
-    //   console.error('Error updating billing info:', errorData);
-    //   toast.error(errorData.message || t('payment_method.alerts.billing_update_error'));
-    //   return;
-    // }
-    if (paymentMethod === 'paypal') {
+    if (paymentMethod === 'paypal') { // PayPal payment method
       handoverToPaypal();
       return;
     } else { // Credit Card payment method
@@ -284,7 +214,7 @@ const JKPaymentMethod = () => {
         }
       });
     }
-    
+
   };
 
   const handoverToPaypal = () => {
@@ -319,7 +249,7 @@ const JKPaymentMethod = () => {
                   <Row className="mb-2">
                     <Col xs={12} md={5} lg={4} className="text-md-right">
                       <Label for="first_name" className={labelClassName}>
-                      {t('payment_method.first_name')}
+                        {t('payment_method.first_name')}
                       </Label>
                     </Col>
                     <Col>
@@ -334,7 +264,7 @@ const JKPaymentMethod = () => {
                   <Row className="mb-2">
                     <Col xs={12} md={5} lg={4} className="text-md-right">
                       <Label for="last_name" className={labelClassName}>
-                      {t('payment_method.last_name')}
+                        {t('payment_method.last_name')}
                       </Label>
                     </Col>
                     <Col>
@@ -349,7 +279,7 @@ const JKPaymentMethod = () => {
                   <Row className="mb-2">
                     <Col xs={12} md={5} lg={4} className="text-md-right">
                       <Label for="address1" className={labelClassName}>
-                      {t('payment_method.address1')}
+                        {t('payment_method.address1')}
                       </Label>
                     </Col>
                     <Col>
@@ -364,7 +294,7 @@ const JKPaymentMethod = () => {
                   <Row className="mb-2">
                     <Col xs={12} md={5} lg={4} className="text-md-right">
                       <Label for="address2" className={labelClassName}>
-                      {t('payment_method.address2')}
+                        {t('payment_method.address2')}
                       </Label>
                     </Col>
                     <Col>
@@ -379,7 +309,7 @@ const JKPaymentMethod = () => {
                   <Row className="mb-2">
                     <Col xs={12} md={5} lg={4} className="text-md-right">
                       <Label for="city" className={labelClassName}>
-                      {t('payment_method.city')}
+                        {t('payment_method.city')}
                       </Label>
                     </Col>
                     <Col>
@@ -394,7 +324,7 @@ const JKPaymentMethod = () => {
                   <Row className="mb-2">
                     <Col xs={12} md={5} lg={4} className="text-md-right">
                       <Label for="state" className={labelClassName}>
-                      {t('payment_method.state')}
+                        {t('payment_method.state')}
                       </Label>
                     </Col>
                     <Col>
@@ -409,7 +339,7 @@ const JKPaymentMethod = () => {
                   <Row className="mb-2">
                     <Col xs={12} md={5} lg={4} className="text-md-right">
                       <Label for="zip" className={labelClassName}>
-                       {t('payment_method.zip_code')}
+                        {t('payment_method.zip_code')}
                       </Label>
                     </Col>
                     <Col>
@@ -427,7 +357,7 @@ const JKPaymentMethod = () => {
                   <Row className="mb-2">
                     <Col xs={12} md={5} lg={4} className="text-md-right">
                       <Label for="country" className={labelClassName}>
-                      {t('payment_method.country')}
+                        {t('payment_method.country')}
                       </Label>
                     </Col>
                     <Col>
@@ -490,7 +420,7 @@ const JKPaymentMethod = () => {
                   </Row>
                   <Row>
                     <Col sm={8}>
-                      <div id="recurly-elements"></div>
+                      <div id="recurly-elements" ref={recurlyContainerRef}></div>
                       {!isCardValid && errors.recurly && (
                         <div className="text-danger">
                           <small>{errors.recurly.message}</small>
@@ -522,7 +452,7 @@ const JKPaymentMethod = () => {
                     <Button
                       color="primary"
                       type="submit"
-                      disabled={ submitting }
+                      disabled={submitting}
                       className="mt-3"
                     >
                       {submitting ? t('payment_method.submitting') : t('payment_method.save_payment_info')}