VNEXT-68989

.changeset/some-berries-teach.md

@@ -0,0 +1,6 @@
+---
+"nextjs": minor
+"@godaddy/react": minor
+---
+
+Implementation of mercadopago

examples/nextjs/app/checkout.tsx

@@ -14,20 +14,52 @@ export function CheckoutPage({ session }: { session: CheckoutSession }) {
     <Checkout
       session={session}
       checkoutFormSchema={customSchema}
-      squareConfig={{
-        appId: process.env.NEXT_PUBLIC_SQUARE_APP_ID || '',
-        locationId: process.env.NEXT_PUBLIC_SQUARE_LOCATION_ID || '',
-      }}
-      stripeConfig={{
-        publishableKey: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || '',
-      }}
-      godaddyPaymentsConfig={{
-        businessId: process.env.NEXT_PUBLIC_GODADDY_BUSINESS_ID || '',
-        appId: process.env.NEXT_PUBLIC_GODADDY_APP_ID || '',
-      }}
-      paypalConfig={{
-        clientId: process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID || '',
-      }}
+      squareConfig={
+        process.env.NEXT_PUBLIC_SQUARE_APP_ID &&
+        process.env.NEXT_PUBLIC_SQUARE_LOCATION_ID
+          ? {
+              appId: process.env.NEXT_PUBLIC_SQUARE_APP_ID,
+              locationId: process.env.NEXT_PUBLIC_SQUARE_LOCATION_ID,
+            }
+          : undefined
+      }
+      stripeConfig={
+        process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
+          ? {
+              publishableKey: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
+            }
+          : undefined
+      }
+      mercadoPagoConfig={
+        process.env.NEXT_PUBLIC_MERCADOPAGO_PUBLIC_KEY
+          ? {
+              publicKey: process.env.NEXT_PUBLIC_MERCADOPAGO_PUBLIC_KEY,
+              country:
+                (process.env.NEXT_PUBLIC_MERCADOPAGO_COUNTRY as
+                  | 'AR'
+                  | 'BR'
+                  | 'CO'
+                  | 'CL'
+                  | 'PE'
+                  | 'MX') || 'AR',
+            }
+          : undefined
+      }
+      godaddyPaymentsConfig={
+        process.env.NEXT_PUBLIC_GODADDY_APP_ID
+          ? {
+              businessId: process.env.NEXT_PUBLIC_GODADDY_BUSINESS_ID || '',
+              appId: process.env.NEXT_PUBLIC_GODADDY_APP_ID,
+            }
+          : undefined
+      }
+      paypalConfig={
+        process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID
+          ? {
+              clientId: process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID,
+            }
+          : undefined
+      }
     />
   );
 }

examples/nextjs/app/page.tsx

@@ -58,17 +58,13 @@ export default async function Home() {
           processor: 'godaddy',
           checkoutTypes: ['standard'],
         },
-        express: {
-          processor: 'godaddy',
-          checkoutTypes: ['express'],
+        mercadopago: {
+          processor: 'mercadopago',
+          checkoutTypes: ['standard'],
         },
         paypal: {
           processor: 'paypal',
-          checkoutTypes: ['standard'],
-        },
-        offline: {
-          processor: 'offline',
-          checkoutTypes: ['standard'],
+          checkoutTypes: ['express', 'standard'],
         },
       },
       operatingHours: {

examples/nextjs/app/store/actions.ts

@@ -77,8 +77,6 @@ export async function checkoutWithOrder(orderId: string) {
     throw new Error('Failed to create checkout session');
   }
 
-  console.log({ session });
-
   if (!session.url) {
     throw new Error('No checkout URL returned');
   }

examples/nextjs/app/store/product/[productId]/product.tsx

@@ -17,10 +17,7 @@ export default function Product({ productId }: { productId: string }) {
         <ArrowLeft className='h-4 w-4' />
         Back to Store
       </Link>
-      <ProductDetails
-        productId={productId}
-        onAddToCartSuccess={openCart}
-      />
+      <ProductDetails productId={productId} onAddToCartSuccess={openCart} />
     </div>
   );
 }

examples/nextjs/biome.json

@@ -1,20 +1,20 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.3.3/schema.json",
-	"extends": ["biome-config-godaddy/biome.json"],
-	"css": {
-		"parser": {
-			"cssModules": true,
-			"tailwindDirectives": true
-		}
-	},
-	"files": {
-		"includes": ["**/*", "!!**/src/globals.css"]
-	},
-	"linter": {
-		"rules": {
-			"correctness": {
-				"useUniqueElementIds": "off"
-			}
-		}
-	}
+  "$schema": "https://biomejs.dev/schemas/2.3.3/schema.json",
+  "extends": ["biome-config-godaddy/biome.json"],
+  "css": {
+    "parser": {
+      "cssModules": true,
+      "tailwindDirectives": true
+    }
+  },
+  "files": {
+    "includes": ["**/*", "!!**/src/globals.css"]
+  },
+  "linter": {
+    "rules": {
+      "correctness": {
+        "useUniqueElementIds": "off"
+      }
+    }
+  }
 }

examples/nextjs/env.sample

@@ -21,3 +21,7 @@ NEXT_PUBLIC_GODADDY_APP_ID=
 NEXT_PUBLIC_SQUARE_APP_ID=
 NEXT_PUBLIC_SQUARE_LOCATION_ID=
 NEXT_PUBLIC_PAYPAL_CLIENT_ID=
+
+# MercadoPago Credentials
+NEXT_PUBLIC_MERCADOPAGO_PUBLIC_KEY=
+NEXT_PUBLIC_MERCADOPAGO_COUNTRY=AR

packages/react/src/components/checkout/checkout.tsx

@@ -80,6 +80,11 @@ export type PayPalConfig = {
   disableFunding?: Array<'credit' | 'card' | 'paylater' | 'venmo'>;
 };
 
+export type MercadoPagoConfig = {
+  publicKey: string;
+  country: 'AR' | 'BR' | 'CO' | 'CL' | 'PE' | 'MX';
+};
+
 interface CheckoutContextValue {
   elements?: CheckoutElements;
   targets?: Partial<
@@ -92,6 +97,7 @@ interface CheckoutContextValue {
   godaddyPaymentsConfig?: GodaddyPaymentsConfig;
   squareConfig?: SquareConfig;
   paypalConfig?: PayPalConfig;
+  mercadoPagoConfig?: MercadoPagoConfig;
   isConfirmingCheckout: boolean;
   setIsConfirmingCheckout: (isConfirming: boolean) => void;
   checkoutErrors?: string[] | undefined;
@@ -202,6 +208,7 @@ export interface CheckoutProps {
   godaddyPaymentsConfig?: GodaddyPaymentsConfig;
   squareConfig?: SquareConfig;
   paypalConfig?: PayPalConfig;
+  mercadoPagoConfig?: MercadoPagoConfig;
   layout?: LayoutSection[];
   direction?: 'ltr' | 'rtl';
   showStoreHours?: boolean;
@@ -221,6 +228,7 @@ export function Checkout(props: CheckoutProps) {
     godaddyPaymentsConfig,
     squareConfig,
     paypalConfig,
+    mercadoPagoConfig,
     isCheckoutDisabled,
   } = props;
 
@@ -385,6 +393,7 @@ export function Checkout(props: CheckoutProps) {
           stripeConfig,
           godaddyPaymentsConfig,
           squareConfig,
+          mercadoPagoConfig,
           paypalConfig,
           requiredFields,
           isConfirmingCheckout,

packages/react/src/components/checkout/payment/checkout-buttons/credit-card/mercadopago.tsx

@@ -0,0 +1,42 @@
+import { useFormContext } from 'react-hook-form';
+import { useMercadoPago } from '@/components/checkout/payment/utils/mercadopago-provider';
+import { Button } from '@/components/ui/button';
+import { useGoDaddyContext } from '@/godaddy-provider';
+
+export function MercadoPagoCreditCardCheckoutButton() {
+  const { t } = useGoDaddyContext();
+  const { handleBrickSubmit, isLoading } = useMercadoPago();
+  const form = useFormContext();
+
+  const handleSubmit = async () => {
+    // Validate form first
+    const valid = await form.trigger();
+    if (!valid) {
+      const firstError = Object.keys(form.formState.errors)[0];
+      if (firstError) {
+        form.setFocus(firstError);
+      }
+      return;
+    }
+
+    // Trigger MercadoPago brick submission
+    if (handleBrickSubmit) {
+      try {
+        await handleBrickSubmit();
+      } catch (error) {
+        console.error('MercadoPago submission error:', error);
+      }
+    }
+  };
+
+  return (
+    <Button
+      type='button'
+      onClick={handleSubmit}
+      disabled={!handleBrickSubmit || isLoading}
+      className='w-full'
+    >
+      {t.payment.payNow}
+    </Button>
+  );
+}