diff --git a/.changeset/stupid-papayas-dig.md b/.changeset/stupid-papayas-dig.md new file mode 100644 index 00000000..61e26763 --- /dev/null +++ b/.changeset/stupid-papayas-dig.md @@ -0,0 +1,5 @@ +--- +"@godaddy/react": patch +--- + +This PR adds payment authorization integration to the MercadoPago checkout button component, implementing preference ID generation for brick initialization 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..53950b6d 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,21 @@ 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 [isBrickReady, setIsBrickReady] = useState(false); 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; @@ -89,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 () => { @@ -115,10 +124,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: { @@ -135,7 +147,7 @@ export function MercadoPagoCheckoutButton() { }, callbacks: { onReady: () => { - setIsLoading(false); + setIsBrickReady(true); const brickContainer = document.getElementById(elementId); const formElement = brickContainer?.querySelector('form'); if (formElement) { @@ -147,15 +159,18 @@ export function MercadoPagoCheckoutButton() { } }, onError: () => { - setError(t.errors.errorProcessingPayment); - setIsLoading(false); + // Only treat as initialization failure if the brick never became ready. + // Card validation errors are handled by the brick's own UI. + if (!brickController) { + setError(t.errors.failedToInitializePayment); + setIsBrickReady(false); + } }, }, }); - setIsBrickReady(true); } catch (_err) { - setError(t.errors.errorProcessingPayment); + setError(t.errors.failedToInitializePayment); setIsBrickReady(false); brickCreationPromise = null; } @@ -184,7 +199,7 @@ export function MercadoPagoCheckoutButton() { isMercadoPagoLoaded, mercadoPagoConfig?.publicKey, elementId, - t.errors.errorProcessingPayment, + t.errors.failedToInitializePayment, ]); const handleClick = async () => { @@ -215,9 +230,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 + )} ) : (