diff --git a/.changeset/nine-cooks-carry.md b/.changeset/nine-cooks-carry.md new file mode 100644 index 00000000..d25009d8 --- /dev/null +++ b/.changeset/nine-cooks-carry.md @@ -0,0 +1,5 @@ +--- +"@godaddy/react": patch +--- + +Fix bug where GDP tries to load before having session values diff --git a/packages/react/src/components/checkout/payment/checkout-buttons/express/godaddy.tsx b/packages/react/src/components/checkout/payment/checkout-buttons/express/godaddy.tsx index d15a0de6..eec97822 100644 --- a/packages/react/src/components/checkout/payment/checkout-buttons/express/godaddy.tsx +++ b/packages/react/src/components/checkout/payment/checkout-buttons/express/godaddy.tsx @@ -336,6 +336,7 @@ export function ExpressCheckoutButton() { if ( !collect.current && godaddyPaymentsConfig && + (godaddyPaymentsConfig?.businessId || session?.businessId) && isPoyntLoaded && isCollectLoading && !hasMounted.current && @@ -404,7 +405,8 @@ export function ExpressCheckoutButton() { !godaddyPaymentsConfig || !isCollectLoading || !collect.current || - hasMounted.current + hasMounted.current || + (!godaddyPaymentsConfig?.businessId && !session?.businessId) ) return; @@ -456,6 +458,7 @@ export function ExpressCheckoutButton() { godaddyPaymentsConfig, isCollectLoading, handleExpressPayClick, + session?.businessId, ]); // Function to convert shipping address to shippingLines format for price adjustments diff --git a/packages/react/src/components/checkout/payment/checkout-buttons/paze/godaddy.tsx b/packages/react/src/components/checkout/payment/checkout-buttons/paze/godaddy.tsx index 79e3a865..248492e5 100644 --- a/packages/react/src/components/checkout/payment/checkout-buttons/paze/godaddy.tsx +++ b/packages/react/src/components/checkout/payment/checkout-buttons/paze/godaddy.tsx @@ -100,6 +100,7 @@ export function PazeCheckoutButton() { if ( !collect.current && godaddyPaymentsConfig && + (godaddyPaymentsConfig?.businessId || session?.businessId) && isCollectLoading && isPoyntLoaded && !hasMounted.current @@ -132,6 +133,7 @@ export function PazeCheckoutButton() { if ( !isPoyntLoaded || !godaddyPaymentsConfig || + (!godaddyPaymentsConfig?.businessId && !session?.businessId) || !isCollectLoading || !collect.current || hasMounted.current diff --git a/packages/react/src/components/checkout/payment/payment-form.tsx b/packages/react/src/components/checkout/payment/payment-form.tsx index 6f0408ed..5c9e0870 100644 --- a/packages/react/src/components/checkout/payment/payment-form.tsx +++ b/packages/react/src/components/checkout/payment/payment-form.tsx @@ -149,6 +149,7 @@ export function PaymentForm( if ( !collect.current && godaddyPaymentsConfig && + (godaddyPaymentsConfig?.businessId || session?.businessId) && isPoyntLoaded && countryCode && currencyCode && diff --git a/packages/react/src/components/checkout/payment/payment-methods/credit-card/godaddy.tsx b/packages/react/src/components/checkout/payment/payment-methods/credit-card/godaddy.tsx index 5b824889..0e6b71ee 100644 --- a/packages/react/src/components/checkout/payment/payment-methods/credit-card/godaddy.tsx +++ b/packages/react/src/components/checkout/payment/payment-methods/credit-card/godaddy.tsx @@ -187,7 +187,13 @@ export function GoDaddyCreditCardForm() { const collect = useRef(null); useLayoutEffect(() => { - if (!isPoyntLoaded || !godaddyPaymentsConfig || collect.current) return; + if ( + !isPoyntLoaded || + !godaddyPaymentsConfig || + collect.current || + (!godaddyPaymentsConfig?.businessId && !session?.businessId) + ) + return; collect.current = new (window as any).TokenizeJs( godaddyPaymentsConfig?.businessId || session?.businessId, diff --git a/packages/react/src/components/checkout/payment/utils/use-load-poynt-collect.ts b/packages/react/src/components/checkout/payment/utils/use-load-poynt-collect.ts index d2a7c41e..f2234d25 100644 --- a/packages/react/src/components/checkout/payment/utils/use-load-poynt-collect.ts +++ b/packages/react/src/components/checkout/payment/utils/use-load-poynt-collect.ts @@ -9,6 +9,7 @@ const listeners = new Set<(loaded: boolean) => void>(); // load collect.js globally so it can be used for card component and Apple/G Pay buttons export function useLoadPoyntCollect() { const { godaddyPaymentsConfig } = useCheckoutContext(); + const { session } = useCheckoutContext(); const collectCDN = useGetPoyntCollectCdn(); const [loaded, setLoaded] = useState(isPoyntLoaded); @@ -32,7 +33,8 @@ export function useLoadPoyntCollect() { isPoyntCDNLoaded || isPoyntLoaded || !godaddyPaymentsConfig || - !collectCDN + !collectCDN || + (!session?.businessId && !godaddyPaymentsConfig?.businessId) ) { return; } @@ -48,7 +50,7 @@ export function useLoadPoyntCollect() { }; document?.body?.appendChild(script); - }, [godaddyPaymentsConfig, collectCDN]); + }, [godaddyPaymentsConfig, collectCDN, session?.businessId]); return { isPoyntLoaded: loaded }; } diff --git a/packages/react/src/lib/godaddy/checkout-queries.ts b/packages/react/src/lib/godaddy/checkout-queries.ts index c37ace5c..2bc09620 100644 --- a/packages/react/src/lib/godaddy/checkout-queries.ts +++ b/packages/react/src/lib/godaddy/checkout-queries.ts @@ -5,11 +5,13 @@ export const GetCheckoutSessionQuery = graphql(` checkoutSession { id token + url sourceApp returnUrl successUrl storeId channelId + businessId customerId storeName environment