feat(checkout): CCAvenue improvements and example config

- Pass ccavenueConfig from env in Next.js example (accessCodeId, redirectURL)
- CCAvenue button: user-friendly message for AUTHORIZATION_FAILED, remove debug logs
- CCAvenue return: use useConfirmCheckout.mutateAsync for redirect and error handling
- Remove Record typecasting for payment.methods.ccavenue and descriptions in payment-form

Co-authored-by: Cursor <[email protected]>

Author: asaini-godaddy

examples/nextjs/app/checkout.tsx

@@ -60,6 +60,16 @@ export function CheckoutPage({ session }: { session: CheckoutSession }) {
             }
           : undefined
       }
+      ccavenueConfig={
+        process.env.NEXT_PUBLIC_CCAVENUE_ACCESS_CODE_ID &&
+        process.env.NEXT_PUBLIC_CCAVENUE_REDIRECT_URL
+          ? {
+              accessCodeId:
+                process.env.NEXT_PUBLIC_CCAVENUE_ACCESS_CODE_ID,
+              redirectURL: process.env.NEXT_PUBLIC_CCAVENUE_REDIRECT_URL,
+            }
+          : undefined
+      }
     />
   );
 }

packages/react/src/components/checkout/payment/checkout-buttons/ccavenue/ccavenue.tsx

@@ -16,18 +16,15 @@ export function CCAvenueCheckoutButton() {
   const { t } = useGoDaddyContext();
   const { setCheckoutErrors, isConfirmingCheckout, ccavenueConfig } =
     useCheckoutContext();
-  console.log('ccavenueConfig', ccavenueConfig);
   const isPaymentDisabled = useIsPaymentDisabled();
   const form = useFormContext();
   const authorizeCheckout = useAuthorizeCheckout();
 
   const handleClick = useCallback(async () => {
     const valid = await form.trigger();
-    console.log('valid', valid);
     if (!valid) {
       const firstError = Object.keys(form.formState.errors)[0];
       if (firstError) {
-        console.log('firstError', firstError);
         form.setFocus(firstError);
       }
       return;
@@ -45,8 +42,7 @@ export function CCAvenueCheckoutButton() {
         paymentToken: '',
       });
       console.log('resData', resData);
-      const transactionRefNum = (resData as { transactionRefNum?: string })
-        ?.transactionRefNum;
+      const transactionRefNum = resData?.transactionRefNum ?? '';
       if (!transactionRefNum) {
         setCheckoutErrors(['TRANSACTION_PROCESSING_FAILED']);
         return;
@@ -84,18 +80,17 @@ export function CCAvenueCheckoutButton() {
     ccavenueConfig?.accessCodeId,
   ]);
 
-  const isBusy = isConfirmingCheckout || authorizeCheckout.isPending;
+  const isBusy = isConfirmingCheckout || isPaymentDisabled;
 
   return (
     <Button
       type='button'
       size='lg'
-      className={cn('w-full', isPaymentDisabled || isBusy ? 'opacity-80' : '')}
+      className={cn('w-full')}
       disabled={isPaymentDisabled || isBusy}
       onClick={handleClick}
     >
-      {(t.payment.methods as Record<string, string>).ccavenue ??
-        'Pay with CCAvenue'}
+      {t.payment.methods.ccavenue ?? 'Pay with CCAvenue'}
     </Button>
   );
 }

packages/react/src/components/checkout/payment/utils/ccavenue-return-provider.tsx

@@ -1,26 +1,20 @@
 'use client';
 
 import { useEffect, useRef } from 'react';
+import { useCheckoutContext } from '@/components/checkout/checkout';
 import {
-  redirectToSuccessUrl,
-  useCheckoutContext,
-} from '@/components/checkout/checkout';
-import { PaymentProvider } from '@/components/checkout/payment/utils/use-confirm-checkout';
-import { useGoDaddyContext } from '@/godaddy-provider';
-import { confirmCheckout } from '@/lib/godaddy/godaddy';
+  PaymentProvider,
+  useConfirmCheckout,
+} from '@/components/checkout/payment/utils/use-confirm-checkout';
 import { GraphQLErrorWithCodes } from '@/lib/graphql-with-errors';
 
 export function CCAvenueReturnProvider({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const {
-    session,
-    setCheckoutErrors,
-    setIsConfirmingCheckout,
-  } = useCheckoutContext();
-  const { apiHost } = useGoDaddyContext();
+  const { session, setCheckoutErrors } = useCheckoutContext();
+  const confirmCheckout = useConfirmCheckout();
   const hasRun = useRef(false);
 
   useEffect(() => {
@@ -36,27 +30,16 @@ export function CCAvenueReturnProvider({
     }
 
     hasRun.current = true;
-    setIsConfirmingCheckout(true);
-    setCheckoutErrors(undefined);
 
     const confirmInput = {
       paymentToken: encResp,
       paymentType: 'ccavenue' as const,
       paymentProvider: PaymentProvider.CCAVENUE,
     };
 
-    (async () => {
-      try {
-
-        await confirmCheckout(confirmInput, session, apiHost);
-
-        const url = new URL(window.location.href);
-        url.searchParams.delete('encResp');
-        url.searchParams.delete('sessionId');
-        window.history.replaceState({}, '', url.pathname + url.search);
-
-        redirectToSuccessUrl(session.successUrl);
-      } catch (err) {
+    confirmCheckout
+      .mutateAsync(confirmInput)
+      .catch(err => {
         if (err instanceof GraphQLErrorWithCodes) {
           setCheckoutErrors(err.codes);
         } else {
@@ -66,18 +49,8 @@ export function CCAvenueReturnProvider({
               : 'Payment confirmation failed.',
           ]);
         }
-      } finally {
-        setIsConfirmingCheckout(false);
-      }
-    })();
-  }, [
-    apiHost,
-    session?.token,
-    session?.id,
-    session?.successUrl,
-    setCheckoutErrors,
-    setIsConfirmingCheckout,
-  ]);
+      });
+  }, [session?.token, session?.id, setCheckoutErrors]);
 
   return <>{children}</>;
 }