VNEXT-68989 (#1290)

* initial changes to add mercadopago

* mercadopago event tracking, improvement in rendering, placing dummy email

* including changeset

* run lint:fix

* reverting gdp in example project

* mercadopago form ouside the accordion, cleaning MercadoPagoProvider

* setting correct button style

* setting description for mercadopago with translations

* payment method name i18n, merging form and button, getting rid of MPProvider

* lint fix

* changing path for mercadopago provider

* localizations changeset, removing nextjs since it's not published

* improve resource loading and fix re-render issues

* reverting log line for example, remove tracking for MP. Already tracking by other events

* unused imports

* changeset update

Author: cvillacorta-godaddy

.changeset/some-berries-teach.md

@@ -0,0 +1,6 @@
+---
+"@godaddy/react": patch
+"@godaddy/localizations": patch
+---
+
+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/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/localizations/src/deDe.ts

@@ -106,6 +106,7 @@ export const deDe = {
       googlePay: 'Google Pay',
       paze: 'Paze',
       offline: 'Offline-Zahlungen',
+      mercadopago: 'Mercado Pago',
     },
     descriptions: {
       creditCard: '',
@@ -114,6 +115,8 @@ export const deDe = {
       googlePay: '',
       paze: '',
       offline: '',
+      mercadopago:
+        'Verwende das MercadoPago-Formular unten, um deinen Kauf sicher abzuschließen.',
     },
     noMethodsAvailable: 'Keine Zahlungsmethoden verfügbar',
     cardNumber: 'Kartennummer',

packages/localizations/src/enIe.ts

@@ -106,6 +106,7 @@ export const enIe = {
       googlePay: 'Google Pay',
       paze: 'Paze',
       offline: 'Offline payments',
+      mercadopago: 'Mercado Pago',
     },
     descriptions: {
       creditCard: '',
@@ -114,6 +115,8 @@ export const enIe = {
       googlePay: '',
       paze: '',
       offline: '',
+      mercadopago:
+        'Use the MercadoPago form below to complete your purchase securely.',
     },
     noMethodsAvailable: 'No payment methods available',
     cardNumber: 'Card number',

packages/localizations/src/enUs.ts

@@ -106,6 +106,7 @@ export const enUs = {
       googlePay: 'Google Pay',
       paze: 'Paze',
       offline: 'Offline payments',
+      mercadopago: 'Mercado Pago',
     },
     descriptions: {
       creditCard: '',
@@ -114,6 +115,8 @@ export const enUs = {
       googlePay: '',
       paze: '',
       offline: '',
+      mercadopago:
+        'Use the MercadoPago form below to complete your purchase securely.',
     },
     noMethodsAvailable: 'No payment methods available',
     cardNumber: 'Card number',

packages/localizations/src/esAr.ts

@@ -107,6 +107,7 @@ export const esAr = {
       googlePay: 'Google Pay',
       paze: 'Paze',
       offline: 'Pagos en efectivo',
+      mercadopago: 'Mercado Pago',
     },
     descriptions: {
       creditCard: '',
@@ -115,6 +116,8 @@ export const esAr = {
       googlePay: '',
       paze: '',
       offline: '',
+      mercadopago:
+        'Usa el formulario de MercadoPago a continuación para completar tu compra de forma segura.',
     },
     noMethodsAvailable: 'No hay métodos de pago disponibles',
     cardNumber: 'Número de tarjeta',