diff --git a/src/components/CompatibilityV2/pages/TrialPayment/styles.module.scss b/src/components/CompatibilityV2/pages/TrialPayment/styles.module.scss
index 73ea61d..994c145 100644
--- a/src/components/CompatibilityV2/pages/TrialPayment/styles.module.scss
+++ b/src/components/CompatibilityV2/pages/TrialPayment/styles.module.scss
@@ -26,6 +26,7 @@
font-size: 20px;
font-weight: 500;
margin-top: 22px;
+ line-height: 1 !important;
}
.as-seen-in {
diff --git a/src/components/PalmistryV1/pages/TrialPayment/styles.module.scss b/src/components/PalmistryV1/pages/TrialPayment/styles.module.scss
index be96acf..3bb9d66 100644
--- a/src/components/PalmistryV1/pages/TrialPayment/styles.module.scss
+++ b/src/components/PalmistryV1/pages/TrialPayment/styles.module.scss
@@ -26,6 +26,7 @@
font-size: 20px;
font-weight: 500;
margin-top: 22px;
+ line-height: 1 !important;
}
.as-seen-in {
diff --git a/src/hooks/payment/nmi/usePayment.ts b/src/hooks/payment/nmi/usePayment.ts
index c943ca9..56d9bf7 100644
--- a/src/hooks/payment/nmi/usePayment.ts
+++ b/src/hooks/payment/nmi/usePayment.ts
@@ -51,6 +51,7 @@ export const usePayment = ({
ccexp: { isValid: false, message: '' },
cvv: { isValid: false, message: '' }
});
+ const [isCollectJSLoaded, setIsCollectJSLoaded] = useState(false);
const { anonymousAuthorization } = useAuthentication();
@@ -84,66 +85,89 @@ export const usePayment = ({
}, [products, activeProduct]);
useEffect(() => {
- if ((!activeProduct || !token) && !isAnonymous) return;
-
- const config: any = {
- variant: paymentFormType,
- callback: (token: any) => {
- finishSubmit(token);
- },
- paymentSelector: '#customPayButton',
- primaryColor: '#066fde',
- theme: "material",
- price: formPrice,
- styleSniffer: true,
- customCss: {
- "background-color": "#F0F5FF",
- "height": "51px",
- "padding": "11px 0",
- "letter-spacing": "6px",
- "border": "none",
- "font-size": "18px",
- "margin-right": "auto",
- "margin-left": "auto"
- },
- focusCss: {
- "border": "none",
- },
- placeholderCss: {
- "letter-spacing": "6px",
- "font-size": "18px",
- },
- fields: {
- ccnumber: {
- placeholder: '____ ____ ____ ____',
- selector: '#card-number',
- title: "Card Number",
- // enableCardBrandPreviews: true
- },
- ccexp: {
- placeholder: '__ / __',
- selector: '#card-expiry',
- title: "Card Expiry"
- },
- cvv: {
- placeholder: 'CVC',
- selector: '#card-cvv',
- title: "Card CVC",
- // display: "hide"
- }
- },
- validationCallback: (field: string, status: boolean, message: string) => {
- setFormValidation(prev => ({
- ...prev,
- [field]: {
- isValid: status,
- message: status ? '' : message
- }
- }));
- },
+ const checkCollectJSLoaded = () => {
+ if (window.CollectJS) {
+ setIsCollectJSLoaded(true);
+ return true;
+ }
+ return false;
};
- window.CollectJS?.configure(config);
+ const configureCollectJS = () => {
+ if (!checkCollectJSLoaded()) {
+ console.warn('CollectJS not loaded yet, retrying...');
+ return false;
+ }
+
+ const config: any = {
+ variant: paymentFormType,
+ callback: (token: any) => {
+ finishSubmit(token);
+ },
+ paymentSelector: '#customPayButton',
+ primaryColor: '#066fde',
+ theme: "material",
+ price: formPrice,
+ styleSniffer: true,
+ customCss: {
+ "background-color": "#F0F5FF",
+ "height": "51px",
+ "padding": "11px 0",
+ "letter-spacing": "6px",
+ "border": "none",
+ "font-size": "18px",
+ "margin-right": "auto",
+ "margin-left": "auto"
+ },
+ focusCss: {
+ "border": "none",
+ },
+ placeholderCss: {
+ "letter-spacing": "6px",
+ "font-size": "18px",
+ },
+ fields: {
+ ccnumber: {
+ placeholder: '____ ____ ____ ____',
+ selector: '#card-number',
+ title: "Card Number",
+ // enableCardBrandPreviews: true
+ },
+ ccexp: {
+ placeholder: '__ / __',
+ selector: '#card-expiry',
+ title: "Card Expiry"
+ },
+ cvv: {
+ placeholder: 'CVC',
+ selector: '#card-cvv',
+ title: "Card CVC",
+ // display: "hide"
+ }
+ },
+ validationCallback: (field: string, status: boolean, message: string) => {
+ setFormValidation(prev => ({
+ ...prev,
+ [field]: {
+ isValid: status,
+ message: status ? '' : message
+ }
+ }));
+ },
+ };
+ window.CollectJS?.configure(config);
+ return true;
+ };
+
+ if ((!activeProduct || !token) && !isAnonymous) return;
+
+ const retryInterval = setInterval(() => {
+ if (configureCollectJS()) {
+ clearInterval(retryInterval);
+ }
+ }, 1000);
+
+ return () => clearInterval(retryInterval);
}, [placementId, paywallId, activeProduct, token]);
const finishSubmit = async (response: any) => {
@@ -227,7 +251,8 @@ export const usePayment = ({
submitInlineForm,
closeModal,
formValidation,
- isFormValid
+ isFormValid,
+ isCollectJSLoaded
}), [
isLoading,
paymentResponse,
@@ -239,6 +264,7 @@ export const usePayment = ({
submitInlineForm,
closeModal,
formValidation,
- isFormValid
+ isFormValid,
+ isCollectJSLoaded
])
}
\ No newline at end of file
diff --git a/src/routerComponents/Compatibility/v2/index.tsx b/src/routerComponents/Compatibility/v2/index.tsx
index d9a64ee..2598082 100644
--- a/src/routerComponents/Compatibility/v2/index.tsx
+++ b/src/routerComponents/Compatibility/v2/index.tsx
@@ -170,7 +170,9 @@ function CompatibilityV2Routes() {
}
- />
+ >
+ } />
+
}
diff --git a/src/routerComponents/Palmistry/v1/index.tsx b/src/routerComponents/Palmistry/v1/index.tsx
index b1a6288..fe53984 100644
--- a/src/routerComponents/Palmistry/v1/index.tsx
+++ b/src/routerComponents/Palmistry/v1/index.tsx
@@ -164,7 +164,9 @@ function PalmistryV1Routes() {
}
- />
+ >
+ } />
+
}