From eeeb9fa6bad0c4f718b92c9fb965e9c819576ee5 Mon Sep 17 00:00:00 2001 From: falbarnaz Date: Tue, 28 Apr 2026 18:06:06 -0300 Subject: [PATCH 1/6] feat: vnext-78878 add authorization call --- .../checkout-buttons/mercadopago/mercadopago.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/react/src/components/checkout/payment/checkout-buttons/mercadopago/mercadopago.tsx b/packages/react/src/components/checkout/payment/checkout-buttons/mercadopago/mercadopago.tsx index d43b11df..2efd98d3 100644 --- a/packages/react/src/components/checkout/payment/checkout-buttons/mercadopago/mercadopago.tsx +++ b/packages/react/src/components/checkout/payment/checkout-buttons/mercadopago/mercadopago.tsx @@ -9,6 +9,7 @@ import { } from '@/components/checkout/payment/utils/use-confirm-checkout'; import { useIsPaymentDisabled } from '@/components/checkout/payment/utils/use-is-payment-disabled'; import { useLoadMercadoPago } from '@/components/checkout/payment/utils/use-load-mercadopago'; +import { useAuthorizeCheckout } from '@/components/checkout/payment/utils/use-authorize-checkout'; import { formatCurrency } from '@/components/checkout/utils/format-currency'; import { Button } from '@/components/ui/button'; import { useGoDaddyContext } from '@/godaddy-provider'; @@ -39,12 +40,22 @@ export function MercadoPagoCheckoutButton() { const form = useFormContext(); const { isMercadoPagoLoaded } = useLoadMercadoPago(); const confirmCheckout = useConfirmCheckout(); + const authorizeCheckout = useAuthorizeCheckout(); const [error, setError] = useState(''); const [isLoading, setIsLoading] = useState(false); const [isBrickReady, setIsBrickReady] = useState(!!brickController); const elementId = 'mercadopago-brick-container'; + const getPreferenceId = async () => { + const response = await authorizeCheckout.mutateAsync({ + paymentToken: '', + paymentType: PaymentMethodType.MERCADOPAGO, + paymentProvider: PaymentProvider.MERCADOPAGO, + }); + return response?.transactionRefNum; + } + const handleSubmit = useCallback( async ({ formData }: any) => { isSubmitting = true; @@ -115,10 +126,13 @@ export function MercadoPagoCheckoutButton() { const { bricksBuilderInstance: bricksBuilder } = getMercadoPagoInstance(mercadoPagoConfig.publicKey); + + const mercadoPagoPreferenceId = await getPreferenceId(); brickController = await bricksBuilder.create('payment', elementId, { initialization: { amount: total, + preferenceId: mercadoPagoPreferenceId, payer: { email: 'dummy@testuser.com' }, }, customization: { From e0791ddac3442fb4040b68e9ce38f77009537350 Mon Sep 17 00:00:00 2001 From: falbarnaz Date: Tue, 28 Apr 2026 19:01:09 -0300 Subject: [PATCH 2/6] feat: vnext-78878 update error message --- .../payment/checkout-buttons/mercadopago/mercadopago.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/checkout/payment/checkout-buttons/mercadopago/mercadopago.tsx b/packages/react/src/components/checkout/payment/checkout-buttons/mercadopago/mercadopago.tsx index 2efd98d3..76ab70fa 100644 --- a/packages/react/src/components/checkout/payment/checkout-buttons/mercadopago/mercadopago.tsx +++ b/packages/react/src/components/checkout/payment/checkout-buttons/mercadopago/mercadopago.tsx @@ -161,7 +161,7 @@ export function MercadoPagoCheckoutButton() { } }, onError: () => { - setError(t.errors.errorProcessingPayment); + setError(t.errors.failedToInitializePayment); setIsLoading(false); }, }, @@ -169,7 +169,7 @@ export function MercadoPagoCheckoutButton() { setIsBrickReady(true); } catch (_err) { - setError(t.errors.errorProcessingPayment); + setError(t.errors.failedToInitializePayment); setIsBrickReady(false); brickCreationPromise = null; } @@ -198,7 +198,7 @@ export function MercadoPagoCheckoutButton() { isMercadoPagoLoaded, mercadoPagoConfig?.publicKey, elementId, - t.errors.errorProcessingPayment, + t.errors.failedToInitializePayment, ]); const handleClick = async () => { From 095065e427916759cc0dbc7f5de086859fbbe359 Mon Sep 17 00:00:00 2001 From: falbarnaz Date: Wed, 29 Apr 2026 11:09:57 -0300 Subject: [PATCH 3/6] feat: vnext-78878 add changeset --- .changeset/stupid-papayas-dig.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/stupid-papayas-dig.md diff --git a/.changeset/stupid-papayas-dig.md b/.changeset/stupid-papayas-dig.md new file mode 100644 index 00000000..a17eba38 --- /dev/null +++ b/.changeset/stupid-papayas-dig.md @@ -0,0 +1,5 @@ +--- +"@godaddy/react": major +--- + +This PR adds payment authorization integration to the MercadoPago checkout button component, implementing preference ID generation for brick initialization From fa2205af2b763cdc52f10eab5e4f260c6da48b4d Mon Sep 17 00:00:00 2001 From: Phil Bennett Date: Wed, 29 Apr 2026 09:28:47 -0500 Subject: [PATCH 4/6] fix: disable Pay Now button when MercadoPago brick fails to initialize --- .../mercadopago/mercadopago.tsx | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/react/src/components/checkout/payment/checkout-buttons/mercadopago/mercadopago.tsx b/packages/react/src/components/checkout/payment/checkout-buttons/mercadopago/mercadopago.tsx index 76ab70fa..ef22cee5 100644 --- a/packages/react/src/components/checkout/payment/checkout-buttons/mercadopago/mercadopago.tsx +++ b/packages/react/src/components/checkout/payment/checkout-buttons/mercadopago/mercadopago.tsx @@ -43,8 +43,7 @@ export function MercadoPagoCheckoutButton() { const authorizeCheckout = useAuthorizeCheckout(); const [error, setError] = useState(''); - const [isLoading, setIsLoading] = useState(false); - const [isBrickReady, setIsBrickReady] = useState(!!brickController); + const [isBrickReady, setIsBrickReady] = useState(false); const elementId = 'mercadopago-brick-container'; const getPreferenceId = async () => { @@ -100,11 +99,10 @@ export function MercadoPagoCheckoutButton() { if (canInitialize) { if (brickController) { - // Brick already exists, just mark as ready + // Brick already exists, onReady callback will mark as ready setIsBrickReady(true); } else if (brickCreationPromise) { - // Brick creation in progress, wait for it - brickCreationPromise.then(() => setIsBrickReady(true)); + // Brick creation in progress, onReady/onError callbacks will handle state } else { // Create new brick const renderBrick = async () => { @@ -149,7 +147,7 @@ export function MercadoPagoCheckoutButton() { }, callbacks: { onReady: () => { - setIsLoading(false); + setIsBrickReady(true); const brickContainer = document.getElementById(elementId); const formElement = brickContainer?.querySelector('form'); if (formElement) { @@ -162,12 +160,11 @@ export function MercadoPagoCheckoutButton() { }, onError: () => { setError(t.errors.failedToInitializePayment); - setIsLoading(false); + setIsBrickReady(false); }, }, }); - setIsBrickReady(true); } catch (_err) { setError(t.errors.failedToInitializePayment); setIsBrickReady(false); @@ -229,9 +226,16 @@ export function MercadoPagoCheckoutButton() { size='lg' type='button' onClick={handleClick} - disabled={isPaymentDisabled || isLoading || !isBrickReady} + disabled={isPaymentDisabled || authorizeCheckout.isPending || !isBrickReady} > - {t.payment.payNow} + {authorizeCheckout.isPending && !error ? ( + <> + + {t.payment.payNow} + + ) : ( + t.payment.payNow + )} ) : (